Build interactive interfaces with React components, props, state, effects, context, routing and component tests.

React Fundamentals

## Why it matters

Almost every job ad for a front-end, UI or mobile developer mentions React. It is a JavaScript library for building user interfaces, created at Facebook (now Meta) and open source since 2013. React Native uses the same ideas to build iOS and Android apps, and frameworks such as Next.js are built on top of it. Learning React well means learning a way of thinking about interfaces that carries over to most modern UI tools.

## The problem React solves

With plain JavaScript you change the page step by step. Suppose a shopping page shows a cart count and a list of items. When the user adds an item you must remember every place that depends on the cart:

```javascript
// Imperative: describe HOW to change the page
cart.push(item);
document.querySelector("#cart-count").textContent = cart.length;
const li = document.createElement("li");
li.textContent = item.name;
document.querySelector("#cart-list").appendChild(li);
if (cart.length === 1) {
  document.querySelector("#empty-message").remove();
}
```

Each new feature adds more of these manual updates, and it is easy to forget one. The page and your data drift out of sync, and bugs appear such as a counter that says 3 while the list shows 2 items.

## Declarative UI

React flips the approach. You describe **what** the screen should look like for a given piece of data, and React works out the DOM changes for you:

```jsx
// Declarative: describe WHAT the page looks like for this data
function Cart({ items }) {
  if (items.length === 0) {
    return <p>Your cart is empty.</p>;
  }
  return (
    <section>
      <h2>Cart ({items.length})</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </section>
  );
}
```

When `items` changes, React calls `Cart` again, compares the new result with the previous one, and updates only the parts of the real page that differ. You never write "remove the empty message" by hand: an empty cart simply returns a different description.

A useful way to say this is **UI = f(data)**: the interface is a function of your data. If the data is right, the screen is right.

## Components

The second big idea is the **component**: a reusable piece of UI written as a JavaScript function that returns markup. A page is a tree of components:

```text
App
├── Header
│   └── SearchBox
├── ProductList
│   ├── ProductCard
│   └── ProductCard
└── Cart
```

Each component owns one job, can be tested on its own, and can be reused. `ProductCard` might appear on the home page, in search results and in a "recently viewed" strip, written once. Components receive inputs called **props** (lesson 3) and can remember values over time with **state** (module 2).

## What React is and is not

- React is a **library** for the view layer. It does not include routing, data fetching or a build tool. Those come from other packages or from a framework such as Next.js or React Router (module 4).
- The markup-like syntax is **JSX**. It compiles to plain JavaScript function calls (next lesson). Browsers do not understand JSX directly, so real projects use a build tool such as Vite to compile it.
- React updates the page through **react-dom** on the web and through **react-native** on phones. The component code looks almost the same in both.

## How a React app starts

Every React web app has one entry point that connects React to a real DOM element:

```jsx
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
```

From then on React owns everything inside `#root`. You do not reach in with `document.querySelector` to change it. You change data, and React re-renders.

In this course the exercises run in your browser: each one loads React, ReactDOM and Babel (which compiles JSX on the fly) from a CDN. That is fine for learning but slow for production, where you compile ahead of time with a tool such as Vite or a framework such as Next.js.

## Common misunderstandings

- **"React makes pages fast automatically."** React makes UI code easier to keep correct. Performance still depends on what you render and how much data you load.
- **"I must use classes."** Older code uses `class` components. Modern React uses function components with hooks such as `useState`, which is what this course teaches. You will still meet class components in older codebases.
- **"I can mix React and direct DOM edits freely."** Editing React-owned DOM by hand gets overwritten on the next render. Change the data instead.

## Recap

- Imperative code says how to change the page; declarative React code says what the page should be for the current data.
- UI = f(data): React re-runs your components when data changes and applies the minimum DOM updates.
- Apps are trees of small, reusable components that take props and may hold state.
- React is a view library; routing, data fetching and builds come from tools around it.

## Try it

Open the Do tab and answer the quiz to check you can tell declarative from imperative code.


See how declarative components keep the screen in sync with your data, and how React apps are built from them.

Why components

React in 100 Seconds

What Is React And Why You Need To Know It

## Why it matters

JSX is the syntax you will write in every React component. It looks like HTML, but it is JavaScript underneath, and a few rules follow from that. Most React beginner bugs, such as a missing `key`, `class` instead of `className` or a stray object in the markup, come from not knowing what JSX really is.

