1. Concept library
  2. Web Dev with React
  3. Module 1: JSX and components

Concept

Function components

A component is a function that takes props and returns JSX. React calls it whenever the props or its state change, so the function must describe the UI from its inputs and nothing else.

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

  1. Explain what a component is and what React does when its inputs change
  2. Write a function component that renders from its props
  3. Spot a component defined inside another and explain what it loses

In practice

A few lines that show Function components doing its job.

TSX
function Price({ cents, currency = "USD" }: { cents: number; currency?: string }) {
  const amount = (cents / 100).toLocaleString("en-US", {
    style: "currency",
    currency,
  });
  return <span className="price">{amount}</span>;
}

<Price cents={1999} />

The common mistake

Watch for

Defining a component inside another component's body. It is a new function on every render, so React unmounts and remounts it each time, losing its state and focus.

What to know first

Your roadmap puts these before Function components, unless you already know them.

How it stays learned

Once a session shows you understand Function components, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

  1. Day 3First recall, while it is fresh
  2. Day 7Second, a week on
  3. Day 18Last, when it has settled

Where it leads

Topics that build on Function components.

Previous in the module← JSX syntax