# The React Mental Model — React

Source: https://www.skillbyai.com/en/react/i-model

> Components turn data into UI.

## Declarative, component-based

**React** is a JavaScript library for building user interfaces from **components**: functions that take inputs (**props**) and return a description of the UI. You describe **what** the screen should show for the current data (**declarative**), and React works out **how** to update the real DOM when data changes. State changes trigger re-renders; React compares the new description with the previous one and applies the minimal changes. Thinking "UI = f(state)" is the key shift from manually editing the DOM.

## UI as a function of state

React describes what the UI should look like for the current data and updates the page to match.

![Three ideas: the React model, JSX, project setup.](assets/figures/react/section-1-map.svg) — Figure 1.1 — The model, JSX and setup.

## A spreadsheet

You write formulas once; when an input cell changes, every dependent cell updates. React components are formulas for the screen.

## Stop thinking in DOM steps

Instead of "add a class when clicked", think "the class depends on this state"; then change the state.

**Quiz:** What does "declarative" mean in React?

- [ ] React only works on servers
- [ ] You manually change each DOM node
- [x] You describe what the UI should look like for the current state, and React updates the DOM
- [ ] Components cannot have inputs

*Answer:* You describe what the UI should look like for the current state, and React updates the DOM. UI is a function of state.