Learn TypeScript 3 by Building Web Applications

Class components

Class components should be the exception rather than the norm in your React applications. Still, let's explore these a bit to see how they are written.

To create a class component, you need to extend the React.Component class and implement the render method. That method will be the one creating/returning a React element.

Here is an example of a component class using ES2015 (that is, not TypeScript yet!):

const createElement = React.createElement; 
 
class SayHiButton extends React.Component { 
    constructor(props) { 
        super(props); 
        this.state = { 
            buttonClicked: false, 
        }; 
    } 
 
    render() { 
        console.log('Rendering'); 
        if (this.state.buttonClicked) { 
            console.log('The buttonClicked property of the state is  true; showing the message'); return ...