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

Source: Dev.to

Introduction

This guide walks beginners through creating and running their first React application using Vite, the officially recommended method.

Prerequisites

• Node.js version 20.19 or higher.
  If you don’t have it installed, download it from the Node.js official website.

Steps to Create a React App with Vite

1. Create a new Vite project

npm create vite@latest project-name

When prompted, press y to proceed.

2. Choose the framework

• Use the Up/Down arrow keys to select React from the list.
• Press Enter to confirm.

3. Select a variant

• Choose the desired React variant (e.g., react, react-ts).
• Navigate with the Up/Down arrow keys and press Enter.

4. Enable TypeScript (optional)

If asked whether to add TypeScript support, select Yes and press Enter.

5. Install dependencies and start the development server

cd project-name
npm install
npm run dev

Your app will be available at http://localhost:5173. Click the link or open it in a browser to view the running application.

Alternative (Deprecated) Method

npx create-react-app my-app

Note: create-react-app is deprecated and no longer the recommended way to start a new React project. Prefer Vite for a faster, more modern setup.

Related Links

• 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