DEV Community

Ahmad Mahboob
Ahmad Mahboob

Posted on

How to Create a React App Using Vite (Step-by-Step Guide for Beginners)

If you’re a beginner looking forward to diving into learning React. But you don’t know how to create the first React App. If you are starting to learn React, then you would be wondering how to create your first React app. Then, you are at the right place. In this blog, you will learn how to create React app and run your React app. There are many different ways of creating a React App. But we will be discussing the official suggested method to create first React app (i.e., Using Vite). Here’s the complete step-by-step guidance and everything you need to create your first React app:
First Step: Run this command: (You’re supposed to have Node.js version 20.19+. If you haven’t installed it, first install it from Node.js official website)

npm create vite@latest project-name
Enter fullscreen mode Exit fullscreen mode

Second Step: If prompted, press ‘y’ to proceed.

Prompt for proceeding img
Third Step: Then, select the required framework (i.e., React) that you want to create, from the list like one shown in the image below. Keep in mind to navigate through the list by using Up/Down arrow keys. After selecting the required framework, press Enter key to proceed to next step.

React Vite Setup
Fourth Step: After selecting the framework, a list of different variants are shown (like the one shown in the image below). From this list, select the required variant and then press Enter. Note: Navigate through the list using Up/Down arrow keys.

React Vite Setup JS
Fifth Step: After that, this option will appear (as shown in image below). So, select ‘Yes’ and press Enter key to proceed.

Prompt asking,
Now, wait for npm to install required dependencies. Congrats, you have created your first React app.
Now, to run your React app (if you chose ‘No’ in the last step), run these commands:

cd project-name
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Now, your app will be running on Localhost Port 5173:
localhost:5173
You can also Ctrl + Click to follow the link.

React localhost port address


Why Use Vite Instead of Create React App?

There’s another way of creating React app by running this command:

npx create-react-app my-app
Enter fullscreen mode Exit fullscreen mode

But this official method is deprecated and is not officially suggested. So, use Vite for creating React app.

Related Links:

Top comments (0)