What Is React?

React is a JavaScript library for building user interfaces. It was created at Facebook and is now used by an enormous number of teams to build everything from small widgets to entire products.

The word library matters. React is not a full framework that decides how you route pages, fetch data, or structure folders. It does one job: given some data, produce the user interface that describes it, and keep that interface in sync as the data changes.

The problem React solves

Before React, keeping a page in sync with data usually meant reaching into the DOM by hand. You would find an element, read its value, change its text, add a class, remove a row, and hope you had not missed a case.

// Updating the DOM by hand
const counter = document.getElementById("counter");
let count = 0;

document.getElementById("increment").addEventListener("click", () => {
  count = count + 1;
  counter.textContent = count;
  if (count > 9) {
    counter.classList.add("warning");
  }
});

That works for one counter. It stops working when a screen has fifty pieces of state that all affect each other. The bugs are always the same shape: the data changed but some corner of the screen did not hear about it.

React's answer: describe, don't instruct

React flips the model. Instead of writing instructions for how to change the screen, you write a function that describes what the screen should look like for the current data. When the data changes, React works out what to change for you.

function Counter({ count }) {
  return <span className={count > 9 ? "warning" : ""}>{count}</span>;
}

What you get from React

• Components - small, reusable pieces of UI that you compose into screens.
• Declarative rendering - describe the result, not the steps to get there.
• One-way data flow - data moves down through props, which makes it easy to trace where a value came from.
• A huge ecosystem - routing, data fetching, forms, testing and component libraries all built on the same model.

React is also deliberately unopinionated about the rest of your stack, which is why it appears in so many different kinds of project. Frameworks such as Next.js and Remix build on top of it to add the parts React leaves out.