In the world of technology, every small business is trying to grow through internet. Which causing web applications in demand. As a developer I can say first thing comes in our mind is which JavaScript Library should we use. In this blog I am going to discuss React.js .
I learned react during my project days. Believe me it is a very interesting topic to learn and work on. I have developed many React applications, which turn out to be surprisingly very fast and efficient. And that made me to write this blog.
So, let’s dig into it –
React is a JavaScript library to build fast and interactive user interface. React was created by Jordan Walke, a software engineer at Facebook, who released an early prototype of React called “FaxJS”. He was influenced by XHP, an HTML component library for PHP. It was first deployed on Facebook’s News Feed in 2011 and later on Instagram in 2012. It was open-sourced at JSConf US in May 2013.
Fun Fact – If you want to expand job opportunities as a developer you should have react in your resume.
So, lets understand, what is react and how react is so better than any other library in market.
The heart of all react applications are Components. A component is usually piece of user interfaces.
How React works?
Web applications with react, builds a bunch of independent, isolated and reusable components and compose them to build complex interfaces easily. Every react application has at least one component which refer to as root component and it contains other child components. Basically every react application is a tree of components.
Let’s understand this by an example –
lets imagine if you are building application like Facebook. Always keeps in mind every web page has navigation menu, footer menu and some information. So, let’s split web page into components like navbar, profile, intro, follow, feed and and then we can build them separately and combine them together to create a single page.
Before getting into the Components, let’s understand state and props –
State
State is a heart of React and built-in object that is used to contain data or information about the component. A component’s state could change over the time; whenever it changes, the component re-renders. The change in state can happen as a response to user request or system-generated events, and these changes determine the behavior of the component.
class Greetings extends React.Component {
state = {
name: "capable"
};
updateName() {
this.setState({ name: "capablemachine" });
}
render() {
return(
<div>
{this.state.name}
</div>
)
}
}
Props
Props is nothing but a global react object which passes the information to a component. We can pass props to any component as we declare attributes for any HTML tag. Have a look at the below code snippet:
<DemoComponent Prop = "capablemachine" />
How to define components?
There are two ways to define components, first is Class Base Components and second is Functional Base Components.
Class Base Components –
class base component extends react component class and it required us to use render method. Render method means to render the content on the sight.
class base component extends react component class and it required us to use render method. Render method means to render the content on the sight. These components are simple classes (made up of multiple functions that add functionality to the application). All class based components are child classes for the Component class of ReactJS.
class Welcome extends React.Component{
render(){
return <h1>Hello, {this.props.name}</h1>;
}
}
Functional Base Components
functional base components are actually pure JavaScript functions that accepts props as its argument and return some JSX. So JSX is basically java script xml, it is a syntax that allows us to write html and also you can write java script inside of it. This components is called as stateless component as it does not required to manage state. Below is the syntax of functional base components.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
There is one more concept called Virtual DOM which make react so fast.
What is DOM?
DOM is nothing but a Document Object Model, it defines structure of documents and browser converts your web page or web document into DOM which is representation of document of an object. So what makes react so fast? Lets say we have DOM as you can see below in the picture, So what react will do is it will make a two copies of real DOM which is represented in yellow color into the picture and will call it virtual DOM.
Whenever anything updates in your application, it gets rendered into virtual representation of one of the DOM copy. After that it will compare with the other copy of virtual DOM and if he detect any change which is represent in red color it will update the Real DOM with that change. React never read from the real DOM, it will interact with virtual DOM and when if it sees any change it goes and update the real DOM very efficiently, making react fast. And that’s makes react most popular.
Model View Controller
To make complex web application much easier MVC played biggest role. MVC is known as Model View Controller, the goal of this pattern is to display large application in specific section that all have their own purpose. To understand each section let’s take a look into the picture shown below.
First the user requests a specific page from the server, and the server sends all that request to the specific controller. This controller will be responsible for handling all the request from client, and It will tell the rest of the servers what to do with that request.
Controller acts as a middleware between two sections ; Model and View. The first thing happens when controller receives a request is that it asks question to model based on the request. The model is responsible for handling all the data logic of the request. It means the model interacts with the database and handles all the validations such as saving, updating, deleting, of the data.
The controller should never interact with data logic directly, it always use model for interaction. This means controller never has to worry about how to handle the data. It’s only job is to tell model what to do and respond on what the model returns. That means model doesn’t have to worry about failure or success that’s all handle by the controller.
After the model sends response back to the controller, the controller needs to interact with the view to render the data to the user. The view only concerns about how to present the information controller sends. The view dynamically render the HTML based on the data send by the controller. View only cares about how to present the data and send back the final presentation to the controller. Controller will send this presentation as a response back to the user. The important thing to note about this design is that the model and view never interact with each other directly.
Any interactions between the model and view are done through controller, having the controller between the model and the view means the data presentation and data logic are completely separate. That makes complex application much easier.
Let’s take a real time example of how MVC handles request and response.
Imagine a user sends request of cats to the server and server send this request to the controller which handle the cats, now controller ask the model to return a list of all cats. Next the model queries the database as you can see in the diagram and return back the list of cats to the controller. If the response back from the mode was successful, then only the controller will ask to view to return a presentation of the list of cats. Now, view takes the list of cats from the controller and render the list into html page that can be use by the browser. The controller then takes that presentation and returns back to the user, if the model returned error instead of cats response, the controller will handle that error and will ask view to return a error message presentation and now this presentation will return to the user instead of list of cats. As you can see from this example the model handles all the data, the view handles all the presentation, and the controller just tells the model and view what to do.
The model handles all the data, the view handles all the presentation, and the controller just tells the model and view what to do.
My suggestion –
If you want to become a front end developer in future, start learning React as it uses in many MNC companies like Facebook, Netflix, Skype, Instagram, Airbnb, Tesla, and many more. Also, It has a large community which will help you to get lots of recourses for free.
If you have any queries related to React and front end development, comment below.
Written By –
React JavaScript library React JavaScript library React JavaScript library React JavaScript library