This blogpost continues series of posts exploring React components. It describes Class-Based Component (or simply called Class Component) - one of building blocks in React application.

Overview of Class Component

This kind of components was introduced with JavaScript ES6 when classes have been made available in the language. The logic, that is used in the class, comes to this component through inheritance from React Component class.

Creating Class Component

We create functional component in 2 ways:

1. Using ES6 class - this is a preferable option:

• keyword class
• name of component - should be capital letter
• keyword extends with name of class React.Component
• render() method - the only method which is compulsory

Example:

class MyComponent extends React.Component {
  render() {
    return <h1>My new component is called {this.props.name}</h1>;
  }
}

2.Using create-react-class module:

• import create-react-class module first
• create a variable with the name - should be capital letter
• render method

Example:

import createReactClass from 'create-react-class';

var MyComponent = createReactClass({
  render: function() {
    return <h1>My new component is called {this.props.name}</h1>;}
});

Main Features

Before React hooks class-based components were the only components who were managing state and had access to lifecycle methods. Nowadays functional components can also manage state and have access to lifecycle methods, which makes class-based components be less in use.

These are main features of class-based components:

render() method

This method examines props and state and can return React element, React Fragments, portals, strings, numbers, booleans or null:

render(){
  return <h1>My new component is called {this.props.name} </h1>;
}

You can read more about render method here.

constructor()

The method called constructor() should be ONLY defined if:

• component is managing state
• component has to bind event handlers to an instance

NOTE: Constructor() is the only place where we refer to state directly. In any other place - use setState() method.

Example:

constructor(props) {
  super(props);
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

You can read more about constructor method here.

Lifecycle Methods

Class-based components have access to functions, which we can call at different stages of the lifecycle and are use for a variety of purposes like changing the state or doing some work (like fetching data from an external API). They are also used for the mounting, updating, and unmounting of the component.

Here is the list of some widely used lifecycle methods:

• componentDidMount() - is used for creating an instance of a component and inserting it into the DOM:

componentDidMount();

• componentDidUpdate() - is used for updating (re-rendering) a component when props or state are changed:

componentDidUpdate(prevProps, prevState, snapshot);

• componentWillUnmount() - is used when a component is being removed from the DOM:

componentWillUnmount();

There are many other rarely used lifecycle methods which you can read about here.

That's pretty much all you need to know to understand class-based components.

Thank you for reading my blog. Feel free to connect on LinkedIn or Twitter :)