Chapter 4: Building our App {#Chapter-4}

July 30, 2017 · View on GitHub

In the previous chapter we used create-react-app to quickly setup a seed project. In this chapter, we're going to start building the first version of our application.

We're going to start by creating everything inside of index.js and later refactor everything into separate components. That said, it's generally easier to build components in an isolated fashion, but given that we're just starting, it'll be easier to see everything in one file so that we can capture the entire journey together.

First pass

We'll first install Lodash, "a modern JavaScript utility library delivering modularity, performance & extras" with the following command:

{line-numbers=off, lang=text}

$ npm install lodash --save

Once installed, we can start with code and cover it in detail afterwards:

{title=src/index.js, lang=text}

// dependencies
import _ from 'lodash';
import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {

  constructor(...args) {
    super(...args);
    this.state = {
      todos: {}
    };
  }

  componentDidMount() {
    this.setState({
      todos: {
        1: { id: 1, completed: false, description: 'task 1' },
        2: { id: 2, completed: false, description: 'task 2' },
        3: { id: 3, completed: false, description: 'task 3' },
        4: { id: 4, completed: false, description: 'task 4' }
      }
    });
  }

  render() {
    const { todos } = this.state;
    return (
      <ul>
        {_.map(todos, (todo, id) =>
          <li key={id}>
            {todo.description}
          </li>
        )}
      </ul>
    );
  }
}

render(
  <App />,
  document.getElementById('root')
);

We've imported lodash to help us with common programming tasks in an elegant and concise fashion. We've converted our App component from a React pure component to its class interface, since we need internal component state for our todos. In a real world application, you'd use a state manager, such as Redux, Flux, MobX, etc but we won't need one here.

To minimize any external dependencies, we won't hit an API to fetch our data, but we'll treat setting our state as if we were. Inside of componentDidMount, you can see that we're updating our state's todos with a list of todos. The data structure for a todo item is as follows:

{line-numbers=off, lang=text}

1: {
  id: 1,
  completed: false,
  description: 'task 1'
}

id: a unique identifier attached to each todo
completed: a boolean determining the todo's status
description: the description for the todo

Why store the todos as an object rather than inside of an array? I opted to have them stored in an object with each todo id as the key, since it's easier to reference an individual todo and we can do so in constant time.

In our render method, we're grabbing and mapping over our collection of todos via Lodash's _.map and rendering them as li elements inside of an ul.

T> It is good practice to use the key prop on elements that we're looping over, so that React can intelligently track them and make internal optimizations.

For the time being, we'll keep these simple without much styling. If you visit your browser, you should see a list of 4 todos rendering in an ul tag.

{width=50%}

Now that we have our todos, how do we toggle their status? Let's manually set one of our todos to complete and then define some styles for a completed todo: