Introduction to React JS

ReactJS is a Javascript Library used to develop client side user interface components. ReactJS is a general purpose UI library that is used for the view layer of the application. It is an open source JavaScript Library.  ReactJS was developed by “Jordon Walke” who was a software engineer at Facebook. React was developed in 2011 and it was released in the public in May 2013.

In the MVC architecture React is used for VIEW part. React is used to create reach user interfaces that run on the browser. ReactJS focuses on rendering and event handling functionality. Rendering is the conversion of data that describes the state of user interface in the DOM (Document Object Model) that browser uses to produce user interfaces. Reacts event handling lets the programmer detect when the user interacts there program and to specify how the program should respond.

ReactJS application consists of multiple components each component contains HTML code that is reusable. We can say everything in React is a component. The components are reusable and can be nested with other components in the application to build complex user interfaces.

DOM is an object which is created by the browser each time a web page is loaded. It manages the user interfaces and when any modifications are done then a new DOM is created for the same page. This repeatedly creation of DOM makes additional memory usage and affects the performance of the application.

React also uses the same data flow the difference is that it does not directly operate on the DOM immediately. Instead it operates on a virtual DOM. React virtual DOM exists in the memory and it’s is a clone representation of the browser’s DOM.  When we create a React component we do not write on the DOM we write on virtual DOM that React will use to turn into the actual DOM. It means instead of updating entire DOM each time React updates virtual DOM after the virtual DOM has been updated, React decides what changes are to be made to the actual browser’s DOM.

ReactJS uses virtual DOM to calculate User Interface changes. The virtual DOM provides better performance because it only changes the updated portion of DOM instead of rendering the complete DOM on each change.

Advantages of React

Provides better tools for coding
Development of dynamic web application requires complex html coding React JS solved this issue by providing less coding. React uses the JSX (Javascript Extension) which lets HTML syntax to render UI components.

Better performance
ReactJS uses virtual DOM which helps to enhance the performance of the application. The virtual DOM is a cross-platform and programming API which handles HTML and XML.  When the actual browser DOM is entirely updated after each change it slows down the application performance. ReactJS resolved this problem by introducing virtual DOM.  The virtual DOM works fast as it only changes individual DOM elements instead of reloading complete DOM every time. The React Virtual DOM exists in the memory and it’s a clone representation of the actual browser’s DOM. When we write React component we are actually writing virtual components that react will turn into the DOM. This avoids updating the actual DOM entirely after each change instead ReactJS only updates the partial portion that has been changed.

Components Reusability
React application consists of components. Everything in React is a component and each component has its own logic. React components are responsible for outputting HTML code which can be reused wherever needed. The components can be nested with other components this allows easy building of complex applications.

Javascript Library
ReactJS is a flexible Javascript Library. The flexibility that the JavaScript library provides allows developer to freely choose what the application development needed.

Disadvantages of React

View part
ReactJS covers only the VIEW layer of MVC structure means only the UI part is developed and managed by ReactJS. So we still need to use other technologies for a complete tooling set for project Development. React totally depends on other technologies that provide APIs.

Continuously developing
ReactJS is getting developed and updated continuously this makes it hard for the developers to learn and adopt the new changes with all the continuous updates. The developers need learn new ways to achieve things with a newly updated way.

About the Author: allcodebuzz

You might like

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *