What is React?
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.
What exactly is React anyways? They define it on their website as a JavaScript library for building user interfaces. So, It is a front-end framework essentially. The idea is to make it easier and faster to build beautiful user interfaces such as the ones on Airbnb. And one of the best things about React is it makes it too easy to create these repetitive elements such as tiles that you see on Airbnb. Each of these sections has different pieces of information, but each of them individually such as the date or the price, 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.
If you think back to using bootstrap just to create a simple Navbar, we have to write a whole bunch of HTML, And it makes really hard to organize our code and make sense of what is actually going on when things go wrong. In React, however, we have a whole bunch of different components represented each if they were an HTML element. So it is 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 code 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 is that you need, you can chop and change these components and customize the components depending on what you need.
This is achieved partly through the mixing of the different types of files. Previously we’ve always tried to keep our HTML, CSS, JavaScript separate, But React does and what it really benefits from is actually combing 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 is controlled, and you can create several of these components to each perform a different function and have a different appearance. For example, this is what enables the Twitter website to be able to load the feed screen without the rest of the page visibly updating at all. It is only when you reach the bottom of the feed that is 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.
The other really awesome thing it does it is able to re-render these changers 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 a 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-difference thing where it spots that the only thing that’s changed is that this input has gone from empty to chacked. So, this is the only component that I am going to re-render. This obviously is more efficient and will make your web app seem more interactive and much faster.
Why React?
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 Vue over the past two years. And if you look at Stack Overflow surveys, the most popular web framework is currently React JS. 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 search for a job for a full stack developer or frontend engineer, very frequently you will see a requirement for React and Node.