Thinking in Components

Open any app you use daily — Shopee, Grab, WhatsApp. Squint at the screen and you'll notice it's made of boxes: a top bar, a search box, a list, and inside the list the same card repeated again and again. React asks you to give each of those boxes a name and build it once. Those named boxes are components.

Component

A JavaScript function that returns a piece of UI (written in JSX). Its name starts with a capital letter, e.g. Header.

JSX

The HTML-like syntax inside React code, such as <h1>Hello</h1>. It's really JavaScript — lesson 3 shows exactly how.

Render

Using a component, written like a tag: <Header />. React calls your function and puts what it returns on the page.

Component tree

Components render other components, so an app forms a tree. App sits at the top (the root).

From a design to a tree

Here's how a small shop page might be split. Every line is a component; indentation shows who renders whom.

App
├── Header
├── Specials
├── Menu
│   ├── MenuItem   (Nasi lemak)
│   ├── MenuItem   (Mee goreng)
│   └── MenuItem   (Teh tarik)
└── Footer

• One job each. If you can describe a box in a few words ("the opening hours footer"), it's a good component. If you need "and… and…", split it.
• Repeated? Build it once. The same card shown 20 times is one component used 20 times. Fix a bug once, and it's fixed everywhere.
• Name it like the design team would. Header, ProductCard, CheckoutButton — names make the code read like the screen.

What a component looks like

A component is just a function that returns JSX. To use it, write its name like a tag. Moving markup into a component doesn't change what's on the screen — it changes how organised your code is.

export default function App() {
  return (
    <div className="page">
      <header className="header">
        <h1>Warung Kak Ani</h1>
      </header>
      <footer className="footer">
        <p>Open daily, 7am – 2pm</p>
      </footer>
    </div>
  );
}

function Header() {
  return (
    <header className="header">
      <h1>Warung Kak Ani</h1>
    </header>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <p>Open daily, 7am – 2pm</p>
    </footer>
  );
}

export default function App() {
  return (
    <div className="page">
      <Header />
      <Footer />
    </div>
  );
}