ReactJS Class Components

What Is a React Component ?

A React Component is a self-contained, reusable piece of UI that controls how a part of your application looks and behaves.
Every button, form, header, footer, sidebar, or even entire page in a React application is built using components.

A component:

• Has its own structure (HTML/JSX)
• Has its own logic (JavaScript)
• May have its own state (data that changes over time)
• Can receive props (inputs)
• Can be reused multiple times
• Can be combined with other components to create complex interfaces

How React Components Started

React was introduced by Facebook (now Meta) in 2013, during a time when UIs were becoming more dynamic and complex.

• jQuery
• Direct DOM manipulation
• Long, messy scripts that became hard to maintain

React brought something revolutionary:
A declarative UI model built using reusable components.

React Components with React.createClass()

In the earliest versions of React, components were created using the ES5 method:

var Welcome = React.createClass({
  getInitialState: function () {
    return {
      message: "Hello from ES5!"
    };
  },

  render: function () {
    return (
      <h1>{this.state.message}</h1>
    );
  }
});

Note: ES5 isn’t gone or deprecated — browsers still use it — but modern developers no longer write in ES5. ES6+ is the standard for everything today.

• in legacy codebases
• in jQuery projects
• in very old tutorials
• in browser compatibility builds

The Introduction of Class-Based Components

With the release of ES6 (ECMAScript 2015), JavaScript gained features like:

• class syntax
• arrow functions
• modules
• template strings

React embraced these changes by introducing class components — which quickly became the standard for building powerful, stateful React interfaces.

import React, { Component } from "react";

class Welcome extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: "Hello from ES6 Class Component!",
    };
  }

  render() {
    return (
      <h1>{this.state.message}</h1>
    );
  }
}

export default Welcome;

How a Class-Based Component Works in React

1. Class Keyword + Extending React.Component

A React Class Component always begins with a class definition that extends React.Component. This inheritance gives the component access to essential React features like state management, lifecycle methods, and the render() function.

class MyComponent extends React.Component {
}

• React.Component contains React’s internal logic for rendering, updating, and managing component behavior.
• By extending it, your component automatically inherits all the built-in methods React needs to function.

2. constructor(props)

The constructor is the first method executed when a class component is created.
It is responsible for setting up the component before it appears on the screen.

constructor(props) {
  super(props);
  // initialization code
}

What It Is Used For

• Initializing this.state
• Binding event handlers
• Performing setup tasks before the initial render

3. super(props)

super(props) calls the parent class constructor (React.Component) and passes the component’s props to it.

super(props);

Why It Is Required

• You cannot access this inside the constructor until super() is executed.
• It ensures that props are available as this.props.
• React uses it internally to create the component instance properly.

If You Skip super(props)

• this.props will be undefined in the constructor.
• React will not initialize the component correctly, leading to errors.

4. this.state Initialization

In class components, state must be defined inside the constructor.
State stores data that the component can re-render with.

this.state = {
  count: 0,
  message: "Hello"
};

Why It Belongs Here

• state is tied to the component instance.
• The constructor runs before rendering, making it the ideal place to define initial values.

5. render() Method

Every class component must include a render() method.
React calls it automatically to generate and update the UI.

render() {
  return (
    <div>{this.state.message}</div>
  );
}

What It Does

• Converts state and props into JSX output.
• Runs on every update, ensuring the UI stays in sync with the data.

Complete Example:

class Example extends React.Component {
  constructor(props) {
    super(props); // passes props to React.Component

    this.state = {            // initialize state
      name: "Dot Net Full Stack"
    };
  }

  render() {                  // return UI
    return (
      <h1>Hello {this.state.name}</h1>
    );
  }
}

export default Example;

Summary

Class Components in React use ES6 class syntax to provide structure, state handling, and rendering logic through features like constructor, super(props), this.state, and the render() method. They formed the backbone of React development for many years and are still important for understanding how React works internally.

Now that you know how a class component is built, the next step is understanding State in React, which controls how components store and update data.