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?
React is a JavaScript library used to build user interfaces on the frontend. An open-source project originally created by Facebook, it’s one of the most popular JavaScript libraries, with over 180,000 stars on Github.
In the 2022 State of JS Survey it was voted the library with the highest user count/retention score, making it an incredibly safe bet to learn.
The goal of React is to allow developers to quickly build out their interfaces.
To explain all about React.js, we’ll start by introducing JavaScript libraries themselves. Next, we’ll learn more about React by exploring what it was designed as a solution to, and its major features such as components.
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 is a JavaScript library?
- What problem does React.js solve?
- Features of React
- What are React components?
- When should you use React?
- Which companies use React?
- Final thoughts
1. What is a JavaScript library?
Often when writing code, you need JavaScript to perform repetitive functions. For example, when you type in a search bar you want it to give you suggestions. You also want the search button to change color when you hover over it.
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.
A JavaScript library is a collection of pre-written JavaScript code. Rather than coding repetitive functions by hand, you can add them to a library or use someone else’s. Import the library into your project rather than hand-writing repetitive code yourself.
There are libraries for most common problems you come across as a developer. Everything from formatting dates to performing common mathematical calculations has a library, with one of the most common frontend JavaScript libraries being JQuery.
2. What problem does React.js solve?
Before React, JavaScript developers were building user interfaces by hand using vanilla JavaScript. In case you’re not sure, vanilla JavaScript means JavaScript without any additional libraries or frameworks.
While we advise coding with vanilla JavaScript at the start, for professional developer teams this meant longer development times and more opportunities for errors and bugs.
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-desired web framework according to the 2023 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:
JSX
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.
Web content these days is dynamic. It changes depending on the behavior, preferences and interests of the user. JavaScript is what allows you to modify the DOM to add dynamic content.
JSX (stands for JavaScript eXtension) lets you change the DOM with HTML-style code. It’s one of the reasons people love React so much. JSX is easier to write and understand compared to OG vanilla JavaScript elements.
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.
Virtual DOM
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
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.
Props
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 have a team of developers who are familiar with JavaScript, React could be a great option. Especially if your application is complex, consider React.
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.
Another similarly popular JavaScript technology also use to build applications is Angular. Learn just what it is, and when to use it in our guide to Angular vs React.
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:
- Shopify
- Amazon
- Asana
- Atlassian
6. Final thoughts
React.js is a great option for JavaScript developers creating single-page web applications. It allows developers to create complex websites using reusable components. A major benefit is the ability to update only the component with the relevant data. Rather than reload the whole page, React will keep track via its Virtual DOM exactly what has changed.
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!
If you’d like to read more about JavaScript and the world of web development in general, then these articles should interest you: