Table of Contents
About the author
Welcome to the final lesson of the Frontend Web Development for Beginners course!
You may notice, this final lesson isn't the longest on the writing side of things.
But...
It's one of the most important lessons I have ever created.
In the 10-hour video at the top of this page, you will go from start to finish building a Vanilla HTML, CSS, and JavaScript Tic-Tac-Toe game, refactoring it to TypeScript, and finally, React.
It will take you on a journey to understand _why_ we need libraries like React and how they help us be more productive developers. It will also show you the power of vanilla ES6!
Here's what you can expect:
- Introduction to building a Vanilla JavaScript project, focusing on creating a Tic Tac Toe game.
- Detailed walkthrough on setting up the development environment in Visual Studio Code, including live server, Emmet Snippets, and Prettier auto formatting.
- Comprehensive guide to constructing the HTML document, initial layout, and Tic Tac Toe grid using HTML, CSS, and CSS Grid for layout design.
- Steps to make the game mobile responsive, ensuring a great user experience across devices.
- Insight into enhancing user interface with animated turn indicators, FontAwesome icons, and CSS animations.
- Tutorial on building functional elements like the actions menu button, dropdown menu, and game board squares.
- Deep dive into JavaScript essentials:
- Initial modal setup and connecting JavaScript to the HTML file.
- Defining user actions and tracking player moves.
- Best practices in managing global scope, namespaces, and stable selectors.
- Explanation of application "state," including the difference between client vs server state.
- Techniques for detecting a winning game and displaying a winner modal.
- Code organization and cleanup tips, building the "View" file, and implementing UI only event listeners.
- Discussion on managing data with a "Store" file, the rationale behind Redux, and connecting the Store to the View.
- Implementation of game reset functionality and saving the history of games using localStorage.
- Introduction to advanced concepts such as event delegation and starting a TypeScript refactor of the project.
- Overview of TypeScript, including setup, dependencies, benefits, and converting JavaScript files to TypeScript.
- Transition to React:
- Initiating a React refactor and setting up a React app with Webpack for hot reloading.
- Refactoring the vanilla app to React and TypeScript, covering JSX, state management with useState hook, and custom hooks like useLocalStorage.
- Final thoughts on building a complete React application, highlighting the value of TypeScript in improving code quality.
- Guidance on next steps for further learning and development in JavaScript, TypeScript, and React.