Introduction to ReactJS

In this article we will cover below points

>> What is ReactJS ?
>> Why ReactJS ?
>> Advantages of ReactJS
>> Limitation of ReactJS

What is ReactJS ?
ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI components. It is an open-source, component-based front end library which is responsible only for the view layer of the application. It was initially developed and maintained by Facebook and later used in its products like WhatsApp & Instagram. Now-a-days, most of the websites are built using MVC (model view controller) architecture. In MVC architecture, React is the 'V' which stands for view.

A ReactJS application is made up of multiple components, each component responsible for outputting a small, reusable piece of HTML code. The components are the heart of all React applications. These Components can be nested with other components to allow complex applications to be built of simple building blocks. ReactJS uses virtual DOM based mechanism to fill data in HTML DOM. The virtual DOM works fast as it only changes individual DOM elements instead of reloading complete DOM every time.

Why ReactJS ?
Many JavaScript frameworks are available in the market(like angular, node), but still, React came into the market and gained popularity amongst them. The previous frameworks follow the traditional data flow structure, which uses the DOM (Document Object Model). DOM is an object which is created by the browser each time a web page is loaded. It dynamically adds or removes the data at the back end and when any modifications were done, then each time a new DOM is created for the same page. This repeated creation of DOM makes unnecessary memory wastage and reduces the performance of the application.

Therefore, a new technology ReactJS framework invented which remove this drawback. ReactJS allows you to divide your entire application into various components. ReactJS still used the same traditional data flow, but it is not directly operating on the browser's Document Object Model (DOM) immediately; instead, it operates on a virtual DOM. It means rather than manipulating the document in a browser after changes to our data, it resolves changes on a DOM built and run entirely in memory. After the virtual DOM has been updated, React determines what changes made to the actual browser's DOM. The React Virtual DOM exists entirely in memory and is a representation of the web browser's DOM. Due to this, when we write a React component, we did not write directly to the DOM; instead, we are writing virtual components that react will turn into the DOM.

One of the best features of React is that its learning curve is very simple. Anyone with basic previous knowledge in programming can easily start with React. If you want to learn React, you should have the following basic knowledge.

• HTML and CSS
• JavaScript
• JS specially with NPM
• Webpack and babel (not mandatory)

JSX

JSX stands for the “JavaScript Syntax XML." JSX is a preprocessor step that adds XML syntax to JavaScript. JSX is syntax extension to JavaScript. React uses JSX for templating instead of regular JavaScript. We can write code without JSX but there are benefits of using JSX like.

• Easy to use and a more human readable syntax.
• Provide compile time error checking
• JSX is fast because it perform the optimization when convert the code into JavaScript.
• Write the code into HTML and XML syntax.

React Features

• JSX − JSX is JavaScript syntax extension. It isn't necessary to use JSX in React development, but it is recommended.
• Components − React is all about components. You need to think of everything as a component. This will help you maintain the code when working on larger scale projects.
• Unidirectional data flow and Flux − React implements one-way data flow which makes it easy to reason about your app. Flux is a pattern that helps keeping your data unidirectional.
• License − React is licensed under the Facebook Inc. Documentation is licensed under CC BY 4.0.
• Open Source tool developed by Facebook
• Ideal for large and single page applications
• Using React Native, we can create mobile applications for iOS and Android with native looks and features.
• React uses reusable component so we don’t need to write the same code multiple times but we can reuse the components.
• Uses high speed Virtual DOM
• Easy to understand the JSX syntax.
• One way data binding.
• Supports SEO
• Doesn’t use Shadow DOM

Advantages of ReactJS

• Uses virtual DOM which is a JavaScript object. This will improve apps performance, since JavaScript virtual DOM is faster than the regular DOM.
• Can be used on client and server side as well as with other frameworks.
• Component and data patterns improve readability, which helps to maintain larger apps.

React Limitations

• Covers only the view layer of the app, hence you still need to choose other technologies to get a complete tooling set for development.
• Uses inline templating and JSX, which might seem awkward to some developers.
• React only focuses on the View section of an application so, if you are developing a large application then you have to include some other libraries to handle the other parts of applications.
• Fewer features compared to any monolithic framework such as AngularJS. For example in Angular routing is inbuilt but in React you have to include some external files to perform the routing.
• React JSX so Babel is used to transpile the JSX into plane JavaScript and Webpack & npm is used to build and run the application. If you are not familiar with these technologies and you get any error into code then it will be difficult for you to handle and resolve the error.
• Difficult to configure with other MVC frameworks like AngularJS.

Where to Use ReactJS

• If you are developing an application where data is frequently changes on view then React may be a best option.
• you are developing an application that mainly focused on view section and needs more user functionality at view layer then React is best option for such application.

   Summary

  In this tutorial we discussed introduction to ReactJS. If have any question related to this topic then give your feedback.