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

Why Use Vite Instead of Create React App? 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) Second Step: If prompted, press ‘y’ to proceed. 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. 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. Fifth Step: After that, this option will appear (as shown in image below). So, select ‘Yes’ and press Enter key to proceed. 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: Now, your app will be running on Localhost Port 5173: localhost:5173 You can also Ctrl + Click to follow the link. There’s another way of creating React app by running this command: But this official method is deprecated and is not officially suggested. So, use Vite for creating React app. Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse COMMAND_BLOCK: npm create vite@latest project-name Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: npm create vite@latest project-name COMMAND_BLOCK: npm create vite@latest project-name CODE_BLOCK: cd project-name npm install npm run dev Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: cd project-name npm install npm run dev CODE_BLOCK: cd project-name npm install npm run dev CODE_BLOCK: npx create-react-app my-app Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: npx create-react-app my-app CODE_BLOCK: npx create-react-app my-app - Getting Started | Vite - Vite Official Website - Create React App is Deprecated - Build a React App from Scratch — React (Vite) - Sunsetting Create React App — React Blog - Node.js — Run JavaScript Everywhere - Build a React App from Scratch — React