React Getting Started

Getting Started with React #

There are several ways to start a React project. We’ll cover the two most popular modern approaches.

Option 1 — Vite (Recommended) #

Vite is a next-generation build tool that provides blazing fast Hot Module Replacement (HMR) and near-instant server startup.

# Create a new React project with Vite
npm create vite@latest my-app -- --template react

# Navigate into the project
cd my-app

# Install dependencies
npm install

# Start the development server (http://localhost:5173)
npm run dev

Vite Project Structure #

my-app/
├── public/             ← Static files (served as-is)
│   └── vite.svg
├── src/
│   ├── assets/         ← Images, fonts
│   ├── App.jsx         ← Root component
│   ├── App.css
│   ├── main.jsx        ← Entry point
│   └── index.css
├── index.html          ← HTML shell
├── vite.config.js      ← Vite configuration
└── package.json

Option 2 — Next.js (Full-Stack) #

Next.js adds server-side rendering, file-based routing, and API routes on top of React. Choose it when you need SEO, server components, or a full-stack solution.

npx create-next-app@latest my-app
cd my-app
npm run dev

Essential npm Scripts #

Your First Edit #

Open src/App.jsx and replace everything with:

function App() {
  return (
    <div>
      <h1>Hello, React! ⚛️</h1>
      <p>Edit src/App.jsx and save to see changes instantly.</p>
    </div>
  );
}

export default App;