SPACE
to play / pauseARROW RIGHT
orL
to go forwardARROW LEFT
orJ
to go backwardARROW UP
to increase volumeARROW DOWN
to decrease volumeF
to toggle fullscreenM
to toggle mute0 to 9
to go to the corresponding part of the videoSHIFT
+,
to decrease playback speedSHIFT
+.
or;
to increase playback speed
- create-react-app (NPM)
- Getting Started (Vite)
- npm-init
- Create Vite (NPM)
- Create Vite (GitHub)
- React events (React)
- LocalStorage (MDN)
- Nullish coalescing operator (MDN)
- Zustand
- JSONPlaceholder (users endpoint)
- React Spring
- React tutorial
- React courses
- React tutorial
- React courses (old documentation but with good resources)
Shortcuts ⌨️
⚠️ 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? 🤘
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!
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.
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