Let's start by creating a component to represent the Todo page. Let's call it TodoComponent.

In the previous section, we used a function to create a React component. You can also build more complex components using classes. These are called class components. They can have more complex logic than Function components. The code for TodoComponent is shown here:

import React, { Component } from 'react';

class TodoComponent extends Component {
    render() {
         return (<div>Todos</div>);
     }
 }

export default TodoComponent;

We make TodoComponent extend Component and implement the render method to return the basic JSX. We export TodoComponent to enable its use in other components.

Let's enhance App.js to use TodoComponent:

import TodoComponent from './TodoComponent'

......

function App() {
     return (
     <>
         <h1>Todo Application</h1>
         <TodoComponent />
     </>
    );
 }

We added TodoComponent using <TodoComponent/>. The page is displayed as follows: