The React Mental Model

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.

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.

Quick check: What does "declarative" mean in React?

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