/react-todo-app

React Todo App

Primary LanguageJavaScript

React Todo App

This is a sample react todo app done step-by-step. This sample app was a part of react workshop.

You can check the slides here.

Check the demo hosted on heroku https://simplest-react-todo-app.herokuapp.com/.

Instructions

First clone this repository.

$ git clone https://github.com/kabirbaidhya/react-todo-app.git

Install dependencies. Make sure you already have nodejs & npm installed in your system.

$ npm install # or yarn

Run it

$ npm start # or yarn start

Steps

Each step is a branch. Check out to the step you want to test.

$ git checkout <step-number>    # eg: git checkout step-1
  • step-0 - Setup app using create-react-app.
  • step-1 - React Hello World.
  • step-2 - Add some JSX for the todoapp.
  • step-3 - List todo items dynamically.
  • step-4 - Create TodoList component.
  • step-5 - Extract more components: TodoItem, & Header.
  • step-6 - Add Footer component to display count.
  • step-7 - Add InputBox component.
  • step-8 - Convert to stateful components.
  • step-9 - Add new todo item.
  • step-10 - Add todo list filter.
  • step-11 - Refactor code by moving logic to services.
  • step-12 - Make check/uncheck change the todo item status to completed/pending.
  • step-13 - Refactor code and design improvements.
  • step-14 - Refactor and separate UI & stateful components.
  • step-15 - Finalization of TodoApp.