React

React is a collection of ready-made programming building blocks used to build the visible interface of websites and apps. This means everything you see and can click on the screen: buttons, search fields, lists, menus. Such a collection is called a library. You don’t have to use it, but it takes a huge amount of work off your hands. React was developed in 2013 at Facebook, and today its source code is freely available for anyone to use at no cost. It is thus one of the most widely used tools in web development, period.

Why half the web is built with it

Modern websites are no longer rigid documents. An online shop shows the shopping cart instantly, a chat loads new messages without reloading the page. In the past, every one of these small changes had to be programmed by hand. In large applications, this quickly became confusing and error-prone.

React solves this problem by breaking the interface down into small parts. Each part takes care of only itself. A team can thus work on a huge project without everyone constantly getting in each other’s way. This is precisely why large companies turn to React.

The second reason is the ecosystem. Because so many people use React, there is already a ready-made solution, a tutorial, or an answer in a forum for almost every problem. Anyone who knows React also finds it easy to get a job. In surveys among developers, React has ranked among the top choices for years.

Components and the detour via the copy

The basic unit in React is called a component. A component is a self-contained building block of the interface, for example a single comment under a video. You write it once and use it a hundred times, once for each comment. Components can also be nested inside one another: the comment column contains many individual comments, and each comment contains a name, an image, and a text.

Every component has a state, meaning the data it is currently displaying. For a like button, this would be the number of likes. If the state changes, React redraws the component. The developer thus only describes what the interface should look like in a given state. React itself takes care of the individual steps of change.

To keep this fast, React internally keeps a copy of the page structure in memory, the so-called virtual DOM. When a change occurs, React compares the new copy with the old one. Only the differences are passed on to the browser. This is like fixing a spelling mistake in homework instead of rewriting the whole page.

From Netflix to the mobile app

You have very likely already used a React interface today. The web interfaces of Instagram, Netflix, WhatsApp Web, and many online banks are built with it. The chat interfaces of well-known AI services also run on React or on frameworks built on top of it. You can’t tell from the outside, but technically savvy users can spot it in the browser’s developer tools.

A close relative is React Native. With it, you write an app once and publish it for both Android and iPhone. This saves companies a lot of money, since they don’t need two separate teams. Also frequently mentioned is Next.js, a framework built on top of React that prepares pages on the server in advance, making them load faster.

A common misconception: React is not a programming language. The code is written in JavaScript, the language that runs in every browser. React is merely a tool within it. Competitors like Vue or Angular pursue similar ideas and often appear right next to React in job listings.