Follow these Simple Steps to Create a React app Project Using Vite
Johnson Francis
Posted on March 14, 2024
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:
- Visual Studio Code: Download VS Code
- Nodejs: Download Nodejs
- Basic understanding of REACTJS
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
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.
Step 3. cd vite_reactapp
to change from your current directory to a new directory.
Step 4. Run npm install
to install all packages and the necessary 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
.
Finally, You should have your development webpage look like this:
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.
Posted on March 14, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.