An Introduction To ReactJs

Before diving into what is react, how can we make apps, website etc. using react , how to start learning react let us first understand why learning react is so important in today’s era for web-based business. You know very well there are lot of frameworks available for UI designing so what makes React standout among the available frameworks or library.

React was created by Jordan Walke, a software engineer at Facebook, who released an early prototype of React called “FaxJS”. It came into existence in 2011. React is influenced by the likes of XHP which is a simple HTML component framework for PHP. As it is developed by software engineer at Facebook , it got a huge community support. React.JS tool receives 155K GitHub stars, over 1484 contributors and 30.4K GitHub forks. This open source framework has achieved huge popularity in the domain of web-based businesses.

According to Facebook-React is a JavaScript library for building user interfaces.

Here are the reasons why react is so popular

1). Declarative : In declarative style you tell react what should be done and let it figure out how to perform it unlike in imperative style you tell machine how to perform something. Declarative style is much better as you don’t have to care about the implementation. In order to provide better understanding imagine you are instructed to hang clothes. In imperative style you will perform like this

1. Go to bathroom
2. Put clothes in the bucket
3. Take it outside and hang it on the rope.

In declarative style:

I want my clothes to be hang on rope.

2. Component-based : A Component is one of the core building blocks of React.Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

In react component comes in two types

1. Functional component
2. Class component

This is just the basic overview of component. I will discuss component in detail in further parts.

3) Virtual Dom: Before learning what is virtual dom let first understand What is DOM to provide you better understanding of concept?

Document object model basically provides the structure for web elements. Dom represent document(let’s say HTML document) with logical tree.There are two parts to the DOM — the object-based representation of the HTML document and the API to manipulating that object. Like if we want to create or update some new element on html we need to call dom API. There would be no issues if we use it for implementing small stuffs but the problem arises when we have to update multiple pages every few seconds. To solve this issure virtual dom came into view. It can update the dom in more efficient way.

Unlike the earlier way it create the object based representation of html document. Since it is a javaScript object we can create and update it easily and frequently without caring about the real dom.

In react we can use ReactDOM library , where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM. whenever we update something in our jsx file all the objects that are there in the virtual DOM gets updated.As React uses the virtual DOM, even though we are re-rendering the entire stuff, only the parts that actually change are updated.

4) Single page Applications: According to wikipedia-

A single-page application (SPA) is a web application or website that interacts with the web browser by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages .

Let’s understand it by example suppose you are searching for some webpage at your browser and then your browser send a request to server to display the required page and the server do so. Every time you clicked something, a new request was made to the server and the browser subsequently loaded the new page. There is a lot of reloading , you have to wait until the page refreshes. This generally happens in earlier website .

But if you are using single-page application (SPA) like Twitter, Gmail, Facebook etc. When you visit the website for the first time the browser download a program in JavaScript so you don’t need to reload page every time. The page that the user sees is never completely wiped away. It provides you instant result instead of waiting for the client-server communication to establish. This saves a lot of time and bandwidth. It is much faster and provides a great user experience.

Every good things come with some cons too, like if you have a low-power devices, they will not work well with applications in terms of speed. As pages are not loaded every time so memory leaks can also happen because the may open for long time. It can quickly drain the battery of powered devices. It doesn’t perform well with SEO as SPAs only load a single page, it serves as a disadvantage when it comes to ranking on search engines.

This is just a introductory blog on react. Stay connected I will cover all topics on react to provide you clear understanding on this topic.