00:00/00:00
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

⚠️ Update

The Vite configuration we use in the exercises now supports both .js and .jsx.

You can decide which one you prefer, yet a good practice would be to use .jsx.

Don’t be surprise if you see a mix of both solutions in the videos.

⚠️ Update

The documentation is not in beta anymore: https://react.dev

Unlock content 🔓

To get access to 93 hours of video, a members-only Discord server, subtitles, lesson resources, future updates and much more join us for only $95!

Want to learn more? 👋

79%

That's the end of the free part 😔

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

Next lesson
54.

First React Application

Difficulty Hard

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 refresh.

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 to 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 multiple different ways:

  • With NPX and Create React App. This technique will create a default React application with some features already running.
  • From scratch to really understand what is happening.
  • With Vite, so that we’re sticking with a good build tool.

With NPX and Create React App

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 XX-first-react-application (with XX being the number of this lesson).

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 for a little while 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 93 hours of video, a members-only Discord server and future updates, join us for only $95!

How to use it 🤔

  • Download the Starter pack or Final project
  • Unzip it
  • Open your terminal and go to the unzip folder
  • Run npm install to install dependencies
    (if your terminal warns you about vulnerabilities, ignore it)
  • Run npm run dev to launch the local server
    (project should open on your default browser automatically)
  • 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

If you get stuck and need help, join the members-only Discord server:

Discord