React for Beginners: Build a Game While Learning React

Name: React for Beginners: Build a Game While Learning React
Rating: 4.6 (134 reviews)

The very basics of React.js for absolute beginners

Created byHunor Borbély

Last updated 2/2024

English

What you'll learn

React
Web development
Game development

Course content

6 sections • 13 lectures • 47m total length

Introduction0:44

Breaking down the game into components3:13
What is a component and how to break down our game into components?
Creating our first components4:58
In this lesson, we jump straight into it and create our first components.
Note: If you are having problems with the settings: New versions of React and React DOM come out together, but it can happen that the website providing these libraries for CodePen is not up to date with both of them. If for some reason the version number of React and the version number of React DOM do not match then you have to downgrade the one with the higher version number by simply changing the number in the url of the added library to match.
The Grid4:46
In this lesson, we put our square components in place and add some CSS to make it look like a grid.
Which square is which?4:05
How to pass on a prop to a child component?

Detecting the winner4:43
We add some application logic to detect the winner. This is a purely JavaScript chapter, but it is necessary to make our game work.
And the winner is ...5:29
Putting the final pieces together.
Conclusion0:43
Congratulations! Now you have a Tic Tac Toe game, and hopefully, you also have a much better understanding of how React works. If you have any question please don't hesitate to reach out to me. You can also find me on Twitter at @HunorBorbely
Take your game to the next level

Requirements

JavaScript
HTML
CSS

Description

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.

Who this course is for:

Beginner Web developers eager to learn React in a fun way

React for Beginners: Build a Game While Learning React

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 1min

Creating our first components4 lectures • 17min

The Changing parts3 lectures • 11min

Circles and Crosses1 lecture • 4min

Interaction1 lecture • 4min

And the winner is ...3 lectures • 11min

Requirements

Description

Who this course is for: