Imperative thinking
Find the message element, replace its text, toggle its class, disable the button, and remember to reverse each change later.
The big picture
An interactive page has data that changes: a selected tab, text in a search field, or items in a cart. React lets each component describe what its part of the interface should look like for the current data.
When the data changes, React runs the relevant component logic again and brings the rendered interface in line with the new result. The developer focuses on the desired UI, while React coordinates updates with the host environment, such as the browser DOM.
- Data changesState, props, or context provides a new input.
- Components describeComponent logic returns the UI for that input.
- React updatesReact commits the necessary changes to the screen.
Declarative UI
Declarative means describing the result you want, not listing every operation needed to reach it.
Declarative thinking
If the form is submitting, show a progress message and disable the button. Otherwise, show the normal form.
Both approaches eventually change the DOM. The difference is who tracks the individual mutations. With React, component output is the source of truth, so related UI changes are expressed together.
Purpose
React is designed to make changing, data-driven interfaces easier to build and maintain. Components give large interfaces boundaries, allow repeated patterns to share an implementation, and keep rendering logic close to the data it represents.
React is useful for small interactive widgets as well as full applications. It can participate in client rendering, server rendering, and static generation, depending on the surrounding tools.
Scope
React focuses on the UI layer. It supplies the component model and rendering primitives, but it intentionally does not decide every part of an application.
- React handles
- Components, rendering, local state, events, and synchronizing UI with changing data.
- Your project chooses
- Routing, data fetching strategy, authentication, styling, persistence, testing, build tools, and deployment.
A React framework can make many of those surrounding choices and add conventions for building a complete application. React itself remains the UI foundation inside that larger system.
Core idea: describe the interface for the current data as components, and let React keep the displayed UI synchronized with that description.