🚀 Your First React App

Now that you’ve set up React, let’s build your very first app — a simple "Hello, React!" component.

📁 Project Structure

If you used Create React App or Vite, you’ll see a structure like this:

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

🧱 Creating a Component

Open App.jsx and replace the content with a simple React component:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

In main.jsx (or index.js), React renders the App:

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

💻 Run the App

In your terminal, start the development server:

npm run dev

Visit http://localhost:5173 (Vite) or http://localhost:3000 (CRA) to see your app running!

✅ Recap

• You created a React component
• You rendered it to the DOM
• You started the app using a dev server