Classes and Arrow Functions

Next Gen JS are very useful for getting started with ReactJS like a pro.

by M Rahul Reddy

Babel + JSX

console.clear();

// Classes are one of the two ways of creating components.
// Classes are blueprints to JS Objects

// Basic Arrow function
printName = name => {
console.log("Arrow function = ",name)
}

printName("Rahul") // function call

console.log("Using ES6 ************")
// create and instantiate a class 
class Person {
// Every class has properties and Methods
//property = like variables attached to classes/objects
constructor () {
  this.name = "person = Rahul"
  }
  //Method = like functions attached to classes/objects
  printMyName() {
  console.log(this.name);
  }
}
const person = new Person(); //instantiate
person.printMyName()

/*  ---------------- Using ES6 (old way) --------------------*/
//use of super and inheritance
class Human {
constructor () {
    this.gender = 'Male';
  }
 printGender () {
   console.log(this.gender);
 }
}

class Person1 extends Human { //as same class name cannot be declared again
  constructor () {
  	super(); //executes parent constructor 
  	this.name = "person1 = Rahul";
  }
	printMyName () {
	console.log(this.name);
  }
}
const person1 = new Person1();
person1.printMyName()
person1.printGender()

/*  ---------------- Using ES7 (latest way) --------------------*/
console.log("Using ES7 ************")
class Human1 {
gender = 'Male1';

 printGender = () => {
   console.log(this.gender);
 }
}

class Person2 extends Human1 { //as same class name cannot be declared again

  	name = "person2 = Rahul";
  
	printMyName = () => {
	console.log(this.name);
  }
}
const person2 = new Person2();
person2.printMyName()
person2.printGender()

/*The major difference between "old way" and "latest way" is, "super() and this" are not used..*/