What is ReactJS?
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.