🔥Limited Offer: Get 50% OFFon AI & Full Stack Courses🔥
Back to React Notes
Topic #8

ES6 Classes


Classes

ES6 introduced classes.

A class is a type of function, but instead of using the keyword function to initiate it, we use the keyword class, and the properties are assigned inside a constructor() method.

Example

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

Note: Notice the case of the class name. We have begun the name, "Car", with an uppercase character. This is a standard naming convention for classes.

Now you can create objects using the Car class:

Example

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

const mycar = new Car("Ford");

Note: The constructor function is called automatically when the object is initialized.


Method in Classes

You can add your own methods in a class:

Example

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

  present() {
    return 'I have a ' + this.brand;
  }
}

const mycar = new Car("Ford");
mycar.present();

As you can see in the example above, you call the method by referring to the object's method name followed by parentheses (parameters would go inside the parentheses).


Class Inheritance

To create a class inheritance, use the extends keyword.

A class created with a class inheritance inherits all the methods from another class:

Example

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

  present() {
    return 'I have a ' + this.brand;
  }
}

class Model extends Car {
  constructor(name, mod) {
    super(name);
    this.model = mod;
  }
  show() {
      return this.present() + ', it is a ' + this.model
  }
}
const mycar = new Model("Ford", "Mustang");
mycar.show();

The super() method refers to the parent class.

By calling the super() method in the constructor method, we call the parent's constructor method and get access to the parent's properties and methods.

To learn more about classes, check out our JavaScript Classes section.

Want to go beyond the notes?

Join CodingNow 2.0's React course — live mentorship, real projects, and 100% placement support.

Enroll Now — Free Demo Available

ES6 Classes – FAQs

Quick answers about learning ES6 Classes in React.

This free note from CodingNow 2.0 explains ES6 Classes in React — concept, syntax and worked code examples you can copy, run and revise before interviews.
Yes. Every React topic on CodingNow 2.0, including ES6 Classes, is 100% free with no signup required.
With focused practice, most students grasp ES6 Classes in 1–3 days from these notes; pairing it with CodingNow 2.0's mentor-led course takes you to job-ready depth faster.
Use the code examples in this note, then ask doubts for free on the CodingNow 2.0 Community (/community) — expert instructors answer within 24 hours.
WhatsApp
Call NowEnroll Now