React ES6 - codingtube

React ES6 refers to the use of ECMAScript 2015 (ES6) features and syntax in React.js applications. React, being a JavaScript library for building user interfaces, can leverage the enhancements and additions introduced in ES6 to write more concise, readable, and efficient code. Here are some key features of ES6 commonly used in React development:

Table of Contents

1. Arrow Functions:

ES6 arrow functions provide a more concise syntax for defining functions, making code shorter and often clearer. They are commonly used in React components.

// ES5 function
function MyComponent() {
  // component logic
}

// ES6 arrow function
const MyComponent = () => {
  // component logic
};

2. Class Syntax:

ES6 introduced the class syntax, allowing developers to define React components using class components. Class components have access to the component lifecycle methods.

// ES5 React component
var MyComponent = React.createClass({
  render: function() {
    return <div>Hello, World!</div>;
  }
});

// ES6 React component
class MyComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

3. Destructuring Assignment:

Destructuring assignment allows you to extract values from objects or arrays and assign them to variables, which can be particularly useful when working with React props and state.

// ES5
var user = { name: 'John', age: 30 };
var name = user.name;
var age = user.age;

// ES6
const user = { name: 'John', age: 30 };
const { name, age } = user;

4. Template Strings:

Template strings provide a more flexible and readable way to concatenate strings, especially when defining JSX content or component templates.

// ES5
var greeting = 'Hello, ' + name + '!';

// ES6
const greeting = `Hello, ${name}!`;

5. Let and Const Declarations:

ES6 introduces let and const for variable declarations. let allows for variable reassignment, while const is used for constant values that shouldn’t be reassigned.

// ES5
var count = 0;

// ES6
let count = 0; // can be reassigned
const maxCount = 10; // cannot be reassigned

6. Spread Operator:

The spread operator (...) is used for creating shallow copies of arrays and objects. It’s handy when working with React state and props.

// ES5
var oldArray = [1, 2, 3];
var newArray = oldArray.slice();

// ES6
const oldArray = [1, 2, 3];
const newArray = [...oldArray];

7. Import and Export:

ES6 modules provide a more structured way to organize and import/export code in React applications.

// ES5
var React = require('react');
var ReactDOM = require('react-dom');

// ES6
import React from 'react';
import ReactDOM from 'react-dom';

Leveraging these ES6 features in React development can lead to more concise, readable, and expressive code. It’s a common practice in modern React projects to adopt ES6 syntax for improved maintainability and developer productivity.

React uses ES6. we all have to know about ES6. ES6 stands for ECMAScirpt6. ES6 was first published in 2015 so it is also known as ES6 2015.

ES6 is an updated version of javascript. And React uses that ES6 syntax. so let’s know all about ES6

Classes
Arrow Functions
Variable (let, const, var)

Class is a keyword-like function that is used to design code block-like functions. The class holds all properties to design a code block-based template

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

Syntax of ES6 constructor

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

How to Initialize this Class?

var name = new Name(“christo”);

the 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 syntax without parentheses?

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

All about this in the arrow function

in the arrow function, there is no binding like the regular function of this act. in regular function, this binding takes place either with a window document or a button

but in the arrow function, this only binding takes place with an object that defines 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