Demo

To start off our todo application we are going to follow the steps outlined in Thinking in React. The first step of the process is to break our application into a component hierarchy. For this app, we’re going to keep it simple and just use four parts.

• TodoHeader
• TodoList
• TodoListItem
• TodoFooter

We could go a lot deeper into creating buttons, inputs and checkboxes, but this is a great place to start. Often you’ll want to start with a single large control and then break it up into smaller pieces.

TodoApp

import React from 'react';
import { TodoFooter } from './components/TodoFooter';
import { TodoHeader } from './components/TodoHeader';
import { TodoList } from './components/TodoList';
export class TodoApp extends React.Component {
  render() {
    return (
      <div>
        <TodoHeader />
        <TodoList />
        <TodoFooter />
      </div>
    );
  }
}

We’ll start off with all of the files scaffolded and imported into our App. This will let us dive right into each control and see updates quickly.

TodoHeader

Our objective for now is to create a static version of our application, so we’ll copy over the entire header tag from a previous step, minus any function calls we added.

Note that since this is React we had to change class to className, but nothing else changes.

return (
  <header>
    <h1>todos</h1>
    <div className="addTodo">
      <input className="textfield" placeholder="add todo" />
      <button className="submit">Add</button>
    </div>
    <nav className="filter">
      <button className="completed">all</button>
      <button>active</button>
      <button>completed</button>
    </nav>
  </header>
);

TodoListItem

Any time you see repeated complex elements, that is usually a sign that you should create a new component. With a few props you can typically abstract all of those elements into a single component. This is certainly the case with todo items.

return (
  <li className="todo">
    <label>
      <input type="checkbox" /> Todo 1
    </label>
  </li>
);

Note that I’ve removed the title span as it was only needed to make targeting that text easier.

Exercise

If you already have the app running from a previous step, stop it with ctrl+C. Start the app version used in this step by running npm start from the root of the frontend-bootcamp folder. Click the “exercise” link under day 1 step 5 to see results.

TodoFooter

1. Update the TodoFooter component, copying over the <footer> tag and all of its children
2. Remove any onclick properties, and change class to className

TodoList

1. Update the TodoList component like you did with the footer.
2. Import TodoListItem and add 4 of them inside of the <ul>
3. Bonus points for using a for loop or using map to create 4 list items based on the array [1,2,3,4]