React ES6 - codingtube

React uses ES6. we all have to know about ES6. ES6 stands of ECMAScirpt6. ES6 was first publish on 2015 so it is also know as ES6 2015.

ES6 is update version of javascript. And React uses that ES6 syntax. so let’s kinow all about ES6

Table of Contents

. What we ll learn in ES6 ?

Classes
Arrow Functions
Variable (let ,const,var)

What is Class in ES6 ?

Class is keyword like function that is used design code block like function. Class holds all properties to design code block based template

ES6 Follow all rules like object oriented based programming. like constructor

Systax of ES6 constructor

class Name {
constructor(name) {
this.name = name;
}
}

How to initialize this Class ?

var name = new Name(“christo”);

method in class ?



class Name {
constructor(name) {
this.name = name;
 }
writename(){
return "my name is " + this.name ;
}
}
console.log(new Name("yashpal").writename());

inheritance in ES6 Class

class Name {
  constructor(name) {
    this.name = name;
  }

  writename() {
    return "my name is " + this.name ;
  }
}

class Name2 extends Name {
  constructor(name1, name2) {
    super(name1);
    this.name2 = name2;
  }  
  showname() {
      return this.writename() + ', another name is  ' + this.name2;
  }
}
name2 = new Name2("yash", "mallu");
console.log(name2.showname());

Super in ES6 inheritance class

through super in ES6 inheritance class we call the parent constructor to access this method

Arrow function syntax in ES6

name = () => "i'm yashpal singh";

Arrow function syntax with header ?

name = (val) => "my name is" + val;

Arrow function systax without parentheses ?

name = (val) => "my name is" + val;

All about this in arrow function

in arrow function there is no binding like regular function this act. in regual function this binding take place either with window document or button

but in arrow function this only binding take place with object that define the arrow function

Example:this in regular function

<script>
class Regularfunction {
  constructor() {
    this.color = "Red";
  }

//Regular function:
  changeColor = function() {
    document.getElementById("demo").innerHTML += this;
  }
}

Regularfunction = new Regularfunction();

//The window object calls the function:
window.addEventListener("load", Regularfunction.changeColor);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", Regularfunction.changeColor);
<script>
<!--html button-->
<button id="btn">Click Me!</button>

Output:[object Window][object HTMLButtonElement]

Example:Arrow function with this:

<script>
class Regularfunction {
  constructor() {
    this.color = "Red";
  }

//Arrow function:
  changeColor = () => {
    document.getElementById("demo").innerHTML += this;
  }
}

Regularfunction = new Regularfunction();

//The window object calls the function:
window.addEventListener("load", Regularfunction.changeColor);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", Regularfunction.changeColor);
<script>
<!--html button-->
<button id="btn">Click Me!</button>

Output:[object Object][object Object]

var scope in ES6 ?

var outside of function has global scope

var inside function belong to that function

var has no block scope e.g loop

let scope in ES6 ?

let has only block scope

<script>
for(let x=0;x<10;x++){
console.log(x);
}
console.log(x);
</script>

Output:1 2 3 4 5 6 7 8 9

const scope in ES6 ?

const has block scope and it’s value can’t be changed after initialization