Skip to content
Home » Blog » ES6 In ReactJS | ReactJS Tutorial #3

ES6 In ReactJS | ReactJS Tutorial #33 min read

ES6 In ReactJS

Hey Programmers, To Another Part of the ReactJS Tutorial Series In this Post We Will Be Learning What is ES6 In ReactJS. So Before Getting Started With the Post If You Like the Work Of Whole Mr Programmer’s Team You can Be a Part Of Mr Programmer By Enrolling In Our Subscription Plans Starting From $1 Onwards ONLY.

Become a Member Of Mr Programmer’s Team

What is ES6?

ES6 Stands For ECMAScript, It was created to stabilize JavaScript and ES6. It is the 6th Version of ECMAScript It was Published In 2015 And It Was Named As ECMAScript 2015.

Classes In ES6

A class is a function, But Using the Word Function We Say It as a Class, It is Used to Assign Properties In the constructor() Method.

class Fruits {
  constructor(name) {
    this.brand = name;
  }
}

Using Methods With Classes

class Fruits{
  constructor(name) {
    this.fruit= name;
  }
  
  newMethod() {
    return 'I have a ' + this.fruit;
  }
}

const Fruits_List = new Car("Apple");
Fruits_List.newMethod();

Arrow Function In ReactJS

The Following Syntax Is Without the Arrow:

web = function() {
  return "I Like This Website!";
}

And This Is With Arrow Function:

web = function() => {
  return "I Like This Website!";
}

ES6 Variables

Variables are Like a Contains We Use Variables to Store Data. To Create a Variable We Use the Keyword var. There are Three Different Ways to Assign a Variable In ES6:

  • var
  • const
  • let

Creating a Variable Using var Function

var a = 98;

Creating a Variable Using let Function

let a = 98;

Creating a Variable Using const Function

const a = 98; 

Arrays In ES6

An array is a data structure consisting of a collection of elements like variables or values Stored In It.

Creating an Array In ES6

const myArray = ['Ford','Mustang','Lamborgini'];

ES6 Destructuring

In Simple Words, Destructruing Means Combining Of Arrays or Objects With Some Stored Items In It.

Destructuring Arrays

The Following is Done Without the use of Destructuring Arrays:

const fruits = ['apple','banana','grapes'];

const fruit1 = fruits[0];
const fruit2 = fruits[1];
const fruit3 = fruits[2];

This is Done By Using Destructuring Arrays:

const fruits = ['apple','banana','grapes'];

const [apple,banana,grapes] = fruits;

Spread Operator In ES6

Spread Operator In ES6 React is Used to Copy All or the Existing Array or Objects In Stored In an Array.

const alphabets = [a,b,c];
const alphabets2 = [d,e,f];
cost ComibedAlphabets = [...alphabets..., ...alphabets2...];

ES6 Modules

JavaScript Modules Allow Us to Break Down Our Code In Smaller Pieces To Make Programming More Simple & Easier. ES6 Modules Has Two Types:

  • Import
  • Export

Export

We can Export a Function or Variable from Any File Into the Current One, There are Two Types Of Exports:

  • Named Exports
  • Default Exports

Named Exports

Exporting Functions One-By-One:

export const name = "Mr Programmer"
export const url = "www.mrprogrammer.in"

Exporting All the Functions at One Time:

const name = "Mr Programmer"
const url = "www.mrprogrammer.in"

export {name , url}

Default Exports

const message = () => {
  const name = "Mr Programmer";
  const url = 40;
  return name + ' is at' + url+ 'domain';
};

export default message;

Import

Importing Named Exports from App.js File:

import { name, url } from "./app.js";

Importing Default Exports from App.js File:

import app from "./app.js";

So this Was for This Blog See you In the Next One Till Then Keep Coding Keep Exploring!

Tanmay Sinha

2 thoughts on “ES6 In ReactJS | ReactJS Tutorial #33 min read

  1. Pingback: React Render HTML | ReactJS Tutorial #4 - Mr Programmer

  2. Pingback: JSX In ReactJS | ReactJS Tutorial #5 - Mr Programmer

Leave a Reply