Introduction to React

React is a JavaScript library for building user interfaces out of small, reusable components, each one a JavaScript function that returns what should appear on screen.

The problem React actually solves

In plain JavaScript, updating the page means manually finding an element and changing it, document.getElementById(...).textContent = ..., over and over, once per thing that can change. That gets genuinely hard to manage once a page has dozens of interconnected pieces that all need to stay in sync with each other. React flips the approach: instead of manually updating specific elements, you describe what the UI should look like for the current data, and React figures out exactly which real DOM elements need to change to match, you stop thinking about "how do I update this," and start thinking about "what should this look like right now."

Example: a minimal component

function App() {
  return <h1>Hello, world!</h1>;
}

React code is normally compiled by a build tool before it reaches the browser, so these examples are shown read-only rather than live-editable, but the code itself is exactly what you'd write and run in a real React project.