What is ReactJS

ReactJs is a group or cloud even is a quiet efficient and also flexible JavaScript library for creating reusable UI Components.

It will be an open source, component based face end library this is quiet common, responsible just for the view layer of the software application. It was initially developed and maintained by facebook and later used its products like whatsapp and also instagram.

What is the foremost goal of ReactJS is to develop the interface that improves the speed of apps. It uses virtual DOM which improves the performance of the app. This is having the component and data patterns that progresses readability and manages to for larger apps.

How to install ReactJS?

There are two ways to line up an environment for successful ReactJS application.

1. Using the npm command
2. Using the create-react-app command.

1. Using the npm command

How to install NodeJs and NPM?

NodeJS and NPM are platforms may develop any ReactJS application.we can install NodeJS and NPM package by the link given below.

https://www.javatpoint.com/install-nodejs-on-linux-ubuntu-centos

To verify  NodeJS and NPM use command shown within the below image

Install react and react DOM

Create a root folder with the name reactApp on the desktop or where we  like, we create it on the desktop. You create the folder directly or using the command given below as

You need to write the code for a package.json file. To create any module, it is important  to return with a package .json file are available in project folder.

javatpoint@root:~/Desktop/reactApp> npm init -y 

After creating a package.json file, 

you have to respond and its DOM packages will use frequent npm command the terminal window.

javatpoint@root:~/Desktop/reactApp>npm install react react-dom –save  

The main features of ReactJS

1. JSX-This JSX is called as the  javascript syntax extension. That is not necessary to use JSX in react development,but it’s suggested.
2. Components-React is all about components. We’d highly value more to consider   everything as component. The one which is facilitated your maintain the code working on larger scale projects.
3. Unidirectional data flow and Flux-React accepts a particular way  data flow which makes it easy to reason about your app. Flux is also a pattern that  helps keeping your data unidirectional.
4. License-React is licensed under the facebook Inc. Documentation is licensed under CC By 4.0

The advantages

• This uses virtual DOM which is javascript object. This will have a progress apps performance, since JavaScript virtual DOM is quicker than regular DOM.
• Can be used on client and server side like  other frameworks.
• Components and data patterns will increase the quality of readability, which helps to need care of larger apps.

React Limitations

1. It covers the view layer of app, actually still should choose other technologies to adapt a  whole complete tool set for development.
2. Uses inline template and JSX which can be capable to seem awkward to some developers.

React Multiple Checkbox

We can set many checkboxes on the basis of user requirements.we can set options to select fruits and users as choices. If users want to select many one options from the list. In the below example we can take array of one category which will contain react, laravel, PHP and angular. We can show dynamic multiple checkboxes by using the map loop.We can name the variable named “checkedItems”to store all the information of the checkboxes that is chosen by the user. The below example is

import React, { Component } from 'react';  
import { render } from 'react-dom';  
         
class App extends Component {  
  constructor() {  
    super();  
    this.state = {  
      categories: [  
        {id: 1, value: "Angular1"},  
        {id: 2, value: "React1"},  
        {id: 3, value: "PH1P"},  
        {id: 4, value: "Larave1l"}  
      ],  
      checkedItems: new Map()  
    };  
    
    this.handleChange = this.handleChange.bind(this);  
    this.handleSubmit = this.handleSubmit.bind(this);  
  }  
      handleChange(event) {  
        var isChecked = event.target.checked;  
        var item = event.target.value;  
           
        this.setState(prevState => ({ checkedItems: prevState.checkedItems.set(item, isChecked) }));  
  }  
       
  handleSubmit(event) {  
    console.log(this.state);  
    event.preventDefault();  
  }  
    render() {  
    return (  
      <div>  
        <h1> Examples of Multiple Checkboxes in React </h1>  
    
        <form onSubmit={this.handleSubmit}>  
           
          {  
            this.state.categories.map(item => (  
              <li>  
                <label>  
                  <input  
                    type="checkbox"  
                    value={item.id}  
                    onChange={this.handleChange}  
                  /> {item.value}  
                </label>  
              </li>  
            ))  
          }  
             
          <br/>  
          <input type="submit1" value="Submit" />  
        </form>  
      </div>  
    );  
  }  
}  
render(<App />, document.getElementById('root'));