A JavaScript library for building user interfaces, developed by Meta. It lets you compose UIs from reusable components, manage state declaratively, and update the DOM efficiently through a virtual representation. React is the foundation of countless web applications and the entry point to the modern front-end ecosystem.
A React component that renders the same output every time is a static component. Real components respond to state, props, and user input. Some of that response is structural: show this when logged in, show that when logged out. React does not have a v-if directive or an *ngIf attribute. It has JavaScript. Conditional rendering…
The ternary operator answers an either/or question. The logical AND operator answers a simpler one: show this, or show nothing. In React, && is the most compact way to express that pattern. It appears in nearly every codebase—render a badge when a count is positive, show a warning when a form is invalid, display a…
A list is the most common shape of data in any interface. A table of users, a feed of posts, a menu of links, a set of options. React does not provide a v-for directive or an ngFor attribute. It does not need one. JSX is JavaScript, and JavaScript has Array.prototype.map, which transforms an array…
The previous chapter introduced map as the way to render lists in React and mentioned the key prop as a requirement. This chapter is about why. The key prop is the single most misunderstood part of list rendering. It looks like a prop, behaves unlike any other prop, and produces bugs that are invisible until…
A form input that holds its own state is unpredictable. The DOM remembers what the user typed, but your React component does not, unless you ask it. When you need to validate, transform, or react to input as it happens, you must take control of the value. This is the controlled component pattern: the input’s…
The previous chapter covered controlled inputs for the basic field types: text, checkbox, radio, and the general pattern of binding value to state and onChange to an updater. This chapter focuses on two elements that behave differently in React than they do in plain HTML: <textarea> and <select>. In HTML, a textarea’s value is its…
A form with ten fields can have ten useState calls and ten onChange handlers. That is ten opportunities to mistype a variable name, ten places to update when a field is added, and ten blocks of nearly identical code. The alternative is a single state object and a single change handler that routes each event…
A form has a default behavior. When the user presses Enter in a text field, or clicks a submit button, the browser submits the form. In a traditional server-rendered application, this is the desired behavior: the browser sends the form data to the server, and the server responds with a new page. In a React…
Controlled inputs are the default in React. The value lives in state, onChange updates it, and the input always reflects what React says it should. This is powerful for validation, formatting, and conditional rendering, but it is not free. Every keystroke triggers a re-render. For a form with many fields, or a field that updates…
A React component is a function that returns JSX. In the purest sense, it should do nothing else. It should not fetch data, subscribe to events, set timers, or touch the DOM. It should take props and state, and produce a description of the UI. This purity is what makes components predictable and testable. But…