00:00/00:00TIME LEFT
Choosing the a bcd
3:22
00:03:22

Shortcuts

  • SPACE to play / pause
  • ARROW RIGHT or L to go forward
  • ARROW LEFT or J to go backward
  • ARROW UP to increase volume
  • ARROW DOWN to decrease volume
  • F to toggle fullscreen
  • M to toggle mute
  • 0 to 9 to go to the corresponding part of the video
  • SHIFT + , to decrease playback speed
  • SHIFT + . or ; to increase playback speed

Want to learn more?

That's the end of the free part 😔

To get access to 45 hours of video, a members-only Discord server and future updates, join us for only $95!

41.

First React Application

Difficulty Hard

Downloads

Introduction 00:00

As you’ve probably understood by now, we are going to use React. Maybe you already know React, maybe you don’t, or maybe you just need a quick reload.

Anyway, since this course is beginner friendly, we are going to learn React and while doing so, we are going to put Three.js and R3F aside.

Don’t expect this lesson to be creative and good-looking. Although this lesson is quite practical, the following lessons will challenge your creativity

By the end of this lesson, you should know everything you need for what’s coming, but also a bit more so that you truly understand React and how to use it.

If you already feel comfortable with React, you can skip ahead to the next lesson.

Do not feel overwhelmed by the amount of information you’ll learn. It’s a lot, but it’s perfectly normal not to understand and remember everything. We are going to implement what we’ve learned in the next few lessons.

Setup 01:41

In order to really understand React, we are going to start the project in two different ways.

First, we are going to do it using NPX that will create a small React App with already a few features running. Then we will do it from scratch to understand what’s happening.

There is no starter pack provided with this lesson.

With NPX

One of the most common ways to create a React application, is with npx.

npx is installed with Node.js and NPM. It allows us to run NPM packages without having to create a project and install the dependencies as we did with npm.

The idea here is that we are going to run an NPM package that will create a default React project. The NPM package is named create-react-app (https://www.npmjs.com/package/create-react-app).

We are going to demonstrate it here for the sake of learning, but we are not going to use it. Feel free to simply read the following part or to do it out of curiosity.

Create a folder and name it the way you want. Let’s say 41-first-react-application.

Go inside the folder using the terminal and run npx create-react-app . (the . indicates that we want the project to be set in the current folder).

If you are being asked to install a dependency, type y and press Enter.

Wait a little and you’ll get a small, ready-to-use React project in the folder. You can start it with npm run start.

This is a great and popular solution, but there are a lot of files and features that we don’t really need.

From scratch

Let’s see how we can create a React app without using NPX now.

Want to learn more?

That's the end of the free part 😔

To get access to 45 hours of video, a members-only Discord server and future updates, join us for only $95!

How to use it

  • Download the Final project
    (if your browser detects a menace, do not worry, it is not)
  • Unzip it
  • Open your terminal and go to the unzip folder
  • Run npm install command to install dependencies
  • Run npm run dev to launch the local server
    (your browser should start automatically)

You can now start coding.

  • The JS is located in src/script.js
  • The HTML is located in src/index.html
  • The CSS is located in src/style.css

Any trouble? Go to the discord server: