Learn React by Making a Game (2024 edition)

Focused View

Daniel Nastase

1:09:57

9 View

1. Introduction

1. Introduction.mp4

01:42

2. Learn React by Making a Game

1. Before we commence.mp4

02:38

2. Render the app with ReactDom createRoot.mp4

03:26

3. Scaffolding the main components.mp4

03:45

4. Adding props.mp4

02:49

5. Random signs.mp4

02:40

6. CSS styles in React.mp4

03:22

7. Setting inline styles.mp4

04:17

8. The useState() hook.mp4

04:20

9. Trigger events in child components.mp4

04:17

10. Animations and setInterval().mp4

04:56

11. Adding useRef() and cleanup useEffect().mp4

09:44

12. Context Providers in React.mp4

05:57

13. The useContext() hook.mp4

05:33

14. Decide the game winner.mp4

02:58

3. Class project and Recap

1.1 class-project.zip

1. Class project.mp4

05:27

2.1 code files.zip

2.2 Js-Craft.io video course manual.pdf

2. Recap.mp4

02:06

Description

Learn coding and best practices of React in a fun way, by making a real game of Rock Paper Scissors.

What You'll Learn?

Working with JSX, React DOM and Babel
React best practices and how to avoid bugs
React Context API
React hooks (useState, useEffect, useRef)
CSS styles and inline styles
How to make a small game with React

Who is this for?

Javascript developers with basic knowledge of web components who want to get started coding in React with a fun and practical exercise.

What You Need to Know?

Basic JavaScript experience

More details

Description
About This Class
Do you want to learn ReactJs in a fun, playful way? In this course, we will study React while building a full Rock-Paper-Scissors game.
I have learned how to code by trying to make my own video games. It was fun and I loved it. I think learning should be fun and close to that feeling we once had when we were kids and discovering new things.
This course comes with a printable manual
The course comes with a nice printable manual that you can download and use later for easy reference. Following the content of the videos, there are over 35 pages full of code examples, resources, or diagrams so you can get a better visual representation of what is going on.
While building this game we will go through the features of React, best practices, and how to avoid common pitfalls.
Easy setup - learn React without all the distractions
Many React newcomers tend to get hung up on external dependencies and complex development environments. Things such as build files, NPM modules to install, Webpack, Redux, and more. While these tools are great in complex apps, they tend to add additional weight when starting out.
This is the reason we will use a zero-configuration setup. Just the code editor, a basic HTML file, and the web browser. This course is about React and React only!
What will you learn?
While building a fully functioning app we dive into some basic concepts in React such as:
working with JSX, React DOM and Babel
using functional components
CSS styles and inline styles
the basics of React hooks (useState, useEffect, useRef)
setting up the React Context API for data sharing
best practices
... and more
See you in class!
Who this course is for:
Javascript developers with basic knowledge of web components who want to get started coding in React with a fun and practical exercise.

User Reviews

Rating

average 0

Total votes0

Focused display

Hi, there! I am Daniel, a frontend developer. I like computers. I try to make them like me back. I like humans. I think every person has value, intelligence, and good inside. I believe that education is the key to building a better, stable, and richer world.I started programming almost three decades ago while trying to make my own video games.Over the past 17 years, I've tried freelancing and contracting in small startups and big organizations, where I've primarily worked with JavaScript, CSS, React, and Node.js.In my free time, I write my blog, which is full, and try to spend as much time outdoors as possible.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.