huytrongle / react-todo-app

React Todo App

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.