What is React?

First of all, what is React? We've all probably heard of it at least once if we've been in touch with the tech industry (either that or you've been living under a rock) but what does it do? This question has bothered me for quite some time and I feel that now, I understand its popularity a little. I thought it would be cool to share my take on this with others, so here goes!

React is a Javascript framework created by Facebook and a community of developers. And like any other framework, its purpose is to allow the developer to accomplish more by removing the tedious parts of coding. This in turn, allows one to accomplish more tasks with lesser lines of code. Pretty cool, I know.
But the main reason why I feel that React is extremely popular is because of the large and supportive community it has amassed.

My Favorite React Features

Here are 3 of the things that I found really useful in React:

1. Single Page Applications (SPA's)
2. React-Router
3. State Management

Single Page Applications

Before the advent of SPA's, Multiple Page Applications (MPA's) were widely used. Let's first see how MPA's work so that we can understand how useful SPA's are.

How do MPA's Work?

In MPA's, if you want to go to another page, a request is first sent to the server. Then, the server responds by providing the required page.
For example, let's say you go to a website. Now, you want to check the contact page. So, you click on the link in the navigation bar. When this occurs, a request is sent to the server that the user wants to see the contact page. So, the server sends the required page back to the user, which in our case will probably be contact.html.

How do SPA's Work?

In SPA's, there is only one page, i.e, index.html. When you want to go to another page, the server provides the same page but with a different component injected into it.

React-Router

But, the server provides the same page for every request. So, it doesn't make sense to send a request every time to the server. That is why we use the React Router. The router intercepts the request and sends the required component in response. This also prevents the page from reloading every time you go to a new page.

State Management

In React, Components are either one of two types:

• Class-Based Components
• Functional Components

A component can share the data it contains with other components by adding them as properties to the props object.
This becomes tedious when you are dealing with a large application. So there are tools like Redux which make state management a lot easier.
However, recently, a new concept of Context API and hooks has been introduced and it is an even more convenient way to manage the state. I'll try covering both these concepts in one of my upcoming blog posts!

Thanks for Reading!

Personally, I feel that React is a very easy framework to pick up. There's also a huge demand for React developers so I think that you should definitely give it a shot!
I hope that I've been able to provide you with a clearer picture of why React is so widely used. If you have anything to discuss or would like to leave a suggestion, you can contact me on any one of my social handles. I would love to hear from you!

Twitter: @nrabhiram
LinkedIn: Abhiram Reddy
Instagram: @nr_abhiram