What did a Todo List teach me about React?

Initially, when we start our first app in React, it would most probably be a Todo List app. A Todo list app could teach you quite a lot of important concepts about React.

A year before, I learned React by coding a todo list which had only the functionality to create todos. In the react website there is an example which shows a basic implementation of a todo list. Exactly the one below.

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="new-todo">
            What needs to be done?
          </label>
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>
            Add #{this.state.items.length + 1}
          </button>
        </form>
      </div>
    );
  }

  handleChange(e) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    if (!this.state.text.length) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(state => ({
      items: state.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

ReactDOM.render(
  <TodoApp />,
  document.getElementById('todos-example')
);

There are other examples also but this one was the most perfect example to make your basics stronger.

Using this as a base, I implemented a CRUD functionality for my todo app recently. I used a common UI library named Materialize CSS. Many people may be familiar with this library. It is simple to use when you do not care about the UI much. Here is the link to My Todo App. There are a couple of bugs to work on yet. But I am still proud of my work till now.

My Experience While Working On The App

The basic to-do app already teaches us these :

• Event Handling
• Mapping Props and states
• Setting States
• Binding Functions
• Displaying Array Data
• Stateful and Stateless Components

But while working with my app, I had to think about :

1. How I can Delete a Single Todo?
2. How I can Update a Single Todo?
3. How to Organize My Data as Objects so that I get data efficiently?
4. In What scenarios will I need some ES6 functions like Map, Filter, Reduce?
5. How Do I use Checkboxes and Display Dates in Human Readable form?
6. Many Other Problems Which I am not able to put as a question.

Brainstorming can really make you think better and helps improve your thinking process and helps in identifying flaws in the app. I wish there could be courses on brainstorming and how we could efficiently think about solutions to real-world problems.

After many tries to find out the solution I looked up the react website and it has the solution to all my questions. I am still evolving my current app to include more functionalities.

First I need to add filtering, sorting and searching. Then I want to add persistent data first and then create an API to do the basic CRUD operations. Then I also want to add a Display Toggle button, I want to toggle between a grid view and list view. If I am able to complete the above the last one would make a Kanban view for this app.

Let's see how it goes.