Why React JS?

Even according to Stack Overflow and the latest survey, React JS is both one of the most loved and the most wanted web frameworks out there beating out Angular, Vue and a lot of other great frameworks.

But what exactly is React anyways?

Well, they define it on their website as a JavaScript library for building user interfaces.

So it’s a front end framework essentially.

And the idea is to make it easier and faster to build beautiful user interfaces such as the ones on Airbnb.

And then one of the best things about React is it makes it so easy to create these repetitive elements such as these tiles that you see on Airbnb. Each of these sections has different pieces of information,

but each of them individually such as the rating or the superhost tag, these all worked very similarly from listing to listing.

So if you have a whole bunch of these that you need to render then you can simply create a single component and customize it with different pieces of data to create an entire user interface like the one that Airbnb has. Effectively, you end up breaking down a very complex user interface structure into a component tree.

So for example here, I’ve got the entire web app represented as a component inside that I’ve got a navbar component that can be customized.

I’ve got a ToDoList component and inside that, I’ve got ListItem components and then I’ve got Checkbox and ItemText component each of which can be reused and customized so that you end up coding less but creating more beautiful user interfaces.

And it also vastly simplifies the structure of your website.

So if you think back to using Bootstrap just to create a simple Navbar like this, we have to write a whole bunch of HTML like this.

And it makes it really hard to organize our code and make sense of what’s actually going on when things go wrong.

Now in React, however, we have a whole bunch of different components represented each as if they were an HTML element.

So it’s effectively like we’re creating our own custom HTML elements defining the styling and defining the functionality of each of them.

And then we can slot them in, like HTML elements, inside an overall structure keeping the code for our web app incredibly clean and incredibly reusable and modular.

So these are all great things for programming clean code and creating apps that scale really well even when it gets really big and complex. Effectively you can think of these components as different ingredients that go into a burger and depending on what it is that you need, you can chop and change these components and customize the components depending on what you need.

And this is achieved partly through the mixing of the different types of files.

So I know that previously we’ve always tried to keep our HTML, CSS

and JavaScript separate. But React does and what it really benefits from is actually combining small amounts of each of these types of files into a single component so that each component has its own styling, its own functionality that it controls, and you can create several of these components to each performs a different function and have a different appearance. For example, this is what enables the Twitter web site to be able to load the feed screen without the rest of the page visibly updating at all.

You can see that this page is not refreshing.

It’s only when you reach the bottom of the feed that it detects that you’ve reached the bottom and then it makes a request to the server to populate this feed component with more data while the rest of your app stays as it is without needing any changes.

This is also what enables websites to be incredibly interactive.

If you think back to the old days where we had Facebook and you had these requests, say friend requests or poke requests or whatever it may be, you had to refresh the page in order to see the updates.

But these days it’s all handled through notifications and we have each component listening for changes in the server and updating itself and its own appearance and data and being able to talk to the server independently.

So imagine if every single part of this Facebook website was its own component.

So the news feed is its own component, each of the posts is its own component.

So if there’s a new comment for example on a post, then that post will have to update itself without affecting any of the rest of the website.

And this really is one of the greatest things about the React framework.

Now the other really awesome thing that it does is it’s able to re-render these changes really efficiently and it does this by comparing changes, so what we might call diffing.

So whenever a change happens, say a new piece of data comes in or the user does something, then it’s going to compare the new version of the DOM tree that you want to be rendered with the old version that’s already showing up and it will do this kind of spot-the-difference thing where it spots that ‘Oh OK.

The only thing that’s changed is that this input has gone from empty to checked.

So this is the only component that I’m going to re-render.’

And this obviously is more efficient and will make your web app seem more interactive and much faster.

Now of course React is not the only frontend framework out there. So, why am I talking about React?

Well even if you look at this Google Trends chart which looks at how often people search for each of these things, you can see that React has clearly overtaken Angular and Vue over the past two years.

And if you look at Stack Overflow surveys, the most popular web framework is currently React JS just below jQuery. But that’s not all because React is being used at loads of places that you might want a job at, say Airbnb or Uber, Facebook, Netflix. And it’s probably one of the fastest-growing and most in-demand skills out there.

In fact, if you look at indeed and you search for a job for a full stack developer or frontend engineer, very frequently you will see a requirement for React and Node.