2021-05-29 · 3 min

Explain Like I'm Five: React

Omar Benseddik@bnsddk
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 explain in two minutes what React is and why it is used.

What is React?

React is a technology used to build the interfaces of websites and mobile applications. It was created by Facebook and has been made available to the public in 2013.

Since then, 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
Graph showing the number of React downloads  (source: npmtrends)

Why use React?

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:

Get in touch

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
Survey results can be found  (source: Stack Overflow)

Enjoyed this piece?

If you've enjoyed this #eli5 explanation, let us know what other topics you'd like us to cover.

Other articles

How to build an Auto-Playing Slideshow with React