React is a JavaScript library for building user interfaces, created and maintained by Meta. It did not invent the idea of building UI from reusable pieces, but it made that idea the default way most of the web is built today. Instead of writing one long HTML page and then poking at it with jQuery every time something changes, you describe your UI as a tree of components, and React takes care of updating the actual page when your data changes.

The problem React solves

Before component-based frameworks became common, updating a webpage after user interaction usually meant manually finding the right element and mutating it: document.getElementById(...), change some text, add a class, remove a class. That works fine for a small page, but it falls apart fast once you have dozens of interactive pieces that all depend on each other. React flips the model: you describe what the UI should look like for a given piece of data, and React figures out the minimum set of real DOM changes needed to get there.

Components: the core idea

A component is just a JavaScript function that returns some markup describing what should appear on screen.

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

That markup inside the return statement looks like HTML but it is actually JSX, a syntax extension for JavaScript that gets compiled into regular function calls. You will meet JSX properly in the next tutorial, but for now just know that it lets you write markup and logic in the same file, which turns out to be far more convenient than it sounds.

Why the "virtual DOM" matters

Directly touching the real browser DOM is relatively slow. React keeps a lightweight in-memory representation of the UI called the virtual DOM. When your data changes, React builds a new virtual DOM tree, compares it against the previous one, and applies only the differences to the real page. You rarely think about this directly, but it is the reason React apps can re-render often without feeling sluggish.

What you actually build with it

  • Single-page apps where navigating around does not reload the whole page.
  • Dashboards and admin panels with lots of moving, interactive pieces.
  • The front end of full-stack apps, often paired with a backend like Spring Boot, Node or Django serving a REST API.

What is next

The rest of this series builds up real, working skills: JSX and components first, then props and state, then hooks, and finally two full real-world projects — a todo app and a small weather dashboard that talks to a live API — so you can see how all the pieces fit together in something you would actually ship.