Creating Your First React App

Introduction

With Node.js, npm, and your editor ready, it is time to create an actual React project. Rather than assembling a build configuration by hand, you will use Vite's official scaffolding tool, which generates a fully working project in seconds.

This lesson walks through the entire process end to end: creating the project, installing its dependencies, starting the development server, viewing the app in your browser, and finally making a small change to watch React's Hot Module Replacement update the page instantly, without a full reload.

Creating a New Project with Vite

Open your terminal, navigate to the folder where you keep your projects, and run Vite's scaffolding command. The extra "--" separates arguments meant for npm from arguments meant for the Vite scaffolder itself.

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

Scaffolding project in ./my-app...

Done. Now run:

  cd my-app
  npm install
  npm run dev

Here, "my-app" is the folder name for your new project — feel free to name it anything. The "--template react" flag tells Vite to scaffold a plain JavaScript + JSX React project rather than one of its other templates (like Vue or Svelte).

Installing Dependencies

The scaffolded project lists its required packages — React, ReactDOM, and Vite itself — in package.json, but they are not downloaded yet. Move into the new folder and run npm install to download them into a local node_modules folder.

cd my-app
npm install

added 150 packages in 8s

Running the Development Server

With dependencies installed, start Vite's local development server. It compiles your code, serves it over HTTP, and watches your files for changes.

npm run dev

VITE v5.2.0  ready in 320 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

The terminal now shows a Local URL — this is your app, running on your own machine. Leave this terminal window open; the server keeps running (and watching for changes) until you stop it with Ctrl+C.

Opening the App in Your Browser

Open your browser and visit the Local address shown in the terminal, typically http://localhost:5173/. You should see the default Vite + React starter page: the Vite and React logos, a counter button, and some starter text.

Making an Edit & Hot Module Replacement

Open src/App.jsx in your editor and change some visible text — for example, the heading. Save the file, then look back at the browser without refreshing it.

function App() {
  return (
    <div>
      <h1>Vite + React</h1>
    </div>
  );
}

export default App;

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

export default App;

Hello, my first React app!

The heading updates almost instantly, and if the counter had a value, it would still be there — the page was not reloaded. This is Hot Module Replacement (HMR): Vite sends only the changed module to the browser and React swaps it in, preserving the app's current state.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

You now have a real, running React application on your machine, created with three commands and viewable in your browser. More importantly, you have seen the core development loop you will use for the rest of this course: edit a file, save it, and watch the browser update instantly.

In this lesson, you scaffolded a project with npm create vite@latest, installed its dependencies, started the dev server, and watched Hot Module Replacement in action. Next, you will take a closer look at exactly what Vite generated, file by file.