Create a class-based component

For example, we have a function-based component

import React from 'react';

const SearchBar = () => {
    return <input/>;
};

export default SearchBar;

First of all we need to create a class

class SearchBar {

}

Then we need to extend it from Component

class SearchBar extends React.Component {

}

After that, we need to implement render() method, which is needed for every React.Component

class SearchBar extends React.Component {
    render () {
        return <input/>;
    }
}

We could clean up code for a little bit, just by removing React. from React.Component statement in a signature of the class. For that we just need to add { Component } to the import of the React:

import React, { Component } from 'react';

class SearchBar extends Component {
    render () {
        return <input/>;
    }
}