Start a React project
What React is
Understand React as a library for describing user interfaces with components and updating the DOM from changing data.
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:
- React calls the component again.
- The component returns a new JSX snapshot.
- React compares it with the previous result.
- 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.
Change the name prop in this example. Predict which DOM node needs to change, then confirm it in the Elements panel.
Lesson completed