Follow these Simple Steps to Create a React app Project Using Vite

bameejay

Johnson Francis

Posted on March 14, 2024

Follow these Simple Steps to Create a React app Project Using Vite

Creating a React project with the create-react-app command can be time-consuming for developers. The major benefits of using Vite are a faster development start and simple configuration. Using either of these approaches will still result in the same intent and objective; however, Vite is much faster to set up than create-react-app.

In this article, I will walk you through how to use Vite to create a React project for faster development. At the end of this guide, you will have a solid understanding of how to create a React app in a much faster way than using the create-react-app method.

Requirements and Installations:

Step 1. Locate the folder where you want your React project saved. Click inside the address bar of the folder and enter code . to open your Visual Studio Code editor. Navigate your mouse icon to view from the menu tab, and select terminal from the drop-down menu.
For Keyboard shortcut, Hold the ctrl key and tilde key on your keyboard to open the terminal

Visual studio code Terminal

Step 2. Run npm create vite@latest vite_reactapp -- -- template react.
vite_reactapp is the name you are giving your project. This command creates a new directory named vite-reactapp, you can give it any name you want. the -- -- template react specifies that you are creating a React project.

Command to install vite

Step 3. cd vite_reactapp to change from your current directory to a new directory.

Command to change directory

Step 4. Run npm install to install all packages and the necessary dependencies.

Install dependencies

Step 5. Run npm run dev to open and start the local server where you can see your running react application. it's always in this format "https://localhost/5173" which is a default port used by Vite. if the default is already been used by another application, it will pick the next available port which is usually https://localhost/3000.

Command to start development server

Finally, You should have your development webpage look like this:

Localhost webpage

What has been your experience creating a react project with vite, and does it appear to be faster and better than the conventional method?
Please leave your opinions and tips in the comments section below. Let us learn from each other's experiences.

💖 💪 🙅 🚩
bameejay
Johnson Francis

Posted on March 14, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related