Foundation of “React”

1.React & its history

React is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

It was first deployed on Facebook’s News Feed in 2011 and later on Instagram in 2012. It was open-sourced at JSConf US in May 2013. React Native, which enables native Android, iOS, and UWP development with React, was announced at Facebook’s React Conf in February 2015 and open-sourced in March 2015.

2.Features of React

Below is the reasons, why should we choose react instead of others. what’s the most attractive features of React have

Easy creation of dynamic applications: React makes it easier to create dynamic web applications because it requires less coding and offers more functionality, as opposed to JavaScript, where coding often gets complex very quickly.

Improved performance: React uses Virtual DOM, thereby creating web applications faster. Virtual DOM compares the components’ previous states and updates only the items in the Real DOM that were changed, instead of updating all of the components again, as conventional web applications do.

Reusable components: Components are the building blocks of any React application, and a single app usually consists of multiple components. These components have their logic and controls, and they can be reused throughout the application, which in turn dramatically reduces the application’s development time.

Unidirectional data flow: React follows a unidirectional data flow. This means that when designing a React app, developers often nest child components within parent components. Since the data flows in a single direction, it becomes easier to debug errors and know where a problem occurs in an application at the moment in question.

Small learning curve: React is easy to learn, as it mostly combines basic HTML and JavaScript concepts with some beneficial additions. Still, as is the case with other tools and frameworks, you have to spend some time to get a proper understanding of React’s library.

It can be used for the development of both web and mobile apps: We already know that React is used for the development of web applications, but that’s not all it can do. There is a framework called React Native, derived from React itself, that is hugely popular and is used for creating beautiful mobile applications. So, in reality, React can be used for making both web and mobile applications.

Dedicated tools for easy debugging: Facebook has released a Chrome extension that can be used to debug React applications. This makes the process of debugging React web applications faster and easier.

3.JSX

JSX is a syntax extension to JavaScript. JSX is used with React to describe what the User Interface should look like.

By using JSX , you can write HTML strictures in the same file that contains JavaScript code.

render(){
return(
   <div>
       <h1>This is JSX code</h1>
   </div>
  ):
}

it is used with react to describe what the User Interface should look like.

4. Virtual DOM

Before starting Virtual DOM, let start first with What is DOM itself.

DOM stands for Document Object Model; it is an interface for both HTML and XML documents. In simple words, it is a UI of the application. As if there is any change in the application of UI, the DOM gets automatically updated to represent the change in a UI. It contains a node for each HTML document which is a structural representation of the web-page. As a web developer, it allows modifying the content through JavaScript which makes it easier to work on each node respectively.

React Keeps lightweight representation of the Real DOM in the memory , and that is known as the Virtual Dom
Virtual DOM is a virtual representation of the actual DOM. It is also an abstraction of the HTML DOM. Just like original DOM, it is also a tree structure having a node that list of elements and their attributes and contents. By using React Render function which helps to create a node tree out of the component, every object of actual DOM exists there is an object in virtual DOM also which is the same but it has no proper control to change the layout of the document.

When the state of an object changes, Virtual DOM changes only that object in the Real DOM instead of updating all the objects and this makes things really fast.