Skip to content
codingtube

codingtube

Coding and Programming tutorials

  • javascript
  • React
  • ES6
  • React js
  • coding
  • ffmpeg
  • java
  • programming
  • information
  • coding
  • Privacy Policy
  • Twitter trends
  • Age Calculatore
  • Codingtube Community
  • YouTube Tags Generator
  • About
  • Toggle search form

React ES6

Posted on May 26, 2021December 2, 2021 By christo No Comments on React ES6

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 ?
  • What is Class in ES6 ?
  • inheritance in ES6 Class
  • Super in ES6 inheritance class
  • Arrow function syntax in ES6
  • Arrow function syntax with header ?
  • Arrow function systax without parentheses ?

. 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

React.js Tags:ES6, javascript, React

Post navigation

Previous Post: React.StrictMode tag in React in App.js?
Next Post: Rendering of HTML in React

Related Posts

Rendering of HTML in React React.js
React js directly in HTML React.js
JSX React.js
React js application modification after installation ? coding
What is Props in React ? React.js
React.StrictMode tag in React in App.js? React.js

Leave a Reply Cancel reply

You must be logged in to post a comment.

Recent Posts

  • Affiliate Marketing Principles
  • The Basics You Need to Know About Affiliate Marketing
  • Affiliate Marketing Options
  • All About Affiliate Marketing
  • Classification of Database Management Systems
  • Three-Tier and n-Tier Architectures
    for Web Applications
  • Two-Tier Client/Server Architectures for DBMSs
  • Basic Client/Server Architectures in DBMS
  • Centralized DBMSs Architecture in DBMS
  • Tools, Application Environments, and Communications Facilities in DBMS

Categories

  • Affiliate marketing (5)
  • Algorithm (43)
  • amp (3)
  • android (223)
  • Android App (8)
  • Android app review (4)
  • android tutorial (60)
  • Artificial intelligence (61)
  • AWS (3)
  • bitcoin (8)
  • blockchain (1)
  • c (5)
  • c language (105)
  • cloud computing (4)
  • coding (4)
  • coding app (4)
  • complex number (1)
  • Computer Graphics (66)
  • data compression (65)
  • data structure (188)
  • DBMS (44)
  • digital marketing (9)
  • distributed systems (11)
  • ffmpeg (26)
  • game (3)
  • html (6)
  • image processing (35)
  • Inequalities (1)
  • information (4)
  • java (212)
  • java network (1)
  • javascript (9)
  • kotlin (4)
  • leetcode (1)
  • math (21)
  • maven (1)
  • mysql (1)
  • Node.js (8)
  • operating system (109)
  • php (310)
  • Principle Of Mathematical Induction (1)
  • programming (6)
  • Python (4)
  • Python data structure (9)
  • React native (1)
  • React.js (22)
  • Redux (1)
  • seo (4)
  • set (12)
  • trigonometry (6)
  • vue.js (35)
  • XML (3)

sitemap

sitemap of videos

sitemap of webstories

sitemap of website

  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy
  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy

© codingtube.tech