What React is

React lets you describe an interface as a result of data.

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>
}

The component does not create an h1 with DOM commands. It returns a description of what should appear for the current name.

When props or state change, React follows the same cycle:

1. React calls the component again.
2. The component returns a new JSX snapshot.
3. React compares it with the previous result.
4. React updates the required DOM nodes.

Your component can stay simple because it answers one question: “What should the interface look like now?”

This is the core mental model for the course. You do not manually hide a message and enable a button. You update state, then render the message and button that match that state.

React is a library for the view layer. It gives you components, state, events, and a way to keep the DOM in sync. A production application also needs decisions about routing, data loading, server rendering, authentication, and deployment. A framework can provide those pieces.

React is useful when an interface has stateful, reusable parts. A mostly static page may need only HTML and a little JavaScript. Do not add React merely because the page is on the Web.

You can start with one component and grow from there. Many apps begin as a single App function and split into smaller pieces once a section repeats or owns its own state.

Change the name prop in this example. Predict which DOM node needs to change, then confirm it in the Elements panel.