How to Install ReactJS in 2024 Step by Step with Vite

Last updated : 2023-11-06

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.

bash

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

bash

npm create  vite@latest

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

bash

Need to  install  the  following  packages:

[email protected]

Ok to  proceed? (y) y

✔ Project  name:  …  vite-react

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

  Vanilla
  Vue
❯ React
  Preact
  Lit
  Svelte
  Others

Select the language you wish to use with React.

? Select a variant: › - Use arrow-keys. Return to submit.
  ❯ JavaScript
    TypeScript

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.

bash

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.

bash

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