## JSX is JavaScript

This line:

```jsx
const heading = <h1 className="title">Hello, {name}!</h1>;
```

is compiled (by Babel or a similar tool) into a plain function call:

```javascript
const heading = React.createElement("h1", { className: "title" }, "Hello, ", name, "!");
```

The result is a **React element**: a small object describing what to show, not a real DOM node. React later turns the tree of elements into DOM. Because JSX is an expression, you can store it in variables, return it from functions and put it in arrays.

## The rules that follow

1. **One parent.** A component returns one element. Wrap siblings in a `<div>` or an empty **fragment** `<>...</>` that adds nothing to the page.
2. **Close every tag.** `<img />`, `<br />`, `<input />`.
3. **camelCase attributes.** `className` (not `class`), `htmlFor` (not `for`), `onClick`, `tabIndex`. Inline styles take an object: `style={{ color: "red" }}`.
4. **Curly braces hold JavaScript expressions.** `{user.name}`, `{price * 2}`, `{formatDate(d)}`. Statements such as `if` or `for` cannot go inside braces.
5. **Component names start with a capital letter.** `<BookList />` is your component; `<booklist />` would be treated as an unknown HTML tag.

## Conditional rendering

Since you cannot put `if` inside JSX, use plain JavaScript around it or an expression inside it:

```jsx
function Status({ online }) {
  if (!online) {
    return <p>Offline</p>; // early return
  }
  return <p>Online</p>;
}

// Inside JSX:
<p>{count > 0 ? `${count} new messages` : "No new messages"}</p>
{isAdmin && <button>Delete</button>}
```

Careful with `&&` and numbers: `{items.length && <List />}` renders a literal `0` when the list is empty. Write `{items.length > 0 && <List />}`.

React renders strings and numbers. It skips `null`, `undefined`, `true` and `false`, which is why `&&` works. It throws an error if you try to render a plain object such as `{user}`; render `{user.name}` instead.

## Turning data into elements

Real interfaces are mostly lists: products, messages, search results. You turn an array of data into an array of elements with `map`:

```jsx
const books = [
  { id: 1, title: "Dune", author: "Frank Herbert" },
  { id: 2, title: "Kindred", author: "Octavia E. Butler" },
];

function BookList({ books }) {
  return (
    <ul>
      {books.map((book) => (
        <li key={book.id}>
          <strong>{book.title}</strong> by {book.author}
        </li>
      ))}
    </ul>
  );
}
```

`{ books }` in the parameter list reads the `books` value passed in as `<BookList books={books} />`. That is a prop, covered fully in the next lesson.

You can also `filter` or `sort` first. Use a copy before sorting, because `sort` changes the array in place: `[...books].sort(...)`.

## Keys

Each item in a list needs a `key`: a string or number that is **unique among its siblings** and **stable** over time. React uses keys to match items between renders, so when you insert, delete or reorder items it can keep each item's DOM and state attached to the right data.

- Good keys: database IDs, slugs, anything that belongs to the item.
- Risky keys: the array index. If the list is reordered or filtered, index 0 now points at different data, and inputs or animations can attach to the wrong row. Index keys are acceptable only for static lists that never change order.
- Never generate keys during render with `Math.random()`: every render gets new keys, so React rebuilds every item.

The `key` goes on the outermost element returned from `map`, not on something inside it. React warns in the console ("Each child in a list should have a unique key prop") when one is missing.

## Common mistakes

- Returning two sibling elements without a wrapper or fragment.
- Writing `class=` or `for=`; React warns and you should use `className` and `htmlFor`.
- Forgetting to `return` inside a `map` callback with curly braces: `books.map((b) => { <li>{b.title}</li> })` returns `undefined`. Use parentheses or an explicit `return`.
- Putting the key on an inner element instead of the one `map` returns.

## Recap

- JSX compiles to `React.createElement` calls that create element objects.
- Use `{}` for expressions, `className`, closed tags and one root element (or a fragment).
- Use early returns, `? :` and `&&` for conditions.
- Use `map` to turn arrays into elements, with a stable, unique `key` on each item.

## Try it

Open the Do tab. You will finish a `BookList` component that turns an array of books into list items with keys, and shows a message when the array is empty.


Write JSX, render conditionally, and turn arrays of data into lists of elements with stable keys.

JSX and rendering

