How To Create A React App With Vite

A few months ago, a new official React documentation was released. To everyone’s surprise, there was nothing related to create-react-app(CRA) in the documentation. Which means they discontinue the use of CRA. Since they discontinued CRA, how can React developers build React apps? This is where Vite comes in handy.

Vite is a tool that makes it easier and faster to start up any JavaScript framework with minimal configuration. If you are the type that is still using CRA, then this article is for you.

Prerequisite

Vite requires Node.js version 16+, so upgrade your Node.js if your package manager shows the warning.

Creating React App With Vite

Open your command line and navigate to the folder you want to create your react app in.

$ npm create vite@latest

Run this above command.

The command line will run the vite executable from the remote npm repository and you will be prompted to write a project name. Write your preferred project name and click enter.

After the script loads, you will be prompted to choose your desired framework.

? Select a framework: > - Use arrow-keys. Return to submit.
❯   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

Use your keyboard arrow keys to navigate downward to select React.

After selecting the React framework, Vite will prompt you to select the language type. You can either use JavaScript or TypeScript to work on the project.

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

Navigate with the keyboard arrow keys, select your preferred language, and click enter.

Done. Now run:

  cd new-vite-project
  npm install
  npm run dev

Navigate to the project folder as directed

$ cd new-vite-project

Then, install the dependencies

$ npm install

When the dependencies are done installing, you can start the development server

Your output should be similar to this

VITE v4.0.4 ready in 847 ms

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help

Visit http://localhost:5173/ on your browser to view your new React app.

Conclusion

I hope you find this article helpful. If you have any questions whatsoever, you can get in touch with me through my socials.