Create your first app

A React project needs a few things wired together before you can see anything: a web page, a way to turn your modern JavaScript into something the browser can load, and a server that reloads the page when you save. Setting that up by hand is tedious, so you will use a tool that does it for you.

That tool is Vite (pronounced "veet", the French word for "fast"). It creates a project in seconds and reloads your app the instant you save a file. It is one of the build tools react.dev recommends for starting a React app from scratch.

Create the projectCopy Anchor Link

cd Documents

npm create vite@latest reading-list -- --template react

cd reading-list
npm install
npm run dev

When the dev server is running, the terminal shows something like this:

  VITE v8.3.6  ready in 312 ms

  ->  Local:   http://localhost:5173/

Open http://localhost:5173 in your browser. You should see the Vite and React starter page with a counter button. Click it a few times.

A tour of the projectCopy Anchor Link

Open the reading-list folder in VS Code (File → Open Folder). Here are the files that matter right now:

reading-list/
├── index.html        the one HTML page your app lives in
├── package.json      the project's name, scripts and dependencies
├── vite.config.js    Vite settings (you will not touch this for a while)
├── node_modules/     downloaded packages (never edit this)
├── public/           static files such as the favicon
└── src/
    ├── main.jsx      the entry point: starts React
    ├── App.jsx       your top-level component
    ├── App.css       styles for the starter page
    ├── index.css     global styles for the starter page
    └── assets/       images used by the starter page

The interesting part is how three files hand off to each other.

index.html is a nearly empty page. Its body holds a single empty element, <div id="root"></div>, and a script tag that loads src/main.jsx.

src/main.jsx finds that empty div and tells React to take control of it:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

createRoot creates a root, the place where React draws your app. .render(<App />) tells React what to draw there: your App component. StrictMode is a helper that runs extra checks while you develop, to warn you about common bugs. It has no effect in the final, published app.

src/App.jsx is where your own code goes. It exports a function called App, and whatever that function returns is what you see on the page.

You do not need to understand every line of main.jsx yet. You will write it once per project and then rarely look at it again.

Here is the same setup in a sandbox. The index.js tab plays the role of main.jsx. Change the text in App.js and watch it update.

Clean out the starterCopy Anchor Link

The starter page is nice, but you want a blank canvas for the Reading List. Make three changes:

1. Open src/App.jsx, delete everything, and replace it with:

   Copy Text

   export default function App() {
     return <h1>My Reading List</h1>
   }

2. Open src/App.css and delete everything in it, leaving an empty file.

3. Open src/index.css and delete everything in it too.

Save. The browser updates by itself, without a refresh, and shows a plain "My Reading List" heading. This instant update is called Hot Module Replacement (HMR).

Look inside with React DevToolsCopy Anchor Link

With your app open in the browser, open the browser's developer tools (F12, or Cmd + Option + I on macOS). Find the Components tab that React Developer Tools added. You may need to click the >> arrow to see it.

You should see a tree with a single entry: App. That is your component. As your app grows this week, this tree will grow with it, and it is one of the best ways to understand what React is doing.

export default function App() {
  return (
    <div>
      <h1>Ada's Reading List</h1>
      <p>Goal: 12 books this year</p>
    </div>
  )
}