React — Get Started

Prerequisites

Before starting with React, make sure you have:

• Node.js 18+ — download from nodejs.org
• npm — comes with Node.js
• VS Code — or any code editor
• Basic JavaScript knowledge — ES6+, arrow functions, destructuring

Create a New React App

Option 1: Vite (Recommended)

Vite is faster than Create React App:

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

Option 2: Create React App

The classic way (slower but still works):

npx create-react-app my-react-app
cd my-react-app
npm start

Project Structure

my-react-app/
├── public/
│   └── index.html
├── src/
│   ├── App.jsx          ← Main component
│   ├── App.css          ← Styles
│   ├── main.jsx         ← Entry point
│   └── index.css        ← Global styles
├── package.json
└── vite.config.js

Your First Component

Open src/App.jsx:

import { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <h1>Hello, React!</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

export default App;

Understanding the Entry Point

// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

This mounts your <App /> into the div#root in public/index.html.

Running the Dev Server

npm run dev

Visit http://localhost:5173 (Vite) or http://localhost:3000 (CRA).

The dev server has hot module replacement — changes appear instantly without a full page reload.

Adding a Second Component

// src/Greeting.jsx
function Greeting({ name }) {
  return <h2>Hello, {name}!</h2>;
}

export default Greeting;

// src/App.jsx
import Greeting from './Greeting';

function App() {
  return (
    <div className="App">
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

export default App;

Installing Packages

# Routing
npm install react-router-dom

# State management
npm install zustand

# HTTP requests
npm install axios

# Styling
npm install tailwindcss @tailwindcss/vite

Building for Production

npm run build

This creates a dist/ folder with optimized, minified files ready to deploy.

Deploying

Platform	Command
Vercel	Connect your GitHub repo
Netlify	Drag and drop the dist/ folder
GitHub Pages	Add gh-pages package
Firebase	firebase deploy

Mini Practice

1. Create a new React app with Vite
2. Change the <h1> text and see it update
3. Create a Greeting component and use it in App
4. Add a counter with useState
5. Build for production and check the dist/ folder

Up Next

Next: Introduction to React →