All you need to know about REACT.
Hello readers, today we gonna talk about react and its working. After reading this blog you will have a strong grip on working of reacts. By reading this you will become comfortable talking about React.
What is React?
React is basically a javascript library, used in front end development.It is used to build interactive user-interfaces in a efficient way by writing less amount of code. It makes a developer life easy .It is also used to build single-page web applications and web sites as well.
Why was react created ?
React was created by Meta engineers. It’s main purpose was to assist developers and allow them to create user interfaces in a fast and efficient way.
Brief Introduction to react
As I have told you earlier that is a javascript library. We know that single-page web applications or webpages are very fast because they are easier for the browser to read and render. Now, what react actually does to such SPA’s (single page web applications) is it can create different and specific components of that page so that we can design and place it perfectly where we want to.
Moreover, in order to make development easy and fast react’s pre-made components are there to assist us along our development journey.
Here is an example of react pre-made components so that you can grasp the concept.
In react we have pre-written code for adding some components like maps, video players, etc. to your web page. With this, you don’t need to code everything from scratch because there is a saying that
“If someone had already made it then don’t waste
Your time in inventing the wheel again”
Working of React
Now we will discuss how actually react works and in what sense it is very useful. I will explain to you how react makes our web pages fast and responsive.
As we know that our data is structured as DOM (document object model) on the web-server called as Browser DOM.
Now if we want to update anything on our page it will actually have to be updated on the browser DOM. when a change occurs, the browser DOM is first updated completely from top to bottom as a new DOM. After the creation of the new DOM, it is then recalled back by the browser to render the page. Now think for a moment that, that it is a very time-consuming process. It will ultimately slow down our site
Facebook engineers came up with an amazing idea to solve this problem. They created react to cope with such a problem. In react, there is a virtual DOM that is the exact copy of the browser DOM. Virtual DOM is more accessible than the browser DOM. So whenever a change occurs on the webpage first the virtual DOM is updated and then it will be compared with the previous virtual DOM, if there is any change between the two DOMs then only the required component is updated in the actual browser DOM and not the whole DOM. So this was really a good idea to solve that slowing down problem. Because now only a specific component is updated and not the whole DOM.
Principle of React Fiber Architecture
According to this principle, when there are a lot of changes required to be done in the browser DOM then don’t update the virtual DOM immediately. You might be confused that what this actually means. It means that in real the react developers set priorities for the data to be updated first. The data that is currently displayed to the user is of the highest priority therefore first the changes will be done in that visible data while other changes will be done later on, because they are less important.
This is how react actually works
I hope you got some benefit reading it, if you do enjoy it reading it then kindly do follow us.
If you want to know more about react , click here