You might have heard a lot about React.js. It isn’t a programming language or framework, nor is it a runtime environment like Node.js. So what is it really, and how do you use it?
The goal of React is to allow developers to quickly build out their interfaces.
Once we’ve covered these, we’ll teach you when is the best situation in which to employ React. Although this technology is widespread these days, we’ll give you some concrete examples of companies which have employed it in building their websites.
If you’d prefer to skip ahead to a certain section, simply use the clickable menu:
- What problem does React.js solve?
- Features of React
- What are React components?
- When should you use React?
- Which companies use React?
- Final thoughts
If you use this search bar all over your website, this could get annoying to write over and over again. This is where libraries become useful.
2. What problem does React.js solve?
In 2011, developers at Facebook created React to solve issues with code maintenance. Because of this, you’ll find that React has some excellent documentation on its official website.
Only eleven years later it’s the most-wanted web framework according to the 2022 Stack Overflow Developer Survey.
3. Features of React
There are two major features of React that aim to improve the developer experience: JSX and Virtual DOM. Let’s briefly take a look at them:
At the center of any web application are HTML (Hypertext Markup Language) documents. HTML is a formatting system used to structure a web page and its content. While reading the HTML, browsers create something called a Document Object Model (DOM). The DOM views an HTML document as a tree of nodes where each node is an HTML element.
Not only that, but JSX leads to significant performance improvements and is compatible with all browsers. On top of that it also delivers increased efficiency in the development workflow.
We’ve talked about the DOM, but what is the virtual DOM? To get there, let’s first discuss why we might want a virtual DOM.
So you have your web page. Its DOM is made up of HTML elements. Let’s say your website has a lot of dynamic content and it’s popular, so there’s a lot of user interaction.
To update the DOM without the user having to refresh the page to see changes, the entire DOM has to reload. This is very inefficient, but without it the user will have a bad experience.
Enter the Virtual DOM. If the page is using JSX elements, React will create a copy of the DOM, called a Virtual DOM.
This Virtual DOM keeps track of the elements the user interacts with and only updates the ones that are relevant. Since we’re not reloading the entire DOM on each interaction, this improves performance.
For example, say you’re on Facebook and you comment on someone’s post. Without the virtual DOM, the whole page would reload so you can see your comment appear on the screen.
With the virtual DOM, React scans the page and identifies which DOM section changed. You’ll then see your comment appear, and only that comment section of the DOM is updated.
3. What are React components?
A core concept of React.js is components. Components are the building blocks that make up a React application. Developers break up the user interface into reusable chunks of code. For example, you might have a “Search Bar” or a “Shop Item” component.
On an e-commerce site, for example, you have many individual item pages for each product. Each product has an image, price, and color. Rather than create each individual item page, you create one item component and reuse it.
Each component has its own set of properties and functions (i.e. your price, color, etc.). Data flows from parent to child component to define values. In this case, your parent component is your product list. Your top level component is your “App” component.
State management is a big concept in React, but what is state? State is an object. It stores a set of observable properties that control the behavior of the component. This information can change as the user interacts with the user interface.
Let’s look at the example of our e-commerce site again. You’re browsing through a list of products. This list spans multiple pages and allows you to sort by values like type of item, price and color.
After the first page, you click to go to the second. Then you decide you actually want to see only items that are green. We store this pagination (page 2) and sorting information (green) in the state.
Short for properties, props allow the user to pass data or arguments to React components. While state can change, props are read-only and cannot be changed. Props help make a React component more dynamic.
We’ve talked a bunch about how React is great because it allows us to reuse code, i.e. components. As we use our components again and again in our UI, we don’t generally need the component with the same data.
Back to our product list page. We need to change the content of the component depending on the product selected by the user. This is where props come in.
When the user clicks a product from the product list page, it renders the product item component. This parent component (item list) passes props down to its child component (product item). The component has the same structure, but its content changes depending on its props. These props might be data like price, color, availability.
Similarly, if the product is unavailable, we can pass that info down to the product item component. The item page can then render an email box for you to enter your email to be notified when it’s back in stock.
4. When should you use React.js?
If you only need to build a simple static website however, React might be overkill.
Let’s say you have a page for a restaurant that has only the menu, opening times and contact information. To set up all the boilerplate React code for that wouldn’t make sense.
As you’ve seen already though, for every other situation it’s a great tool to have in your kit.
This is why you’ll not just learn it as part of the CareerFoundry Web Development Program, but also deploy it in your projects. if you’re interested, then check out software engineer and program graduate Lucian talks us through how he created a native app called ChatMeApp using React for his portfolio.
5. Which companies use React?
React is popular among a lot of top companies you use every day. The creators of React—Facebook, Instagram, etc—are obvious examples. Here are some other companies that use React.js:
6. Final thoughts
It’s fast, scalable and flexible due to it being a library rather than a more opinionated framework. It also has a huge and active developer community, and pretty great documentation. Definitely give it a try in your next project!