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.
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.
- <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
- <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.
- <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
- <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.
//<index>.js file
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1> React Sample Code Snippet </h1>
<p> It is sample code snippet written in React </p>
document.getElementById('MyDiv');
);
- <html>
- <head>
- <title>React Code Snippet </title>
- </head>
- <body>
- <div id="MyDiv" > </div>
- </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.