checklist.md

TodoApp Checklist

Basic React Checklist.

1. PropTypes should describe objects and arrays, which are passed in the component.
2. Use destructuring wherever possible. It makes code more readable.
3. Functions should do one thing. Don't make monsters!)
4. A variable name should describe what is stored in it.
5. Use functional components with React Hooks.
6. A function name should describe the result and starts from a verb. Follow these naming conventions for functions.
7. Use classnames lib for calculated classes.
8. Use key attribute correctly (read here for more details)

Task checklist.

1. App.js code should be split into several components.
2. Callbacks that work with the main state should take prepared data instead of the whole child's state.
3. Code should be split into small, reusable components if it possible (Filter, TodoList, Todo, NewTodo)
4. ID for new todos should be unique, you can use an internal ID counter for this, and increment it.
5. “Toggle all” should be active only in case when all todos are completed.
6. If you manually toggle all todos to completed state, “Toggle all” should stay active.
7. "Toggle all" should stay inactive if at least one todo is not completed.
8. NewTodo form shouldn’t create empty todos.
9. NewTodo form should trim redundant spaces.
10. Do not rely on the unknown string, make constants for this.

    const FILTERS = {
      all: ‘all’,
      completed: ‘completed’,
      active: ‘active’,
    };
    

11. Show only NewTodo form if todos array is empty.