Components & JSX
The problem
Building a UI directly with imperative DOM calls (createElement, appendChild) for anything nontrivial becomes unmanageable fast — components let you describe what a piece of UI should look like as a reusable function, instead of a manual sequence of DOM mutation steps.
Why now
Functions and scope already established the reusable, callable unit of logic; the DOM as a tree already established what's being built. A React component is those two ideas fused — a function that returns a description of DOM tree structure — and JSX is the syntax that makes writing that description look like the HTML it produces.
Mental model
A component is a function from data to a description of UI — call it, get back a tree description, not the real DOM yet. JSX is not HTML; it's syntax sugar that compiles to plain function calls (createElement(...)) building that description — which is why JSX expressions can embed real JavaScript freely, they're just function arguments.
Requires
- Functions & ScopeProgramming Fundamentals
A component is, at its core, a JavaScript function — its parameters, return value, and local scope all follow the exact rules functions-and-scope already established.
- The DOM as a TreeBrowser Internals
What a component's JSX describes is a subtree of DOM structure; you need the DOM's tree shape already in mind to understand what a component is ultimately producing a description of.
Unlocks
Used in
- Every React application, from the smallest component to entire pages
- Component libraries (design systems) built as reusable, composable functions
- Server-side rendering, where the same component function runs to produce HTML on the server
- Testing frameworks that render components in isolation to verify their output
Projects
- Write the same small UI two ways — using JSX, and using raw React.createElement calls — and confirm they produce identical output
- Build three small reusable components (a Button, a Card, an Avatar) and compose them into one larger UI
Examples
- function Greeting({ name }) { return <h1>Hello, {name}</h1>; } is a function returning a UI description, nothing more magical than that
- <h1>Hello, {name}</h1> compiles to React.createElement('h1', null, 'Hello, ', name) — plain function calls underneath
Resources
Mastery checklist
- I can explain that a component is a plain JavaScript function returning a UI description
- I can explain what JSX compiles down to
- I can build a small component and compose it from smaller components
- I can explain why JSX expressions can embed arbitrary JavaScript inside curly braces