Getting Started With React Programming

React is a JavaScript library for building user interfaces. It was developed by Facebook to facilitate building with interactive, stateful and reusable UI components.

Introduction
 
In this article, I will explain an overview of React; like what is React, who developed it, and what are the advantages and limitations.
Prerequisites
 
Following are the prerequisites for React Programming:
 
If you're going to learn about React, you should be familiar with HTML and JavaScript. You should know the basic concepts of JavaScript like -
  • classes
  • function and arrow function
  • some ES6 features like let and const
  • etc. 
For a quick overview of JavaScript, click here.
 
What is React?
 
Basically, it is a JavaScript library for building user interfaces. It is developed by Facebook to facilitate the building with interactive, stateful, and reusable UI components.
 
It is declarative, efficient, and flexible JavaScript library for building user interfaces. We can say that it's a new type of JS library, offering a new approach to build/update a View.
 
It creates a virtual DOM to track the changes when the application state is updated and uses the virtual DOM to update only those parts of a page which have been changed.
 
History

Jordan Walkey - a developer at Facebook Inc.

It is created by Jordan Walkey. He is a developer at Facebook. It was first deployed on Facebook's Newsfeed in 2011 and after that, on Instagram in 2012.
 
React by Facebook 
 
Where To Use React
 
As we discussed above, it's a JavaScript library so, it is possible to use React everywhere where JavaScript code can be executed. It can be used with -
  • a new application or
  • with an existing application.
In the upcoming article, I will explain how we can use it with a new web application as well as an existing web application.
 
Virtual DOM 
 
React keeps in memory a simple object tree of all components which is called virtual DOM whenever the application state changes and it is required to update the UI. 
 
In the background, it uses some algorithms to find the minimal set of operation to bring the view from the previous state to new state. In the upcoming article, I will explain more about virtual DOM using programming example along with the graphical view.
 
Advantages & Limitations
 
Followings are the advantages and limitations of React.
 
Advantages
  • It uses virtual DOM
  • By the usage of virtual DOM, it will improve app performance because virtual DOM is much faster than actual DOM.
  • It's components improve readability which help us to maintain larger apps.
  • It can be used with client and server side as well as with other frameworks like NodeJS and Angular which are the JavaScript framework for building the server-side application.
Limitations
 
It covers only the view layer of the apps.
 
Get a React 
 
Either we can get React JS libraries by using npm (Node Package Manager) or by CDN.  
  1. <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>  
  2. <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>  
This version is only meant for development process. It is not suitable for production. Minified and optimized version is available at following cdn link. 
  1. <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>  
  2. <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>  
For more about CDN click here. In the next article we will see how to get React using npm. 
 
Glimpse of React Programming
 
Folliwng are the example code snippets of React js. 
  1. //<index>.js file  
  2.   
  3. import React from 'react';  
  4. import ReactDOM from 'react-dom';  
  5.   
  6. ReactDOM.render(  
  7.   <h1> React Sample Code Snippet </h1>  
  8.   <p> It is sample code snippet written in React </p>  
  9.   document.getElementById('MyDiv');  
  10. );  
  1. <html>  
  2.   <head>  
  3.   <title>React Code Snippet </title>  
  4. </head>  
  5. <body>  
  6.   <div id="MyDiv" > </div>  
  7. </body>  
Summary
 
In this article, I explained about the fundamental overview of ReactJS. In the upcoming article, I will explain about the installation process & environment setup.