ReactJS

  Melvin       January 31, 2020

React.js is an open-source JavaScript library for building front end web applications. The word react means when you react to something, it responds to it. It is used as a base development of single-page applications (SPA). A single-page application (SPA) is a web application that interacts with the user without reloading the entire page rather than rewriting the current page. React.js was created by a software engineer named Jordan Walke on May 29, 2013. This is maintained by Facebook.

React.js providing a view layer for data rendering using HyperText Markup Language (HTML) AND JSX (JavaScript XML) with the JavaScript code.

DOM MANIPULATION
The Document Object Model (DOM), is a programming API for HTML and XML. It represents how our HTML & XML documents are displayed on our browser.

Is DOM manipulation slow?
Any changes or updates to DOM is fast as it can be regarded as a tree data structure. If you have more UI components, the DOM updates become expensive. This is because the updated elements have to be re-rendered for every DOM update.

To overcome React Js introduced a new concept known as Virtual Dom

The virtual DOM is only a virtual representation of the DOM. A new virtual DOM tree is created when the state of the elements is changed. The new tree is compared with the previous one.

A virtual DOM is made when new components are added to the UI. This virtual DOM is spoken to as a tree. The components on this tree are nodes. When this is finished, to guarantee negligible tasks on real DOM, the virtual DOM computes the most ideal technique to make changes to real DOM. Consequently, lessening the presentation cost of updating the real DOM. So, there is no need to re-rendered for every DOM update.

React.js features

1. Virtual DOM - It rendering the subtree of DOM elements into the rendering of the DOM on state change Use different algorithms with the browser DOM tree to identify the changes. so, there is no need to re-rendered for every DOM update compared with traditional Dom.

2. Unidirectional data flow - As the name indicates data can be transferred only one way to other parts of the application. We consider DOM as a tree-like structure hence it has parent-child relationships so when we update any child node does not affect parent because the data flows in downward i.e. from parent to child.so the chances of child state do not affect parent state.

3. JSX (JavaScript XML) - It helps in making our writing code easier and faster. JSX lets us write HTML (not 100%) code.

4. Components - The applications you develop are made up of pieces called components. Components make the task of building UIs much easier.

React.js installation
Step 1: Install Create ReactApp
npm install -g create-react-app
Step 2: Let us create a react using the following command
create-react-app HelloWorld
Step 3: Now switch to project directory
Step 4: Now type the following command in order to run the server
C:helloworld>npm start
Step 5: Open URL in a browser to view the output

File Structure
my-app
├── build
├── node_modules
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── serviceWorker.js
├── .gitignore
├── package.json
└── README.md

hello world application in react js

Open src->App.js
Look in the helloworld directory, and you will find a src folder. Inside the src folder there is a file called App.js, open it and it will look like this:
/ helloworld/src/App.js import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return (

< img alt="logo" src = "{image path}" />

Edit src/App.js and save to reload.); } } export default App;
Delete the existing code and paste new one

Changes are visible immediately after you save the file, you do not have to reload the browser.
import React, { Component } from 'react'; class App extends Component { render() { return (Hello World!); } } export default App;
The selection of the best web application development company is the primary challenge for a client. An ideal web development company ought to be the success in assisting client’s services, service information and maintain communication in produce leads for the business and many others.

By concluding, the service and product knowledge makes Infocom Software, the best web, game, and mobile application development company in India. With our unique and premium website crafting using advanced technology, we remain stable web development company and which assure you a quality website and making your business a successful one.

______________________________________________________________________________
Author : Asha Antu