Explain Like I'm Five: React

Omar Benseddik's photo
Omar Benseddik
Posted 2021-05-29 · Updated 2022-12-28 · 5 min

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.

What is React?

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

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:

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 - something highly valued by web design companies who want ultimate flexibility.

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

Enjoyed this piece?

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

React development with Tinloof

Tinloof is a design and development agency home to experienced developers who create powerful websites, apps and ecommerce solutions.

As a React development agency, we offer a wide range of web development, application development, mobile development and design services, working across both the frontend and backend. So, whether you’re starting from scratch or looking for optimisations, we can offer the support you need. Get in touch with us today to discuss your project goals with a member of our team.

Recent articles

Using CSS files in web components

When building a microfrontend in React using tools like create-react-app, Webpack, or Vite you might expect plain CSS files and CSS modules to just work, but they don’t 😱. Here is...
Vladimir Zotov's photo
Vladimir Zotov
2021-10-24 · 4 min

Explain Like I'm Five: Headless CMS

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 a few minutes what Headless...
Omar Benseddik's photo
Omar Benseddik
2021-06-19 · 17 min

Explain Like I'm Five: Website speed

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 two minutes read, we'll explain why website speed...
Seif Ghezala's photo
Seif Ghezala
2021-06-12 · 4 min