Beginner's Guide: Creating Your First React Project Step-by-Step

Starting your React journey? The fastest and most modern way to set up a React project today is using Vite. It’s extremely fast, simple, and perfect for beginners as well as professionals.

In this guide, you’ll learn how to create a React project step-by-step using Vite.

🎬 Video Tutorial (Watch + Learn)

If you prefer watching, I’ve explained the full process in this YouTube video:

👉 Youtube Video Link - Go and Watch

🚀 Why Use Vite for React?

Vite has become the most popular way to create a React project because:

• ⚡ Super fast development server

• 🔥 Instant HMR (Hot Module Reloading)

• 📁 Clean folder structure

• 🧩 Works perfectly with React, TypeScript, TailwindCSS, Redux, and more

• 🧱 Builds production-ready bundles quickly

In short: Vite is faster and more modern than Create React App (CRA).

---

✅ Prerequisites

Before starting, make sure you have:

• Node.js installed (preferably version 18 or above)

• A terminal like CMD, PowerShell, or Git Bash

• A code editor like VS Code

---

🛠 Step 1: Create a New React Project Using Vite

Open your terminal and run:

Option 1: Interactive Setup (Recommended)

npm create vite@latest my-react-app

Vite will ask you:

• Project name

• Framework → Select React

• Variant → Select JavaScript or TypeScript

Option 2: Direct Command (No Questions Asked)

For JavaScript:

npm create vite@latest my-react-app -- --template react

For TypeScript:

npm create vite@latest my-react-app -- --template react-ts

---

🧩 Step 2: Install Project Dependencies

After creating the project:

cd my-react-app
npm install

---

▶️ Step 3: Start the Development Server

Run:

npm run dev

You’ll get a URL like:

http://localhost:5173

Open it — your React app is running!

---

🗂 Project Folder Structure (Simple Overview)

my-react-app/
│  index.html
│
├─ src/
│   main.jsx
│   App.jsx
│
├─ public/
│
└─ package.json

---

🧪 Step 4: Create Your First React Component

Inside src/, create a folder:

src/components/Hello.jsx

Add this:

export default function Hello({ name }) {
  return <h2>Hello, {name}! 👋</h2>;
}

Use it inside App.jsx:

import Hello from "./components/Hello";

function App() {
  return (
    <div>
      <h1>My Vite + React App</h1>
      <Hello name="Sandip" />
    </div>
  );
}

export default App;

Save — browser updates instantly.

---

🎒 Bonus: If You Want TypeScript

Create with:

npm create vite@latest my-react-app -- --template react-ts

It gives you .tsx files + TypeScript setup ready to use.

---

🧱 Step 5: Build for Production

When your app is ready to deploy:

npm run build

Preview build:

npm run preview

The final files will be inside the dist/ folder.

You can deploy them to:

• Netlify

• Vercel

• GitHub Pages

• DigitalOcean

• Cloudflare Pages

---

❗ Common Issues & Fixes

1. Command not working?

Try:

npx create-vite@latest

2. Node version error

Update Node from nodejs.org.

3. Port already in use

Stop the dev server (Ctrl + C) and restart.

---

🏁 Final Thoughts

Using Vite is the fastest and cleanest way to start a React project. It’s beginner-friendly, extremely fast, and preferred by most developers today.

If you followed this guide, you now have:

✔ A working React project
✔ Vite dev server running
✔ Your first component
✔ Build-ready setup

---

🎥 Full Video Tutorial

👉 https://youtu.be/iynvQCb9kuc?si=pTv02fDQZY-Avv1s

Thanks for reading! If you found this tutorial helpful, feel free to share it or drop your questions in the comments.