Installing React with Vite: A Beginner’s Guide

A girl programming at a computer in a room full of gadgets

Most of this article was generated by AI, based on a transcript of my TikTok video about React and Vite.

The official React documentation has shifted its recommendation for beginners away from using create-react-app. Instead, they now advise using fully-fledged React frameworks like Next.js, Remix, or Gatsby. One possible reason for this change is that the React team may have recognised some issues with create-react-app or the shortcomings of single-page applications.

However, if you’re looking to use React without a framework, Vite is an excellent choice. Vite is a powerful bundler that offers a React template out of the box. In this article, we’ll guide you through the process of installing React using Vite.

Prerequisites

Before you begin, make sure you have Node.js installed on your system. If you don’t have it yet, you can download it from the official Node.js website, it’s really simple.

Step 1: Create a new Vite project

To create a new Vite project, open your terminal and run the following command:

npx create-vite your-project-name --template react

Replace your-project-name with the name you want for your project. Vite supports many frameworks, but in this case, we specify the react template with the --template react option.

Step 2: Navigate to the project directory

Once the Vite project is created, navigate to the project directory:

cd your-project-name

Don’t forget to replace your-project-name with the actual name you chose for your project (unless of course, you want to keep this name for your project).

Step 3: Install dependencies and run the development server

Next, install the necessary dependencies and start the development server:

npm i
npm run dev

NOTE: If you’re adventurous you could run all the commands with one line:

cd your-project-name && npm i && npm run dev

After running these commands, you should see a message in your terminal indicating that your React website is running on a specific port, it’s usually a ‘random’ port number likehttp://localhost:5173.

Now, open your browser and visit the provided URL to see your React website in action.

Default site created by the Vite React template

And that’s it! You’ve successfully installed React using Vite.

This approach offers a clean, straightforward setup for working with React without the need for a full-fledged framework. Now go forth and write some code.

About the author

Thanks for reading this, I really appreciate you giving my words your time. You can find me on most social media platforms. You can support me by engaging with any of my content or buying me a coffee.

Until next time 👋