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.