How to Install ReactJS in 2024 Step by Step with Vite

Featured image of the post: How to install ReactJS in 2024 Step by step with Vite

Learn to install ReactJS in 2024 with this step-by-step tutorial. Start developing your projects with the most up-to-date technology.

Important Note:

The steps provided in this tutorial are useful for installing and starting a React project on Windows, Mac, and Linux.

Verify that Node.js and npm are installed

To successfully carry out the installation of a React project, we must have Node installed. For this tutorial, we will need a version of Node higher than 8.10 and of npm higher than 6 since we will be using the npx package runner tool.

node -v
## it should return something like v13.12.0
npm -v
## 6.14.4

What to do if Node.js is not installed?

If the previous command does not return a valid version of Node.js, we will need to install Node to proceed with the React installation.

Important Note:

Previously, to start a React project we used the command npx create-react-app, but since March 2023, the new documentation does not recommend using this installation method.

Next, you will learn how to install React to start a new application.

Install React with Vite

Run the following command to start a project with Vite.js

npm create vite@latest

Next, assign a name to the project and select React as the framework you wish to install the application with.

Need to install the following packages:
Ok to proceed? (y) y
✔ Project name: … vite-react
? Select a framework: › - Use arrow-keys. Return to submit.
❯ React

Select the language you wish to use with React.

? Select a variant:- Use arrow-keys. Return to submit.

With the previous steps, you now have your project set up. Now, navigate to the created folder and execute the command npm install to install the dependencies for your project.

cd vite-react
npm install
npm run dev

Then, execute npm run dev to start your React application. Go to the browser and open the port http://localhost:5173/ to see your React app.

VITE v4.2.1 ready in 560 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help

Recommendations for Production React Projects

In the new React documentation, the use of frameworks is recommended for starting a project, such as Next.js, Remix, or Gatsby.

For an application that will be used in real life, like an ecommerce site or a blog, it is best to directly use a framework. However, if you only need to test, study, and learn to use React, installing React using Vite as we did before is sufficient.

Juneiker Castillo freelance web developer

I am Juneiker Castillo, a passionate front-end web developer deeply in love with programming and creating fast, scalable, and modern websites—a JavaScript enthusiast and a React.js lover ⚛️.

About me