Explain Like I'm Five: React

This post is part of the series Explain Like I'm Five (#eli5), which aims to make tech concepts and terms easy to understand.

In this post, we’ll be answering the question: what is React?

We’ll look into its origins, usage, explain key terminology and also cover how and why React is used.

Created by Facebook and made available to the public in 2013, React is a JavaScript technology for building user interfaces.

It grew in popularity and has been adopted by thousands of companies, including Uber, Netflix, Bloomberg, Walmart, Airbnb, WhatsApp Web, Instagram, PayPal, and The New York Times.

Graph showing the number of React downloads

Reuse code

Code written in React can be reused, both within the same project or across different projects. The idea is to build once and use multiple times.

For example, the "Get in touch" button at the top of this page can be used in different parts of this website or in a totally different website. Let's place it here for demonstration purposes:

Looking at examples, Netflix reuses code to display movies in identical horizontal lists that contain a title (e.g. Award-winning Crime TV Shows) and movie posters:

Netflix carousels

The New York Times has a similar approach:

NYT components

Flexible structure

A website written in React can be split into multiple pieces (called "components"), making it easier to plan a project and eventually implement modifications.

Let's take Airbnb's homepage as an example, which has an "Explore nearby" section. If they decide to remove this section, it can easily be done without impacting the rest of the website:

Airbnb components

As we can see in the example above, a React website or application is a bunch of components glued together.

Using a real-life example, imagine you buy an IKEA bed with storage. You can eventually remove or change the storage drawers without changing the whole bed.

Easier to identify problems

Code split into multiple pieces makes it easier to find problems (bugs).

Taking WhatsApp Web (desktop version) as an example, let's assume for simplification purposes that the whole code is split into three parts:

WhatsApp components

Should the search bar stop working, React will tell the developer to search for the bug in block 1, rather than having the developer search through the whole code.

Using a real-life example, imagine you lose your keys in your house. Instead of searching for the keys throughout the whole house, you will be informed that the keys are lost in the kitchen.

Use React components built by others

There are hundreds of React components that can be reused to solve common problems.

As an example, we used a React component to calculate the minutes it takes to read an article in an energy news aggregator we've created.

Energy news aggregator minutes read

Support from the community

There are many React forums and resources to receive help and learn techniques.

According to a 2019 survey sent to 90,000 web developers, React is the most loved tool in its category:

Survey results can be found