Why use React?

There are two ways to tell a program how a screen should change. You can list the steps: find the paragraph that shows the likes, read its text, add one, and write the new text back. Or you can describe the result: the paragraph shows the current number of likes, followed by "like" or "likes". React uses the second way, and most of its benefits follow from that choice.

You Describe the Result, Not the Steps

Code that lists the steps for changing the page is called imperative. Plain JavaScript in the browser works this way: you find elements in the page and change them yourself, one call at a time. This approach works well for a small page. As the page grows, however, every new piece of data adds more places that must be updated by hand, and forgetting one of them leaves the screen showing old information.

Code that describes the result is called declarative. In React, you write a description of what the screen should look like for the current data. When the data changes, for example when the number of likes goes from 0 to 1, React works out which parts of the page differ from the new description and changes only those.

You never write the update steps yourself, so the screen always matches the current data. The lesson that compares plain JavaScript with React shows both versions of the Like button side by side.

Reusable Components

React builds a page out of components. A component is a JavaScript function that describes one piece of the interface, such as a button, a product card or a whole page section. You can use the same component many times, with different data each time.

Suppose you write a Like button component once. You can then place it under every post on the page, and each copy keeps its own count. When you change the component, for example to add an icon, every copy changes with it.

This saves time, and it keeps the design and behavior of the button the same everywhere it appears. A component can also be moved into a separate package and shared between projects.

A Large Ecosystem and Community

Because React is widely used and developed by contributors from many companies, a large set of tools and third-party libraries has grown around it. A few examples show the range:

• React Router handles moving between pages in a single-page application.
• Redux manages application data that many components share.
• React Native uses the same component model to build mobile applications.

For most features you want to add, a tested library already exists. The large community also means that tutorials, answers to common questions and help with errors are easy to find.

Developer Tools

Developer tools are programs that show what is happening inside a web page while it runs in the browser. For React, the React Developer Tools extension for Chrome, Firefox and Edge adds a Components panel that shows the tree of components on the page. You can select a component to see the data passed into it (its props) and the values it remembers (its state), edit those values while the page runs, and use the Profiler panel to find components that render slowly.

For testing, libraries such as Jest and React Testing Library let you write automated tests that render a component, simulate clicks and typing, and check what appears on the screen.

Fast Updates for Interactive Pages

React updates the page in the browser without reloading it, so it suits interfaces that change often. Examples are a search box that shows results while you type, a list of notifications that grows as new ones arrive, and a form that checks each field as you fill it in. The user keeps working on the same page while these parts change, which makes the application feel quick and easy to use.

The Virtual DOM

The Document Object Model (DOM) is the tree of objects the browser builds from a page's HTML. Every heading, paragraph and button on the screen is a node in that tree, and changing a node changes what the user sees.

React does not write your description straight into the DOM. Instead, it first builds the description as a tree of plain JavaScript objects in memory, often called the virtual DOM. When your data changes, React builds a new tree for the parts of the page that depend on that data. It then compares the new tree with the previous one, a process called reconciliation, and finds the differences between them. This comparison is often called diffing.

Finally, it applies only those differences to the real DOM, grouping several changes into one update where it can.