Running a React Application

In the last lesson, Understanding React Project Structure, you saw what every file in a new React project is for. But a project sitting on your disk does nothing on its own, so now let’s run it and watch your changes show up in the browser.

🤔 Why You Need to Run the App

Here is the problem you hit right away:

• You wrote some code in src/App.jsx, but a .jsx file is just text on your computer.
• A browser cannot read that file directly, so there is no web page to look at yet.

The fix is a small program called a development server. Here is what it does for you:

• It takes your React code and turns it into something a browser understands.
• It serves that as a live web page on your own computer.
• You start it once, and it keeps running while you work.

When you created the project, the setup tool Vite gave you a few ready-made commands. Let’s go through the ones you will use every single day.

🚀 Starting the Development Server

The command to start working is npm run dev. Run it from inside your project folder.

npm run dev

This starts the development server. After a second or two, you will see something like this in your terminal.

  VITE v5.4.0  ready in 412 ms

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

The important line is Local: http://localhost:5173/. That is the address of your running app. Let’s break down what that address means:

• localhost means this computer. So the app is running on your own machine, not on the internet, and nobody else can see it yet.
• 5173 is the port. A port is just a numbered door on your computer that a program listens on, and Vite uses door number 5173 by default.

So open your browser and go to http://localhost:5173. You will see the starter React page. That is your app, live.

🔥 Seeing Your Changes Instantly with Fast Refresh

Now the best part. With the server still running, let’s change the app and watch what happens.

Open src/App.jsx in your editor. Find the heading text and change it.

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

export default App;

Save the file, then look at your browser:

• You did not refresh the page, and you did not even touch the browser.
• But the heading already changed to your new text.

That is Fast Refresh. Here is the idea:

• It is React’s feature that watches your files for changes.
• The moment you save one, it updates only the part of the page that changed.
• The rest of the page stays exactly as it was.

Why does that matter? The old way meant saving a file, switching to the browser, and hitting refresh every single time. Fast Refresh removes all of that:

• You save, and the screen updates in a fraction of a second.
• It keeps your app’s current state where it can. So if you typed text into a box, that text often stays after the update.
• You stay in the editor and just keep coding, with no clicking back and forth.

📦 Building for Production

npm run dev is for you, while you build the app:

• It is fast to update but not optimized.
• It only runs on your machine.

So when the app is finished and you want to put it on the real internet for other people, you need a different command. That command is npm run build.

npm run build

Here is what this command does:

• It takes all your code and prepares an optimized version that loads fast for real users.
• It does work like shrinking the files and removing anything unused.

When it finishes, you will see output like this.

vite v5.4.0 building for production...
✓ 34 modules transformed.
dist/index.html                   0.46 kB
dist/assets/index-a1b2c3d4.css    1.39 kB
dist/assets/index-e5f6g7h8.js   143.21 kB
✓ built in 1.84s

Notice the new dist folder. Here is what it is:

• The dist folder (short for distribution) is the finished, ready-to-ship version of your app.
• These are the files you upload to a hosting service like Netlify or Vercel to put your site online.

👀 Previewing the Production Build

There is one more command that pairs with build. After you run npm run build, you can test that finished version on your own machine first with npm run preview.

npm run preview

This starts a small server that serves the real files from your dist folder, just like a hosting service would.

  ➜  Local:   http://localhost:4173/
  ➜  Network: use --host to expose

Open that address and here is what you get:

• You are looking at the exact build your users will get.
• It is a good habit to preview the build before you ship it, just to be sure the optimized version still works the way you expect.

Here is a quick map of the commands so you can keep them straight.

🪜 The Everyday Workflow

Put together, here is what running and editing a React app looks like in practice.

⚠️ Common Mistakes

A few things trip people up the first time they run an app.

• Closing the terminal and wondering why the page broke. The terminal running npm run dev is the server. Close it and the page at localhost:5173 stops responding. Leave it open while you work.
• Running the command in the wrong folder. npm run dev only works inside your project folder, the one with package.json. If you run it somewhere else, you get an error. Move into the right folder first.
• Refreshing the browser by habit. You do not need to. Fast Refresh already updated the page when you saved. A manual refresh is harmless, but it is wasted effort.
• Thinking npm run build is for daily coding. It is not. The dist folder does not update when you save a file. Use npm run dev while building, and npm run build only when you are ready to ship.

❌ Running in the wrong place:

# You are in your home folder, not the project
npm run dev
# npm errors here — there is no project in this folder

✅ Move into the project first, then run it:

cd my-react-app
npm run dev

✅ Best Practices

• Keep the npm run dev terminal open in one window and your editor in another. Save in the editor, glance at the browser. That loop is the whole rhythm of React work.
• Bookmark http://localhost:5173 so you can jump back to your running app fast.
• If localhost:5173 ever looks empty or stuck, check the terminal first. Errors in your code show up there in plain text.
• Run npm run build, then npm run preview, before you put a site online. Test the real version, not just the dev version.

🧩 What You’ve Learned

A quick recap of what you can now do.

• ✅ Start a React app with npm run dev and open it at http://localhost:5173.
• ✅ Understand that localhost means your own computer and 5173 is the port the server listens on.
• ✅ Edit src/App.jsx, save, and see the change instantly thanks to Fast Refresh, with no manual page refresh.
• ✅ Create an optimized production version with npm run build, which makes the dist folder.
• ✅ Test that production build locally with npm run preview before shipping.

🚀 What’s Next?

You can now run your app and watch your edits appear live. That means it is finally time to learn the language you will write inside those components, the special syntax that makes React feel like writing HTML in JavaScript.

Introduction to JSX