React ES6 Classes

React ES6 Classes – Complete Guide with Examples

Before React Hooks became popular, ES6 class components were the main way to create React components. Even today, They are an important topic for understanding legacy code, interviews, and React fundamentals.

In this guide, you’ll learn what They are, how React class components work, syntax with examples, and why functional components replaced them.

What Are ES6 Classes?

ES6 Classes are a modern way to create objects and handle inheritance in JavaScript. React uses ES6 classes to create class-based components.

Basic ES6 Class Example

Introduced in ES6
Cleaner than prototype-based syntax
Supports inheritance using extends

React Class Components Explained

A React class component is created using an ES6 class that extends React.Component.

Basic React ES6 Class Component

Key Rules

Must extend React.Component
Must include a render() method
render() returns JSX

Why React Used ES6 Classes?

Before Hooks, React used classes because they allowed:

State management
Lifecycle methods
Better structure than plain functions

However, class components are now less common in new projects.

Constructor in React ES6 Classes

The constructor() is used to initialize state and bind methods.

Example

super(props) is mandatory before using this.

State in React ES6 Class Components

State is stored inside this.state.

Updating State

Complete Example

class Counter extends React.Component {
  state = { count: 0 };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <>
        <p>{this.state.count}</p>
        <button onClick={this.increment}>Increase</button>
      </>
    );
  }
}

class Counter extends React.Component {

state = { count: 0 };

increment = () => {

this.setState({ count: this.state.count + 1 });

};

render() {

return (

<p>{this.state.count}</p>

<button onClick={this.increment}>Increase</button>

</>

);

}

Never modify state directly
Always use setState()

Props in ES6 Class Components

Props are accessed using this.props.

Usage:

Props are read-only
Passed from parent component

Event Handling in Class Components

Event handlers must be bound to this.

Example

Arrow functions automatically bind this.

Lifecycle Methods in React ES6 Classes

Lifecycle methods allow you to control component behavior.

Common Lifecycle Methods

Method	Purpose
componentDidMount	Runs after component loads
componentDidUpdate	Runs after update
componentWillUnmount	Cleanup before removal

Example