What is React?
What is React?
- An Open source library developed and maintained by the developers of Facebook, Instagram and also a larger community of contributors.
- A declarative, efficient, and flexible JavaScript library for building user interfaces.
- Makes developing a large scale, single page application easier.
- Supports all the syntax of ECMA Script 2015/ES6.
- Can perform client-side as well as server side rendering.
What is exciting here?
For creating dynamic UI, DOM was never an optimized solution. Consider a page displaying a list containing 10 items and one is getting updated. While performing update, DOM will rebuild the entire list making it work 10 times more than what is necessary. This inefficiency can be overcome using Virtual DOM.
Virtual DOM is an abstract, lightweight copy of DOM. It can be changed as and when we want and then can be saved to the real DOM. Whenever a change occurs, Virtual DOM efficiently rerenders the DOM. It is much faster than DOM.
Virtual DOM (Document Object Model) has the same properties as a real DOM object.
React postulated the idea of Virtual DOM. It is commonly used in PayPal
, Apple
and Facebook
.
Virtual DOM
Is React really fast?
DOM
- Reading and writing is really slow in DOM.
- Changing the whole DOM each time when there is an update will slow down the page.
Virtual DOM
- Has rapid DOM rendering speed because manipulating the virtual DOM is much faster, because nothing gets drawn onscreen.
- Only the required part of DOM is updated.
Need of React
Why ReactJS?
- Faster and better, thanks to Virtual DOM.
- Can be used on both Client side and server side. - If your app is more of dynamic data, you can go with client side scripting where you need not request the DOM for every change. - Static page can be rendered using server side scripts. - A good mixture of both helps maintain the page safe and efficient.
- Helps to maintain the readability of apps using components which is discussed later. - Can easily update the state by refering the components.
Need of React
React Features
Components
– easier to maintain larger apps.JSX
– an optional feature of React that is a JavaScript syntax extension.
Restraints
But Still..
- React only covers view layer of the app, so you still need to choose other technologies to get a complete tooling set for development.
- React is using
inline templating
andJSX
that might be awkward to some developers.