Build Your First React Component

Create a New React Project with Vite

Vite (pronounced "veet") is the modern build tool for React. It's faster than the old Create React App and is now the recommended way to start.

In a terminal, run:

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

You'll be asked a few questions. Accept the defaults. Then:

cd my-first-react-app
npm install

This installs React and the dev server. It takes about 30 seconds.

Start the Development Server

Still in your project folder, run:

npm run dev

You'll see a URL like http://localhost:5173. Open it in your browser.

You should see the default Vite + React welcome page. Leave this running — changes you make will hot-reload instantly.

Look at the Project Structure

Open the project in VS Code. Here's what matters:

my-first-react-app/
├── src/
│   ├── App.jsx          ← your main component
│   ├── main.jsx         ← entry point
│   └── index.css        ← global styles
├── index.html           ← the single HTML page
├── package.json         ← dependencies
└── vite.config.js       ← Vite config

The entire app lives inside src/App.jsx. That's where we'll work.

Replace App.jsx

Open src/App.jsx, delete everything, and paste this:

function App() {
    return (
        <div>
            <h1>Hello from React!</h1>
            <p>This is my first component.</p>
        </div>
    );
}

export default App;

Save the file. Your browser should update instantly to show:

• Hello from React!
• This is my first component.

Add State with useState

Now let's make it interactive. Replace App.jsx with this:

import { useState } from 'react';

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

    return (
        <div style={{ padding: '2rem', textAlign: 'center' }}>
            <h1>Counter: {count}</h1>
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
            <button onClick={() => setCount(count - 1)}>
                Decrement
            </button>
        </div>
    );
}

export default App;

Save. Now click the buttons — the count updates instantly. 🎉

Extract a Reusable Component

Real apps break UI into small components. Let's make a Button component and reuse it:

import { useState } from 'react';

function Button({ label, onClick }) {
    return (
        <button
            onClick={onClick}
            style={{ margin: '0 4px', padding: '8px 16px' }}
        >
            {label}
        </button>
    );
}

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

    return (
        <div style={{ padding: '2rem', textAlign: 'center' }}>
            <h1>Counter: {count}</h1>
            <Button label="Increment" onClick={() => setCount(count + 1)} />
            <Button label="Decrement" onClick={() => setCount(count - 1)} />
        </div>
    );
}

export default App;

Same result, but now Button is reusable. That's the pattern behind every React app — small components combined into larger ones.