Starter Kit: Your First React App

Create a running React app with Vite, tour the project files, and make your first edit.

Reading about React is like reading about swimming — at some point you have to get in the water. Let's get a real React app running on your machine in about two minutes.

You already have Node.js and npm from the JavaScript courses. The one new tool is Vite (pronounced "veet", French for fast) — a build tool: it starts a local dev server, refreshes your browser as you type, and translates React code into plain JavaScript that browsers understand.

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

Open the printed URL — usually http://localhost:5173 — and you're looking at your first running React app. 🎉

Why browsers need a build tool at all (and why not CRA)

Fill in the blank

Start the local development server from inside the project folder:

npm run ___

Now the guided tour. A fresh Vite React project has surprisingly few files that matter:

my-first-app/
├── index.html        ← the ONE html page (almost empty!)
├── src/
│   ├── main.jsx      ← the entry point: attaches React to the page
│   └── App.jsx       ← your top-level component. You'll live here.
└── package.json      ← project config + dependencies (from JS Fundamentals)

Open index.html and notice something strange — the <body> is basically empty:

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

One empty <div>. That's the whole page. So where does everything on screen come from? React builds it — all of it — inside that #root div.

The bridge between that empty div and your components is src/main.jsx:

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

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

Read it slowly — it's the last getElementById you'll write for a long while:

1. Find the empty #root div (plain DOM, one time only)
2. createRoot(...) hands that div over to React
3. .render(<App />) says: draw the App component inside it

From here on, your entire application is a tree of components with <App /> at the top — a LEGO castle 🧱 standing on the #root baseplate. You will almost never touch main.jsx again; the real work happens in App.jsx and the components it uses.

Multiple choice

A fresh React page's HTML body contains only <div id="root"></div>. Where does everything you see on screen come from?

AReact builds the entire UI inside that div, starting from the <App /> component
BThe rest of the HTML is downloaded from a server later
CVite injects extra HTML files at build time
DThe browser generates default content for empty divs

Time for your first edit. Open src/App.jsx, delete the demo content, and replace it with the smallest possible component:

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

export default App;

Save the file and look at the browser — it already shows Hello, React! without you touching refresh. That's hot reload: Vite pushes your change into the running page the instant you save.

The export default App line makes this component available to other files — the same import/export module system you learned in JavaScript Advanced. main.jsx does import App from './App' and renders it.

Fill in the blank

Make the App component importable from other files:

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

export _______ App;

Predict the output

The dev server is running. You change the heading in App.jsx to <h1>My Shop</h1> and press save. What happens in the browser?

function App() {
  return <h1>My Shop</h1>;
}

export default App;

AThe page updates to show 'My Shop' automatically, without a manual refresh
BNothing until you press F5 to refresh
CYou must re-run npm install first
DThe dev server stops and must be restarted

Recap 🧠

Vite is the build tool: npm create vite@latest scaffolds the project, npm run dev serves it at localhost:5173 with hot reload.
index.html is nearly empty — just <div id="root">; React builds the whole UI inside it.
main.jsx runs once: createRoot(document.getElementById('root')).render(<App />).
Your app is a component tree with <App /> at the top — you'll spend your time in App.jsx and the components it imports.
Components are shared between files with the ES modules export default / import you know from JavaScript Advanced.

Next: that HTML-looking code inside a JavaScript function has rules of its own. Meet JSX.

my-first-app/ ├── index.html ← the ONE html page (almost empty!) ├── src/ │ ├── main.jsx ← the entry point: attaches React to the page │ └── App.jsx ← your top-level component. You'll live here. └── package.json ← project config + dependencies (from JS Fundamentals)

The bridge between that empty div and your components is src/main.jsx:

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

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

Read it slowly — it's the last getElementById you'll write for a long while:

1. Find the empty #root div (plain DOM, one time only)
2. createRoot(...) hands that div over to React
3. .render(<App />) says: draw the App component inside it