React Workshop Series

Day 1 · Topic 5 of 15Teaching & theory

Foundations & build/Build, Run & Fast Refresh

Build & Test — Your Local Dev Loop

Slide companion · 69–71 · moved after File Structure

Your takeaway: Start the local development server, edit and save safely, and know when to use dev, build, or start.

You have found the important files. Now we need a way to see what those files produce. During development, Next.js runs a small web server on your own laptop and watches your code for saved changes.

Edit in VS Code

Save the file

See the browser update

Start the development server

1. Open a terminal inside your project folder
The terminal path should end with my-profile-card.
2. Run the project's development script
Terminal
```
1npm run dev
```
npm reads the dev script in package.json. In a Next.js project, that starts next dev (using Turbopack by default in Next.js 16).
3. Open the Local address printed in the terminal
It is usually http://localhost:3000. Use the exact address shown on your screen if Next.js chooses another port.

What does localhost mean?

localhost means “this computer.” The page is running on your laptop for testing; classmates cannot visit it over the public internet. Deployment comes later.

Keep that terminal open

The development server is the running terminal process. Closing its window or pressing Ctrl + C stops the server, so the local page will stop responding. Open another terminal tab if you need to type unrelated commands.

Save → Fast Refresh → updated page

The slides call this “hot reload.” In Next.js, the feature you will see is called Fast Refresh. Change JSX or styling in src/app/page.js, then save with Cmd + S on Mac or Ctrl + S on Windows. Most edits appear quickly without you pressing the browser refresh button.

Development loop

See edit → save → Fast Refresh → browser

When npm run dev is running, Next.js watches your project. Edit the heading and save it to see the same feedback loop you use while building.

Edit
Change the JSX in page.js
Save
Save the file in your editor
Fast Refresh
The Next.js dev server processes the edit
Browser
React renders the updated screen

src/app/page.jsSaved

export default function Home() {
  return (
    <h1>Welcome to my profile</h1>
  )
}

Edit the heading text

Enter plain heading text, then press Enter or select Save file. JSX symbols are ignored, and this simulation does not edit your real project.

localhost:3000

Browser preview

Welcome to my profile

The browser and saved file match.

Change the heading, then save the file to start the simulation.

Fast Refresh usually preserves temporary state in function components, but some edits require a full reload or reset state. It is a development feature, not the production build.

Usually

Your edit updates in place

Fast Refresh re-renders the affected React component. When it is safe, it can also preserve temporary state while you edit.

Sometimes

A full reload is needed

Some changes cross the React boundary or require a restart. The page may reload and temporary state may reset; that does not mean your saved code disappeared.

An error screen is feedback, not disaster

A missing bracket or tag can show a red error overlay. Read the file and line shown, fix the code, and save again. Next.js normally clears the overlay after the problem is fixed.

Development and production are different jobs

When to use npm run dev, npm run build, and npm run start
Command	Job	Use it when…
npm run dev	Runs the development server	You are coding and want Fast Refresh and helpful errors
npm run build	Creates an optimised production build, then finishes	You want to check and prepare the app for production
npm run start	Serves a production build made by `build`	You are testing or hosting that completed production build

None of these commands publishes the app to the internet by itself. For today's edit-and-check loop, stay with npm run dev.

Room check for 50 learnersShow note

Ask everyone to hold up a hand only after their local page and terminal are both visible. With 10 helpers, give each helper one cluster of about five students. Check the project-folder path first, then the terminal error, before changing any code.

Checkpoint — make one visible change

Keep the development terminal running.
Change one heading inside src/app/page.js.
Save and point to the updated text in your browser.

Day 1 — Build, Run & Fast Refresh