React Workshop Series

Day 1 — Components

Day 1 · Topic 7 of 15Teaching & theory

Foundations & build/Components

7

Components

Slide companion · 45–56

Your takeaway: Build a reusable React component, then recognise which tools come from Next.js.

The bubble tea theory

Why component? Think bubble tea

Imagine your shop sells three drinks: avocado, strawberry, and brown sugar. Every order needs the same cup, lid, straw, and recipe — plus one unique topping.

Traditional (vanilla HTML / CSS)

You copy the cup + lid + straw + recipe onto every page, then add avocado / strawberry / brown sugar.

Need a new cup cover? Edit the code on every page. Painful.

Component (React / Next.js)

You build the cup model once as a component. Reuse it everywhere.

Need a new cup model? Change the component once — every drink updates.

Facilitator noteShow note
Advice from us: stop rebuilding a brand-new cup from scratch every time. Make the template once. Reuse it. (Next section: how to pass different toppings with props.)

The bubble tea analogy

  • A component = the standard cup + lid + straw + recipe.
  • You make the template once. Every order uses the same template.
  • Stop building a brand new cup from scratch every time.

React component structure (bubble tea edition)

Create your custom component under src/components/:

3 things every component needs:

  1. A function with a Capital Letter name (the cup recipe name)
  2. A return statement (what you hand to the customer)
  3. JSX inside the return (how the drink looks)
src/components/BubbleTeaCup.jsx
1export default function BubbleTeaCup() {
2  return (
3    <div>
4      <p>Cup + lid + straw</p>
5      <h2>Milk Tea</h2>
6    </div>
7  );
8}

Cup, lid, and straw live inside the component. Want a new lid design? Edit this file once — every place that uses BubbleTeaCup updates.

Capital letter matters

<bubbleTeaCup /> looks like a normal HTML tag to React. <BubbleTeaCup /> is your custom cup component. Always start component names with a capital letter.

React components and Next.js features

Two are components you import. One is a special file that renders your own component.

You build it

Custom React component

ProfileCard and BubbleTeaCup are functions you create. Their capitalised names let React recognise them as components.

Next.js component

<Link>

Import it from next/link. It extends a normal anchor for fast navigation between your app's routes.

Next.js component

<Image />

Import it from next/image. It helps size and optimise an image while requiring useful accessibility information.

Next.js file convention

layout.js

This is not an imported built-in component. The file exports your layout component, which wraps pages with shared UI such as a navigation bar.

1. Link: move between pages

src/app/page.js
1import Link from "next/link";
2 
3export default function Home() {
4  return <Link href="/">Go to Home</Link>;
5}

The href says where to go. / is the home URL you already have. Next.js can prefetch linked routes in production and navigate without replacing the entire page.

2. Image: show a correctly sized image

Inside ProfileCard.js
1import Image from "next/image";
2 
3<Image
4  src="/alex.png"
5  alt="Alex's profile photo"
6  width={96}
7  height={96}
8/>

src selects the file, alt explains the image, and width plus height reserve its shape so the page does not jump while loading. You will use this in Hands-on #02.

3. layout.js: keep the navigation shared

Concept preview — src/app/layout.jsConcept only
1import Link from "next/link";
2 
3export default function RootLayout({ children }) {
4  return (
5    <html lang="en">
6      <body>
7        <nav>
8          <Link href="/">Home</Link>
9          <Link href="/about">About</Link>
10        </nav>
11        {children}
12      </body>
13    </html>
14  );
15}

{children} is the current page. The navigation sits outside it, so the same navbar wraps both Home and About. For today, understand the pattern—do not replace your generated root layout yet.

The important distinction

<Link> and <Image /> are built-in Next.js React components. layout.js is a special filename where you define a layout component.

Official references: Link, Image, and layout.js.

Checkpoint

Can you explain why building the cup once as a component beats copying HTML on every page? Next up: props — how to customise each order (and your profile card).

Planned break pointShow note
Pause here before Props. Ask everyone to save their files and keep the development terminal running. Helpers can use the pause to confirm that each student can still see the local page before the class continues.