- create-react-app (NPM)
- Getting Started (Vite)
- Create Vite (NPM)
- Create Vite (GitHub)
- React events (React)
- LocalStorage (MDN)
- Nullish coalescing operator (MDN)
- JSONPlaceholder (users endpoint)
- React Spring
- React tutorial
- React courses
SPACEto play / pause
Lto go forward
Jto go backward
ARROW UPto increase volume
ARROW DOWNto decrease volume
Fto toggle fullscreen
Mto toggle mute
0 to 9to go to the corresponding part of the video
,to decrease playback speed
;to increase playback speed
Want to learn more? 🤘
That's the end of the free part 😔
To get access to 71 hours of video, a members-only Discord server and future updates, join us for only $95!
First React Application
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.
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 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
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
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 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
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.
Let’s see how we can create a React app without using NPX now.
How to use it 🤔
(if your browser detects a menace, do not worry, it is not)
- Unzip it
- Open your terminal and go to the unzip folder
npm installto install dependencies
(if your terminal warn you about vulnerabilities, ignore it)
npm run devto launch the local server
(your browser should start 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: