React

A JavaScript library for building user interfaces out of reusable pieces called components — each piece manages its own appearance and behaviour.

What is React?

When you build a web page with plain html, css, and javascript, every piece of the page is tangled together. If you want a button that appears in three places, you write the same code three times. If you change how it looks, you change it in three places. Things break.

React solves this by letting you build your interface out of components — self-contained blocks that each know how to display themselves and respond to user actions.¹ You build small components (a button, an input field), compose them into bigger ones (a form, a navigation bar), and compose those into full pages.

React was created by Facebook (now Meta) in 2013 and is the most widely used frontend library in the world. Instagram, Netflix, Airbnb, and Spotify all use it.²

In plain terms

React is like a box of custom LEGO bricks. Each brick (component) has a specific shape and colour. You snap bricks together to build whatever you want. If you need to change a brick, you change it once — and everywhere that brick appears updates automatically. You never have to hunt through your build to find every instance.

At a glance

How React builds a page (click to expand)
graph TD
    APP[App] --> NAV[NavBar]
    APP --> MAIN[MainContent]
    APP --> FOOT[Footer]
    NAV --> LOGO[Logo]
    NAV --> MENU[Menu]
    MAIN --> CARD1[Card]
    MAIN --> CARD2[Card]
    MAIN --> CARD3[Card]
    CARD1 --> BTN1[Button]
    CARD2 --> BTN2[Button]
    CARD3 --> BTN3[Button]

    style APP fill:#4a9ede,color:#fff
A page is a tree of components. The App at the top contains everything. Each level is made of smaller, reusable pieces. The same Card and Button components are used three times — written once, reused everywhere.

How does React work?

1. Components

A component is a function that returns what should appear on screen. It’s the fundamental building block of every React application.¹

function Welcome() {
  return <h1>Hello, world</h1>
}

That’s a complete React component. It’s a JavaScript function that returns something that looks like HTML. You can use it anywhere in your app by writing <Welcome />.

Components can contain other components:

function App() {
  return (
    <div>
      <Welcome />
      <Welcome />
      <Welcome />
    </div>
  )
}

This renders “Hello, world” three times. Change the Welcome component once, and all three instances update.

Think of it like...

A rubber stamp. You design the stamp once (the component), then press it anywhere you need that pattern. Modify the stamp, and every future impression changes with it.

Concept to explore

See react-components for class vs function components, composition patterns, and when to split components.

2. JSX

JSX is React’s syntax for describing what the UI should look like. It looks like HTML, but it lives inside JavaScript.¹

function Greeting({ name }) {
  return (
    <div className="card">
      <h2>Hello, {name}</h2>
      <p>Today is {new Date().toLocaleDateString()}</p>
    </div>
  )
}

The curly braces {} are the bridge between HTML structure and JavaScript logic. Anything inside {} is evaluated as JavaScript — a variable, a calculation, a function call.

The key distinction

JSX is not HTML. It’s a syntax extension that gets compiled into JavaScript function calls. It uses className instead of class, htmlFor instead of for, and must always have a single root element. These are small differences, but they trip up beginners.

Concept to explore

See jsx for the full rules, conditional rendering, and how JSX compiles to JavaScript.

3. Props

Props (short for properties) are how you pass data from a parent component to a child. They flow in one direction: down the tree.¹

function UserCard({ name, role }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{role}</p>
    </div>
  )
}
 
// Usage:
<UserCard name="Damian" role="Architect" />
<UserCard name="Claude" role="Builder" />

The same UserCard component renders differently depending on what props it receives. The component doesn’t know or care where the data comes from — it just displays what it’s given.

Think of it like...

A form letter with blanks. The template (component) is the same, but the blanks (props) get filled in differently for each recipient. “Dear {name}, your role is {role}.”

Concept to explore

See props for default values, prop types, children props, and the one-way data flow rule.

4. State

State is data that changes over time within a component. When state changes, React automatically re-renders the component to reflect the new data.¹

import { useState } from 'react'
 
function Counter() {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Add one
      </button>
    </div>
  )
}

useState(0) creates a piece of state starting at 0. setCount is the function that updates it. When you click the button, setCount runs, the count value changes, and React re-renders the component with the new number.

Props vs State

Props come from outside (parent passes them down) and the component cannot change them. State lives inside a component and the component can update it.

Props are like the settings on a microwave (set by the user). State is like the timer counting down (managed internally).

Concept to explore

See state for how state triggers re-renders, lifting state up, and managing complex state.

5. Hooks

Hooks are special functions that let components use React features like state and lifecycle behaviour. The two most common are useState (above) and useEffect.³

import { useState, useEffect } from 'react'
 
function UserProfile({ userId }) {
  const [user, setUser] = useState(null)
 
  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data))
  }, [userId])
 
  if (!user) return <p>Loading...</p>
  return <h2>{user.name}</h2>
}

useEffect runs side effects — things that happen outside of rendering, like fetching data, setting up timers, or interacting with browser APIs. The [userId] at the end means “re-run this effect whenever userId changes.”

Think of it like...

Hooks are power outlets built into the wall of a room (component). Each outlet gives you access to a different capability: useState plugs you into memory, useEffect plugs you into timing and external data, useContext plugs you into shared data from a parent room. You can’t use these capabilities without plugging in.

Concept to explore

See react-hooks for the full hook catalogue, rules of hooks, and custom hooks.

6. The Virtual DOM

When state or props change, React doesn’t update the entire page. It maintains a virtual copy of the page structure in memory, compares the old version with the new one, and updates only the parts that actually changed.⁴

graph LR
    SC[State changes] --> VD[Virtual DOM updates]
    VD --> DIFF[React compares old vs new]
    DIFF --> PATCH[Only changed parts update]
    PATCH --> REAL[Real page reflects changes]

    style DIFF fill:#4a9ede,color:#fff

This is why React is fast. Instead of rebuilding the whole page on every interaction, it surgically updates the minimum necessary.

Think of it like...

Editing a document. Instead of reprinting the entire book every time you fix a typo, you print just the corrected page and slip it in. The virtual DOM is the draft where you mark your edits; the real DOM is the printed book.

Concept to explore

See virtual-dom for reconciliation, keys, and why list rendering needs unique identifiers.

Why do we use React?

Five reasons

1. Reusability. Build a component once, use it everywhere. Change it in one place, every instance updates.¹

2. Predictability. Data flows in one direction (parent → child). When something looks wrong, you can trace where the data came from by following the tree upward.

3. Ecosystem. Thousands of open-source libraries, tools, and frameworks (nextjs, Remix, Gatsby) are built on React.

4. Performance. The virtual DOM means React only touches the parts of the page that need updating — not the whole thing.⁴

5. Employability. React is the most requested frontend skill in job listings. Learning it opens doors across the entire web development industry.²

When do we use React?

When you’re building an interactive web application with dynamic content (dashboards, social feeds, forms)
When your interface has repeating patterns (cards, lists, tables) that benefit from reusable components
When you need a single-page application (SPA) that updates without full page reloads
When you want access to a large ecosystem of libraries and tools

Rule of thumb

If your page mostly displays static text with minimal interaction, plain HTML/CSS may be enough. If users are clicking, typing, filtering, and seeing real-time updates — React is the right tool.

How can I think about React?

The component workshop

Imagine a workshop where you build furniture. Each piece of furniture (a chair, a table, a shelf) is a component. Some pieces are simple (a wooden leg), some are composed of simpler parts (a table = legs + top).

Props are the customer’s order: “Make the table 120cm wide, in oak.” State is the workshop’s internal tracking: “This table is 60% assembled.” The customer can’t reach in and change the assembly progress, but they set the specifications.

When the order changes, the workshop tears down the relevant parts and rebuilds with the new specs — but leaves everything else in the showroom untouched. That’s the Virtual DOM.

The orchestra

An orchestra is a React application. Each musician is a component — self-contained, knowing their own part. Props are the sheet music handed down by the conductor (parent). State is each musician’s current position in the piece (which bar they’re on). Hooks are the musician’s abilities — reading the score (useState), listening for cues from other sections (useEffect), following the conductor’s tempo (useContext).

When the conductor signals a tempo change, every musician doesn’t restart from the beginning — they adjust from where they are. That’s the virtual DOM: only the changed parts update.

Concepts to explore next

Concept	What it covers	Status
jsx	React’s HTML-like syntax that lives inside JavaScript	stub
react-components	Function vs class components, composition, splitting	stub
props	Passing data down the tree, children, defaults	stub
state	Managing changing data, re-renders, lifting state	stub
react-hooks	useState, useEffect, useContext, custom hooks	stub
virtual-dom	Reconciliation, diffing, keys, performance	stub

Some of these cards don't exist yet

They’ll be created as the knowledge system grows. A broken link is a placeholder for future learning, not an error.

Check your understanding

Test yourself (click to expand)

Explain what React is to someone who knows HTML and CSS but has never used a framework. Why would they use it?

Distinguish between props and state. Give an example of each in a real component.

Name the five core concepts of React covered in this card and describe how they relate to each other.

Interpret this scenario: a developer builds a to-do list where checking off an item causes the entire page to flicker and reload. What is likely missing from their approach?

Connect React to separation-of-concerns. How do components embody this principle?

Where this concept fits

Position in the knowledge graph
graph TD
    SD[Software Development] --> CSM[Client-Server Model]
    CSM --> FE[Frontend]
    FE --> REACT[React]
    FE --> HTML[HTML]
    FE --> CSS[CSS]
    FE --> JS[JavaScript]
    FE --> NX[Next.js]
    REACT --> JSX[JSX]
    REACT --> COMP[Components]
    REACT --> PROPS[Props]
    REACT --> STATE[State]
    REACT --> HOOKS[Hooks]
    REACT --> VDOM[Virtual DOM]
    NX -.->|built on| REACT
    style REACT fill:#4a9ede,color:#fff
Related concepts:

nextjs — a framework built on React that adds routing, server rendering, and full-stack capabilities

separation-of-concerns — components are separation of concerns applied to UI: each piece owns its own logic and appearance

abstraction-layers — React components are abstractions over raw DOM manipulation

Yiuno

Explorer

React

React

What is React?

At a glance

How does React work?

1. Components

2. JSX

3. Props

4. State

5. Hooks

6. The Virtual DOM

Why do we use React?

When do we use React?

How can I think about React?

Concepts to explore next

Check your understanding

Where this concept fits

Sources

Further reading

Graph View

Table of Contents

Yiuno

Explorer

React

React

What is React?

At a glance

How does React work?

1. Components

2. JSX

3. Props

4. State

5. Hooks

6. The Virtual DOM

Why do we use React?

When do we use React?

How can I think about React?

Concepts to explore next

Check your understanding

Where this concept fits

Sources

Further reading

Footnotes

Graph View

Table of Contents