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/.
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
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.