Author : Asha Antu ,  Javascript Library ,  10-10-2019

React js is an open source JavaScript library for building front end web applications. The word react means When you react to something, you respond to is used as a base development of single page applications (SPA). A single page applications (SPA) is a web application that interact with user by 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 Hyper Text Markup Language (HTML) AND JSX (JavaScript XML) with the JavaScript code.


The Document Object Model (DOM) IT IS A PROGRAMMING Api for HTML and XML.It represents how our HTML & XML documents are displayed on our browser.

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 introduce a new concept Virtual Dom 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 algorithm 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 the changes 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

step1 : Install Create ReactApp
npm install -g create-react-app
step2 : Lets create a react using following command
create-react-app helloworld
step3 : Now switch to project directory
step4 : Now type the following command in order to run the server
C:helloworld>npm start
step 5 : Open URL in browser to view the output

File Structure
├── 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

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 is 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;
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 other.

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.

You might also look

blog one

Web Services

WebService (WS) is a technology, process, and software paradigm that provides support for busines...

Read More
blog one

Knockout JS

KnockoutJS is basically a library written in JavaScript, based on MVVM pattern that helps develop...

Read More
blog one
Game Development

Virtual Reality

Virtual Reality is a fascinating way to travel using nothing more than the power of technology. W...

Read More