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/courses/frontend-web-development-for-beginners/javascript-to-react-tic-tac-toe-project
- Course Home: https://www.fullstackfoundations.com/courses/frontend-web-development-for-beginners
- Course Repo: https://github.com/zachgoll/fullstack-roadmap-series

-------------------------------------------------------------------------------------

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

Видео JavaScript to React — Full Beginner Project канала Full Stack Zach