What is React Js?
If one has to answer what is react js then, React is a Javascript library that one attaches to any existing stack and makes UI dynamic. React was developed by Facebook in 2011 for Facebook only, and they made the code public by 2013. Before reacting to Js we had a primitive concept of DOM, but with react we have virtual DOM. Its an interesting concept about which in detail we will discuss just below but for starters, DOM which is a Document object model where when a browser loads a webpage it converts all the elements as an object with the root as a document. Now, when you add or modify a data on a web page, besides its simple when you click load more nodes get attached to the tree, but if you alter some data you need to refresh it again. Earlier on Facebook, they used to update notification with +1 so that when you click on it a webpage gets reloaded and so does data. Now, with virtual DOM where you get to modify the node in real-time as all the elements now get to are treated as attachable separate components whose value of nodes change with the script. These are too many terminologies, lets talk about them one by one.
Concept Of Virtual DOM
Now you know what is react js, so let’s move onto why react js? As stated above, the Document Object Model is a tree-based object notation of the webpage in the browser. And with the help of javascript you can change the elements and their value. So, when you write window.alert() or document.getElementById() you are using javascript to change HTML tags which now are objects so, window and document are objects here.
Now, here is the problem lies. Think of that there is a list of ten items and you change the value of only one. The browser would reload the entire list that is of 10 items. How slow it can get!!! So, what is the solution? we need updating at only changed point! Here, comes the concept of virtual DOM. Consider Virtual DOM as xerox of DOM. IT is not DOM, it is still virtual that is still the real web page won’t get affected with whatever you change in virtual DOM.
Now, operations of Virtual DOM is much faster than DOM as no involvement of browser is here, because it’s just a copy! Any change you do use JS would get reflected in the Virtual DOM. Now, the browser would compare DOM and virtual DOM and just update the changes pretty much like how conflicts are handled in VCS making it work in a much more efficient manner.
Component-Based UI
Both React and Angular have embraced the whole component-based UI structure! Now, this has become an inevitable part of web development. Component-based UI has divided the entire web application into reusable separate, independent units that interact with the server independently allowing the DOM to change dynamically. Both component-based UI and Ecmascript 2015 have made web development, a more like coding experience because now we have classes, encapsulation at its best with injectable components. So, every time we answer what is react js, component-based development goes in hand!
For example, every site you see has shared UI with header is the same, the footer is the same only the content of the body changes dynamically. That means there is a single component for header, one for the footer and shared CSS for the content body but if each route, there is a separate call to the server and hence database.
Babel and Javascript
We are going to talk about JSX below, but the moment JSX=JS+XML and you write react to render the pages in JSX. Now, the browser doesn’t get it! He only understands Vanilla Javascript that is plain javascript. Just like in Angular Typescript is converted to JS, here in react it is done by Babel. Babel is a compiler that does the job of conversion of JSX. Though react is just a library that can pretty much be attached to any existing application, writing code in JSX is pretty convenient and short also, which we will talk next.
React and JSX
We can’t complete this ‘what is react js blog’ unless we talk about JSX! If you have worked with Angular and hence Typescript, then you are pretty much-using typescript which is a superset of javascript in the components and angular predefined tags for two way data binding and additional functionalities. But here, you get to work with the markup language and script together in the form of JSX.
Let’s take a basic example. you declared a variable ‘name’. And using its value in the curly braces as one-way data binding, which again would be talked in detail below.
And use it in your render() method. This is the beauty of React where you get both markup and scripting together in a concise
manner.
One-way Data Binding in React
You must have heard of two-way data binding in Angular which is awesome!!! But since React is a library there is no separate HTML and Script concept as we have JSX. In two-way data binding any change in the input element is reflected in the component as both are bounded but when we talk about one way data binding Input element cannot reflect changes in the JSX code, unless and until you use change event. Angular automatically use to do this with watchers and timeouts which has its pros and cons, but react has restricted only one flow of data, but at least it lets dynamically change the render component which wasn’t the case when AJAX was used as you had to refresh the page, but now changes are reflected on the independent components via one way data binding.
Hope, this has answered your queries on what is react js and why should you use it! Happy Learning!
from Engineer Diaries https://ift.tt/34LdoPy
0 Comments