Learn React Hooks

Defining the app structure

We already know what the basic structure of our app is going to be like from the mock-up, so let's start by defining the App component:

1. Create a new src/App.js file.
2. Import React and the Header, AddTodo, TodoList, and TodoFilter components:

import React from 'react'import Header from './Header'import AddTodo from './AddTodo'import TodoList from './TodoList'import TodoFilter from './TodoFilter'

3. Now define the App component as a class component. For now, we are only going to define the render method:

export default class App extends React.Component {    render () {        return (            <div style={{ width: 400 }}>                <Header />                <AddTodo />                <hr />                <TodoList />                <hr />                <TodoFilter />            </div>        )    }}

The App component defines the basic ...