February 14, 2023 / 97 /

How to Use Vite with React? Learn How to Create React App with Vite

Vite is a popular build tool among developers which offers fast development and reduced build times.

It is packed with features like instant server start, hot module reload (HMR) and pre-bundling.

Why should you use Vite to Create React App (CRA)?

If you have ever used the normal create react app offered by the developers of React, you will see that it takes time to create a React app even though you just want to use it for a simple project.

Another thing is that its folders are kind of bloated with files, which for a starter project might not be useful.

But with Vite, you can create a React app with less build time and the files in the folder are minimal with optimal output.

How do I use Vite for React app?

Here are the steps to follow to create a React app with Vite from scratch -

Pre-requisite:

Make sure to have node installed on your machine.

To see if you have node install, use the command node -v in your terminal to know the version of node that you have.

If you dont have node install, you can go to their website and install it on your machine - it is that straight forward.

1. Create a folder and name it whatever you want – in this example, vite_react is used as the name of the folder.

2. Open the folder with your preferred IDE, – in this case I will be using VS Code so, I will have to right-click on the folder and Open with Code.

3. A new window will pop up. Make sure to open your terminal in that folder.

4. To install Vite, you need to run npm create vite@latest and press enter.

5. After running npm create vite@latest, you will be asked to put a project name, so you can name it whatever you like and in this example, the project name where our React app will live is "start-react-project". Then click enter.

6. It will ask you to select a framework. Since, this project is a React project, you need to select React from the list.

To select React from the lists, you the up and down arrow key on your keyboard.

Note:

From the list you can see that Vite is not used only for React projects but for others as well.

7. It will also ask to choose a variant. The variant indicates if you would like to use Vanilla JavaScript or Typescript. So select your choice, but I will select JavaScript.

   Then click enter.

8. Now change your directory to the “start-react-project” by running cd start-react-project

9. Run npm install to install all the dependencies React needs.

10. After the dependencies are installed completely, you need to spin up a local server by running npm run dev and go to the provided URL.

11. Boom that’s all. You can see from the folder structure provided by Vite, it is quite minimal as compared to using a create-react-app.

Good luck to using React + Vite 🎉