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 structure of our app. It will consist of a header, a way to add new todo items, a list of todo items, and a filter.