React has exploded in the last few years. People are catching on to the technical advantages it brings. Should you consider adopting it? This article aims to relay the benefits of React.JS in plain English.

React is a JavaScript library developed by Facebook. It is increasingly used in modern web applications. JavaScript, is a core programming language for building web pages, along with HTML and CSS. JavaScript makes web pages dynamic and interactive. Without it, the internet would be very much like a printed book – static and flat.

A JavaScript library is a collection of ready to use code. Imagine you wanted to show your latest five tweets on your website. Without a library, this could potentially involve hundreds of lines of code. But the prewritten code in a JavaScript library makes programming faster and more efficient.

What makes React different?

React is fast because only the portion of the page that needs updating gets reloaded. And portions only get updated when it’s absolutely necessary. So when a friend’s latest update appears in your Facebook feed, the whole page doesn’t need to reload. Users can put up with occasional page reloads. But imagine if it happened every time you ‘liked’ something on Facebook? Would you ‘like’ less things because of it?

Partial page reloads are possible thanks to the virtual DOM. That’s all you really need to know about it. But if you’re really curious, the virtual DOM is a behind the scenes representation of the page. Before updating the page, React uses the virtual DOM to preview how it will look when the update has happened. By comparing this preview with the current state of the page, React can detect precisely what is going to be different. React then inserts, removes, or updates only the thing that is different.

React combines the concepts of component based UI and ‘one-way reactive data flow’. What this essentially means is that portions of the page, which in React terminology are called components, are isolated from other components. They do not accidentally interfere with each other. A new post appearing in your friends feed (component A) becomes less likely to break the functionality of your instant messaging (component B). When referring to components that are isolated from each other, React uses the term ‘encapsulated components’. This feature makes it easier for developers to create complex user interfaces without making so many mistakes.

Component-based UI

React uses component-based UI, which is widely considered to be best practice for building complex user interfaces (UIs). So what exactly is component-based UI?

A UI component is just a ‘thing on a web page’. As mentioned, it could be a feed or an instant messaging widget. The main goal for components is reusability. This results in a very consistent UI that can be updated efficiently.

Components can be subcomponents of larger components. Consider a shopping cart page on an eCommerce website: you could decide that each product row with the name of the product, picture, quantity, and price is a component. The billing form fields could be a second component, the delivery fields a 3rd component, and the payment options a fourth. The entire shopping cart containing the product rows, billing and delivery form fields, and payment options is also a component. In this case, the component is made up of four subcomponents. You might reuse the delivery component for the billing section. React is flexible enough to output different HTML for a single component depending on the context (e.g. billing fields vs delivery fields).

Who Is Using React?

React was developed by Facebook. They wanted their web content to update faster, consume less computing power, and retain a consistent UI design across the board. They needed a system that was less error prone and could have independent teams working on different parts of the application without dependency. Thankfully Facebook released React as an open source project. Now, many big names such as AirBnB, Uber, Stackoverflow, BBC, PayPal and many more use React to run their platforms.

React is also extremely popular in the developer world. There is a large community to learn from. React is considered to be a surprisingly straightforward technology. One of our developers commented that 'React takes about 20 minutes to learn and then another 2 hours to finally appreciate that that's really all there was to learn.'

Red Badger was one of the earliest adopters of React. We use it on most – if not all – of our projects. We’ve built the entirety of Tesco’s grocery shopping UIs in React. One of Tesco’s requirements was to work in non-JS browsers. React makes it extremely easy to run on the server side to create the full HTML page, and send it to the browser, and if the browser has JavaScript then React will run on the browser and handle any updates after that, but if it doesn’t then they just get a normal HTML page that looks the same as the full JavaScript one.

The only difference is that with React running in the browser you can have a nice single page app. If a user clicks a link, they get spinners while things load and nice transitions etc. In non-JS browsers, the page refreshes every time the user clicks a link just like an old fashioned pure HTML page. But otherwise, the site looks identical.

The Fortnum & Mason site was one the earliest e-commerce websites in the UK to use React. It allowed for much faster performance and reusability of code across the site by leveraging the features of React discussed so far.

How does React make us a better service provider?

Efficient, non-blocking distribution of labour

React components are self-contained. This means that developers can work on individual aspects of a web page (components) simultaneously without stepping on each other’s toes. And because React components are designed to minimise interdependence, when they come together on the page they don’t break. All this amounts to less time spent troubleshooting problems and more time building features.

Code reuse leads to a consistent UI

The React development community have released a large number of pre-made components that can be modified for individual projects. Also, the structure of React makes it easy for teams to build their own in-house library of reusable components.

Code reuse saves time of course, but it also provides consistency within the UI. Components are created from a central ‘source of truth’. Without this approach, we would waste time considering the properties of the component on a case by case basis, and potentially repeating work already done elsewhere in the UI. If the latter was the case, we could have several variations of a component which may differ in varying degrees, leading to a messy, confusing design and experience, and of course slowing down both the speed of development and the load time and increasing the page weight of the finished site.

Better collaboration between developers & designers

The React workflow is based on developers and designers working together to specify components. Roughly speaking, at Red Badger, the integrated team of designers and developers takes the designs and draws boxes around parts of the page; what's inside the box is a reusable component. Because we’re defining components together and building them together, we have a shared understanding of what properties they have. This generates lots of communication within the team and gives everyone a sense of ownership, responsibility, and involvement in the user interface.

We can integrate React with existing systems

By focusing only on a very specific but fundamental part of any system – user interface – React allows us to easily build visual components that can sit alongside a client’s current technology rather than replacing it. For instance, we can add just one or two components on the page using React and leave the rest alone. That's actually exactly what Facebook do. Because Facebook is so huge they haven't rewritten all the UIs to use React yet. They just have lots of little elements that use it.

We can achieve more results in less time

By working well in teams, crafting efficient web applications that are less likely to break, and using a versatile technology that doesn’t require full site rebuilds, our teams are more cost effective than those not using React. Thank you very much, Facebook!

Written with great help from:

Robbie McCorkell, Andrew Bryant, Steve Cottle, Nico Castro