Learn React while building a Tic-tac-toe game
- Description
- Curriculum
- FAQ
- Reviews
Do you want to learn React the fun way? In this class, you will learn the key concepts of React while building a Tic Tac Toe game.
React is currently the most popular front-end library. It’s easy to begin with yet it’s very capable even for building large-scale professional web-applications. In this course, we learn the fundamentals of React while having some fun and creating a Tic Tac Toe game.
While building a game we dive into the fundamentals of React like:
-
How to break down your application or game into smaller pieces, into components?
-
How to structure your logic and how to connect these components with props and callbacks?
-
How to deal with change, what is the state, what to store in it, and where to define it?
-
How to add interaction and how does re-rendering work in React?
-
And while it has nothing to do with React we are also going to draw some basic images by coding SVGs
This is an introductory course for beginners. We don’t get to more advanced things like routing or state management of large-scale applications. Instead, I give you a foundation you can build on.
Requirements:
This is an intro course, no prior React knowledge is required, but some HTML, CSS, and basic Javascript skills are necessary.
-
2Breaking down the game into componentsVideo lesson
What is a component and how to break down our game into components?
-
3Creating our first componentsVideo lesson
In this lesson, we jump straight into it and create our first components.
-
4The GridVideo lesson
In this lesson, we put our square components in place and add some CSS to make it look like a grid.
-
5Which square is which?Video lesson
How to pass on a prop to a child component?
-
6The changing partsVideo lesson
How to use data and what's the general structure of component-based applications?
-
7Our first attempt to have a stateVideo lesson
Our first attempt to make our game data-driven.
-
8Lifecycle of a componentVideo lesson
Fixing our state with React hooks and exploring how re-rendering works.
External Links May Contain Affiliate Links read more