React ES6 Classes – Understanding Classes, Methods, and Inheritance

ES6 Classes are a fundamental feature of modern JavaScript that plays a significant role in React development. They provide a structured way to define objects and encapsulate logic, including properties and methods. Classes in ES6 simplify the process of creating components, managing state, and adding functionality.

In this tutorial, we’ll explore:

• Defining ES6 classes
• Using constructors and properties
• Adding methods to a class
• Implementing inheritance in classes

What Are ES6 Classes? #

A class is essentially a template for creating objects. Instead of using the function keyword, classes in ES6 are declared using the class keyword. The constructor function inside a class initializes properties when a new object is created.

1. Creating a Class #

Example: Car Class with a Constructor

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

const myCar = new Car("Ford");
console.log(myCar.brand); // Output: Ford

Explanation:

• The constructor() is a special method used to initialize the properties of a class.
• In the example above, the class Car initializes the brand property when the object is created.
• Naming Convention: Class names typically begin with an uppercase letter, such as Car, to follow best practices.

2. Adding Methods to a Class #

You can define methods inside a class to add behavior.

Example: Adding a present() Method

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

  present() {
    return `I own a ${this.brand}.`;
  }
}

const myCar = new Car("Ford");
console.log(myCar.present()); // Output: I own a Ford.

Explanation:

• The present() method returns a message that includes the brand of the car.
• You can call a method using the object followed by the method name and parentheses.

3. Class Inheritance #

In JavaScript, inheritance allows one class to inherit properties and methods from another class using the extends keyword. This is useful when you want to reuse functionality across different components or objects.

Example: Inheriting from the Car Class

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

  present() {
    return `I own a ${this.brand}.`;
  }
}

class Model extends Car {
  constructor(brand, model) {
    super(brand); // Call the parent class constructor
    this.model = model;
  }

  show() {
    return `${this.present()} It is a ${this.model}.`;
  }
}

const myCar = new Model("Ford", "Mustang");
console.log(myCar.show()); // Output: I own a Ford. It is a Mustang.

Explanation:

• extends Keyword: The Model class inherits all properties and methods from the Car class.
• super() Method: The super() method is used to call the parent class’s constructor. This ensures that the brand property is correctly initialized.
• The show() method in the child class combines the result of present() with additional information about the model.

Summary #

ES6 classes provide a powerful way to structure code in JavaScript, which is particularly useful in React development. Key concepts like constructors, methods, and inheritance help organize logic and manage component behavior more effectively.

Start applying these concepts to build React components that are modular, reusable, and easy to maintain.

Want to learn React with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!