React ES6

 

React ES6

*      ES6 stands for ECMA script 6 version

*      ECMA script is the standardization of javascript programming language

ES6 Features:

*      Write less  and do more.

 

Some of the new features like:

*      Classes

*      Arrow Functions

*      Variables(let,const,var)

 

Features of ES6

CLASS:

A class is used to bind data as well as methods together as a single unit.Object acts like a variable of the class

ARROW:

To Write a shorter syntax for the function we use Arrow.

VAR:

If we use outside the function its called global variable.If we use inside the function its called local variable.

 

CONST:

Once we assign a variable as constant we never change it.

 

LET:

If you use var inside a for loop (or) any other block, the variable also available outside of that block or loop,so we use “LET” for overcoming from this problem.

If we use variable as let in block (or) loop,then the value only available inside the block only.

 

To run the app use the command >npm start

Creating Two Methods

 

Index.js file

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

 

class Demo{

  methodone(){

var a=5;

var b=10;

var c=a+b;

 

 ReactDOM.createRoot(document.getElementById('root').innerHTML=c);

  }

  methodtwo(){

    var a=50;

    var b=10;

    var c=a-b;

   

     ReactDOM.createRoot(document.getElementById('root').innerHTML=c);

      }

}

var mydemo=new Demo();

 

mydemo.methodtwo();

/*root.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>

);*/

 

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

 

 

Reactjs using in function

 

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

  var a=function(){

var a=5;

var b=10;

var c=a+b;

 

 document.getElementById('root').innerHTML=c;

  }

  a();

/*root.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>

);*/

 

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

 

 

Output