Tools that will win your heart

An Easy Dive into the World of ReactJS

ReactJS has become one of the most popular JavaScript libraries amongst frontend developers and is all the rage here at bitperfect. In this article we would love to take a closer look into what makes it so incredibly powerful. We will unlock the secret to why it not only makes a developers life so much easier, but also makes the experience of the everyday web-user a lot more frictionless.

Welcome to the wonderful world of ReactJS, one of our favorite JavaScript libraries. If you’re familiar with the world of bitperfect and especially this blog, you’ll know that not only do we use React JS for our User Interfaces, but we are in absolute love with it. Now you might think “well having an emotional bond to a JavaScript library is the nerdiest thing in existence” and we won’t debate you on that. BUT we have very good reasons that have nothing to do with our IT-affinity and everything to do with the power of efficiency. By the end of this article, you’ll understand.

Let’s dive in!

What is ReactJS? #

Simply said: ReactJS is a JavaScript library that developers use to make user interfaces for web applications. Jordan Walke, software engineer at Facebook, first developed React JS in 2011 and published it in 2013 (what a nerd). Walke envisioned a tool that could alleviate the challenges of UI development, and thus, ReactJS was born.

ReactJS — The Core Concept #

Let’s use LinkedIn as an example for a web application. If you look at LinkedIn as a whole, you see one website with a lot of different sections. You have the menu bar at the top, the search bar, the feed, your profile info on the left and so on.

ReactJS doesn’t quite see it like that and that’s exactly what makes it such a great asset. React makes it possible to break a web app like LinkedIn down into components, rather than working with the UI as an entirety. It sees the profile info as a component, the search bar as another, then the menu bar, the feed and so on. You can look at the components like lego bricks. Together, they create the whole picture.

Why does that make it so much more efficient? Well it makes maintenance and updates much easier, because you can focus on the components that are affected by changes instead of the entire UI.

Here’s a more simplified example, because we LOVE making something complicated easy and accessible: #

Imagine you want to build a house. You hire two architects. The first one just builds you one giant room with a roof on top and places the furniture into that giant room — done. It’s a house and it works. The second one plans each room separately, even builds them separately and then puts them together in the order they belong. Now let’s say you want the faucet in the second bathroom changed. How’s that gonna go? The first architect looks at you in disbelief, because how on earth is he supposed to find that faucet? It’s there, but there is no separation like bathroom, living room, dining room. It’s just ONE room. So now he’s gonna have to turn over every stone, look under the carpets, open all the windows just to look for the right faucet. Not only will it take him forever, turning every single piece of furniture over to check if he found the right piece, but he’ll be hella busy not breaking everything while he puts it back in place. Horrible! Now the second architect doesn’t get that hustle. She looks for the block she designed as the second bathroom. There she finds the faucet you’re talking about. She exchanges it. Done. Magic!

And now let’s switch out the house with a web app #

Let’s take LinkedIn for the sake of continuity. The faucet is just an aspect of LinkedIn that needs changing, like the search function. And let’s exchange the architects for frontend developers.

The second dev used ReactJS, the first didn’t. The first one has to, when he wants to make a miniscule change like the search function, look at the entire User Interface of LinkedIn as a whole, look at every DOM (Document Object Model), look if it needs changing in order for the new search function to work. He not only has to pick everything apart, but he has to make sure he doesn’t break anything important along the way. He also needs a raise for obvious reasons.

The second one is a little trickster. She used ReactJS to build her website, which means it’s broken down into components, like the rooms in a house. She doesn’t have to look into each room, because she knows exactly which component contains the search function and what needs to be changed. What a life!

But the magic continues #

Let’s go back to that house of ours. Let’s say we want to make it an AirBnB. We get our first guest, they enter the house and the first thing they want to do is switch on the lights.

Our first house, the one single room, doesn’t really know how to deal with that request. So it tears itself down completely and then rebuilds from the ground up, but with the lights switched on instead. Seems a bit dramatic, but the light is on so let’s call it a success. The second house knows exactly what light switch was just flipped, knows what room that switch was in and switches darkness with light. Done.

Let’s go back to our LinkedIn webapp instead of the house. Our AirBnB guest is basically our regular LinkedIn user. Instead of switching on the light in a house, our user will click like on a post they just saw. In both cases, a change happens. In our house, the lightbulb goes from dark to bright yellow. On our LinkedIn page the little heart at the bottom of the post turns red. In our first scenario, where our UI wasn’t built with React JS, this happens: LinkedIn receives the user request, it tears the entire site down and reloads the page, but this time with the colored in heart. It works, but too much drama.

With ReactJS, LinkedIn gets the like-request, but instead of reloading, the request is first processed by something called a “virtual DOM”. This virtual DOM looks at the change and where the change occurred, calculates the quickest and easiest way to implement the change into the interface and then exchanges only the component that is required. Again — magic!

Funny enough: LinkedIn was actually built with React JS. Same as AirBnB, Reddit, Facebook for obvious reasons, Whatsapp Web, Netflix, Dropbox, Instagram and many more.

You see, that’s why we choose ReactJS every. Single. Time. It makes changes and maintenance so much easier, more efficient and also more fun.