wszerad/react-todo-app repository overview

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