ES6 Classes

React ES6 Classes

Before the introduction of React Hooks in version 16.8, ES6 Classes were the primary way to create stateful React components. While the modern React ecosystem has heavily shifted towards functional components, understanding ES6 classes is absolutely essential for maintaining older codebases and understanding object-oriented programming concepts in JavaScript.

What is a Class?

A class is essentially a blueprint for creating objects. It encapsulates data (properties) and behavior (methods) into a single entity.

In ES6, classes were introduced to provide a much cleaner and clearer syntax for creating objects and dealing with inheritance compared to traditional prototype-based JavaScript.

Creating a Simple ES6 Class

To create a class, you use the class keyword followed by the name of the class. By convention, class names always start with an uppercase letter (PascalCase).

Let's create a simple class representing a Car.

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

The constructor() Method

Notice the constructor() method in the example above. This is a special method that is automatically executed when a new object is created from the class. It is typically used to initialize the object's properties.

To use this class, we use the new keyword:

const mycar = new Car("Ford");
console.log(mycar.brand); // Outputs: "Ford"

Class Methods

Classes can also contain methods (functions attached to the class).

class Car {
  constructor(name) {
    this.brand = name;
  }
  
  present() {
    return "I have a " + this.brand;
  }
}
const mycar = new Car("Ford");
console.log(mycar.present()); // Outputs: "I have a Ford"

Class Inheritance in React

The most powerful feature of classes is inheritance. Inheritance allows a new class to inherit all the methods and properties of an existing class. You do this using the extends keyword.

This is exactly how traditional React Class Components are built. They inherit from React.Component.

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");
console.log(mycar.show()); // Outputs: "I have a Ford, it is a Mustang"

The super() Method

If you define a constructor() inside a child class, you must call super() before using the this keyword. The super() method calls the constructor of the parent class, ensuring that the parent's properties are properly initialized.

React Example

Here is what a standard React Class Component looks like using ES6 inheritance:

import React, { Component } from 'react';

class Welcome extends Component {
  constructor(props) {
    super(props);
    this.state = { message: "Hello World!" };
  }
  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
      </div>
    );
  }
}

In this example, the Welcome class inherits from Component, giving it access to React features like this.state and the render() method.

Summary

• Classes are blueprints for objects.
• The constructor() method runs automatically when an object is instantiated.
• The extends keyword is used to inherit from another class.
• The super() method must be called in the child's constructor to initialize the parent class.
• React Class Components rely on inheriting from React.Component.