ReactJS Tutorial - 8 - JSX

React 19 Tutorial - 11 - Rendering Lists

## Why it matters

Components become useful when you can reuse them with different data. **Props** are how a parent passes data into a child, and **composition** is how you build big screens out of small, focused components instead of one huge file. Good prop design is what makes a component library such as a design system pleasant to use.

## Props are function arguments

A component is a function. Its first argument is an object holding every attribute you wrote on the JSX tag:

```jsx
function Greeting(props) {
  return <p>Hello, {props.name}! You have {props.count} messages.</p>;
}

<Greeting name="Ada" count={3} />
```

Strings can be written in quotes; anything else (numbers, booleans, arrays, objects, functions) goes in braces. Most code destructures the props object in the parameter list, often with **default values**:

```jsx
function Greeting({ name, count = 0 }) {
  return <p>Hello, {name}! You have {count} messages.</p>;
}
```

A prop written with no value, such as `<Button disabled />`, is `true`.

## Props are read-only

A component must never change its props. `props.count = 5` is a bug: the data belongs to the parent. If something needs to change over time, it becomes **state** (next module), usually in the parent, which then passes new props down. Data flows one way: from parent to child.

React components should also be **pure** with respect to their props: given the same props, return the same output, with no side effects during rendering. That predictability is what lets React re-render safely whenever it needs to.

## Passing functions as props

Children communicate back up by calling functions the parent passed in:

```jsx
function LikeButton({ liked, onToggle }) {
  return <button onClick={onToggle}>{liked ? "Unlike" : "Like"}</button>;
}

// In the parent:
<LikeButton liked={isLiked} onToggle={() => setIsLiked(!isLiked)} />
```

By convention, event-handler props are named `onSomething`, and the functions that handle them in the parent are named `handleSomething`.

## Children and composition

Whatever you put **between** a component's opening and closing tags arrives as the special `children` prop:

```jsx
function Card({ title, children }) {
  return (
    <section className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </section>
  );
}

<Card title="Ada Lovelace">
  <p>Wrote the first published computer program.</p>
  <Badge label="Pioneer" />
</Card>
```

`Card` does not need to know what is inside it. It provides the frame (border, heading, spacing), and the caller decides the content. This is **composition**: combining general-purpose containers with specific content. It is React's main tool for reuse, preferred over inheritance.

You can also pass elements in named props when a component has more than one "slot":

```jsx
<Card title="Profile" footer={<a href="/edit">Edit profile</a>}>
  ...
</Card>
```

## Optional pieces

Render optional parts only when a prop is present:

```jsx
function Card({ title, children, footer }) {
  return (
    <section className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
      {footer && <footer>{footer}</footer>}
    </section>
  );
}
```

## Building class names from props

Variants such as size or colour are usually props that choose a CSS class:

```jsx
function Badge({ label, tone = "info" }) {
  return <span className={"badge badge-" + tone}>{label}</span>;
}

<Badge label="Overdue" tone="warning" />
```

Keep the number of variant props small and their allowed values clear. A component with fifteen boolean props is a sign it should be split.

## Prop drilling

When data must pass through several components that do not use it, just to reach a deep child, that is **prop drilling**. A little is normal and easy to follow. When it gets painful, composition (passing `children` so the deep child is created higher up) or context (module 3) can help.

## Common mistakes

- Changing a prop inside the child instead of asking the parent to change it.
- Writing `count="3"` (a string) when you mean the number `count={3}`.
- Calling the handler during render: `onClick={onToggle()}` runs immediately. Pass the function: `onClick={onToggle}`.
- Spreading every prop onto a DOM element (`<div {...props}>`) and leaking unknown attributes onto the page.

## Recap

- Props are the object of attributes passed to a component; destructure them and give defaults.
- Props are read-only and flow from parent to child; children talk back by calling function props.
- `children` lets a component wrap any content; composition beats huge, all-knowing components.
- Use props to choose variants, and render optional parts only when their prop exists.

## Try it

Open the Do tab to build a `Card` with a title, children and an optional footer, plus a `Badge` with a default tone, then compose them.


Pass data into components with props, wrap content with children, and compose small components into screens.

Props and composition

React 19 Tutorial - 8 - Props

React 19 Tutorial - 9 - Props Patterns

See why React describes the UI declaratively, write JSX that turns data into elements, and compose reusable components with props and children.