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.
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.
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.
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.
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.
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: