A brief guide to the first terms you encounter in React. Instead of memorizing JSX, Props, event handling and State separately, connect them in one flow: receive data and calculate the screen; when an event occurs, change the state and calculate again.
§ 00 · React and components
React is a JavaScript library for building user interfaces. It is not a new programming language: it provides a way to divide a screen into small, reusable components and combine them. A component can be as small as a button or as large as a page.
A function component reads inputs such as Props, State and Context and returns the next appearance of the screen. When inputs change, React calls the component again to calculate a new screen (render), then applies only the necessary differences to the actual DOM (commit). A component’s rendering code must therefore be a pure calculation that produces the same result for the same inputs.
§ 01 · JSX — screen markup inside JavaScript
JSX is a syntax extension for writing HTML-like markup inside JavaScript files. JSX itself is neither React nor HTML. It is converted to JavaScript during the build, and JavaScript expressions can go inside curly braces.
It is stricter than HTML. Tags must be closed; multiple sibling elements must be wrapped in a single parent or Fragment; and custom component names begin with a capital letter. Some names also differ from browser DOM attributes, such as className instead of class.
§ 02 · Props — inputs passed from parent to child
Props are values a parent component passes to a child. They can be strings, numbers, objects, arrays, functions or JSX. The child treats received Props as read-only inputs for that render. To change them, have the parent pass down new Props.
§ 03 · Events and State — linking actions to the next screen
An event handler is a function that responds to user actions such as clicks, input and submissions. Pass the function itself, as in onClick={handleClick}. Using its return value, as in onClick={handleClick()}, runs it immediately during rendering instead of waiting for a click.
State is data a component needs to remember between renders that also affects the screen. useState returns the current value and a setter to update it. The setter requests the next render rather than changing the variable in the code currently running. Replace object and array State with new values instead of mutating them directly.
§ 04 · Build screens through composition
children is a special Prop receiving content placed between a component’s opening and closing tags. Use it for components such as boxes, dialogs and layouts whose inner content can be swapped. Combining small components, rather than inheritance, is the basic approach in React.
Use if, the ternary operator or && to return different JSX conditionally. Use map to turn an array into a list of JSX. Give every sibling item a stable, unique key so React can identify it across additions, deletions and moves. Array indices or random values that change on every render make poor keys.
| Term | Meaning in one line |
|---|---|
| Component | A reusable unit that reads Props, State and Context and returns UI |
| JSX | A syntax extension expressing UI structure inside JavaScript |
| Props | Read-only inputs passed from parent to child |
| State | Data remembered between renders and used to change the screen |
| Event handler | A function to run when a user action occurs |
| key | A stable marker identifying sibling list items between renders |
Read this note at sass.studio.