React Workshop Series

Day 1 — Clean Up

Day 1 · Topic 10 of 15Hands-on practice

Foundations & build/Clean Up

00

Hands-on #00 — Clean Up Before Build

Hands-on #00

Clean Up Before Build

Delete the boilerplate and make room for your code.

The default Next.js screen is the boilerplate. It proves your install worked — now we delete it.

Exercise

  1. Open src/app/page.js and delete EVERYTHING.
  2. Write the code below (copy → paste into VS Code):
src/app/page.js
1export default function Home() {
2  return (
3    <main className="min-h-screen bg-gray-100 p-8 text-gray-900">
4      <h1>My Workspace</h1>
5    </main>
6  );
7}
  1. Open http://localhost:3000/ and confirm that My Workspace appears.

Done when

http://localhost:3000/ shows My Workspace and the terminal has no red error message.