React Lesson 2: Setup Your First React App

Let’s create a real React app using Vite — the modern, fast build tool. This is how professionals start React projects today.

Prerequisites

# Make sure you have Node.js installed
# Check in Terminal / Command Prompt:
node --version    # should be 18+ or 20+
npm --version     # comes with Node

Create a New React App with Vite

# In Terminal (Mac) or Command Prompt (Windows):
npm create vite@latest my-first-react
# Select: React
# Select: JavaScript

cd my-first-react
npm install
npm run dev

# Open browser: http://localhost:5173

Project Structure

my-first-react/
├── public/           # static files (images, etc.)
├── src/
│   ├── App.jsx       # main component
│   ├── App.css
│   ├── main.jsx      # entry point
│   └── index.css
├── index.html        # HTML template
├── package.json      # dependencies
└── vite.config.js    # Vite config

Your First Edit

// src/App.jsx
function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>I am learning the best frontend library.</p>
    </div>
  );
}

export default App;

// Save the file — the browser updates INSTANTLY (hot reload!)!