What is React Js?
Concept Of Virtual DOM
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.
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.
React and 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
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!