JavaScript to React — Full Beginner Project
This is part of my Frontend Web Development Course for Beginners. Learn the basics of HTML, CSS, and JavaScript to build a solid foundation for web development.
You can find resources and other information for this video at the Full Stack Foundations link below:
Video Link: https://www.fullstackfoundations.com/...
Course Home: https://www.fullstackfoundations.com/...
Course Repo: https://github.com/zachgoll/fullstack...
-------------------------------------------------------------------------------------
Connect with me:
Twitter: https://www.x.com/zg_dev
Full Stack Foundations: https://www.fullstackfoundations.com
-------------------------------------------------------------------------------------
Timestamps:
0:00 Intro
1:41 Project Demo
2:58 Prerequisites
3:16 HTML, CSS, JS course reference
3:26 What will you learn (overview)
3:58 What will you learn (concepts)
4:59 Start Vanilla JS project build
6:18 Setting up live server in VSCode
7:30 VSCode Emmet Snippets
7:58 Setting up Prettier auto formatting
9:06 Setting up HTML document with live reloading
9:47 Building the initial layout with HTML and CSS
12:09 Building Tic Tac Toe grid with CSS Grid
16:06 Connecting CSS file to HTML document
30:40 Making our game mobile responsive
32:56 Layout recap
34:40 Building the animated turn indicator
36:09 Adding FontAwesome icons
38:54 Adding CSS animations to turn indicator
44:19 Building the actions menu button
47:43 Building initial dropdown menu
54:28 Styling game board squares
57:23 Styling the scoreboard
1:02:57 Building initial modal
1:11:20 When writing JavaScript, where do you start?
1:14:24 What is the MVC pattern?
1:19:13 Connected JavaScript to HTML file
1:23:55 Defining user actions in our game
1:29:43 Best practice: global scope and namespaces
1:36:12 Initializing app with JavaScript
1:40:40 Tracking player moves with JavaScript
1:42:31 Best practice: stable selectors
1:55:28 What is application "state"? (important!)
2:02:20 Client vs server state
2:16:25 Detecting a winning game
2:46:26 Showing modal when there is a winner
2:56:49 Cleaning up our messy code
3:02:24 Building our "View" file
3:18:52 UI only event listeners
3:40:06 Determining the next player move
3:52:08 Building our data "Store" file
3:53:41 Why does Redux exist?
4:14:41 Showing a winner
4:30:05 Connecting the Store to the View
4:38:43 Game reset
4:59:51 Saving history of games
5:02:05 Using localStorage to save game after browser refresh
5:14:41 New round implementation
5:35:21 Consolidating view initialization
5:43:38 Adding event delegation (challenging concept)
5:47:15 Part 2: TypeScript Refactor
5:49:25 Start of TypeScript refactor and build
5:51:36 Why TypeScript requires dependencies and build step
5:56:22 Brief introduction to using TypeScript
6:00:59 Why TypeScript?
6:05:52 Adding TypeScript dependency to app
6:08:38 What is tsconfig.json?
6:13:27 CommonJS vs ES6 Module Systems
6:30:27 Converting Store.js to TypeScript
6:59:21 Converting View.js to TypeScript
7:32:26 Transpiling our app to TypeScript
7:34:36 Showing value of TypeScript in the code we wrote
7:46:05 Part 3: React refactor
7:48:19 Starting React refactor
7:49:02 Ways to initialize a React app
7:53:12 Setting up our React app
8:05:58 Converting JSX (React code) to JavaScript
8:10:40 Setting up Webpack (build tool)
8:29:25 Hot reloading with Webpack and React
8:40:06 Adding TypeScript to our React app
8:49:41 Refactoring vanilla app to React and TypeScript
8:54:41 Converting modal to React
8:59:50 Rendering game squares with React
9:03:04 Rebuilding menu and dropdown with React
9:12:42 Adding React state management with useState hook
9:38:17 Implementing a custom useLocalStorage hook (advanced)
9:45:01 Building final React app
9:48:43 Where to go next
On this page of the site you can watch the video online JavaScript to React — Full Beginner Project with a duration of hours minute second in good quality, which was uploaded by the user Zach Gollwitzer 12 January 2024, share the link with friends and acquaintances, this video has already been watched 5,599 times on youtube and it was liked by 340 viewers. Enjoy your viewing!
