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.
Why use React?
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:
The New York Times has a similar approach:
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:
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:
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.
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:
Enjoyed this piece?
If you've enjoyed this #eli5 explanation, let us know what other topics you'd like us to cover.