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