kabirbaidhya / React Todo App
React Todo App
Stars: ✭ 97
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Todo App
Awesome Android Things
A curated list of awesome android things tutorials, libraries and much more at one place
Stars: ✭ 883 (+810.31%)
Mutual labels: sample-app, tutorial
Mean Rsvp Auth0
MEAN stack application with Auth0 (see sample deployed at https://rsvp.kmaida.net)
Stars: ✭ 99 (+2.06%)
Mutual labels: sample-app, tutorial
Wifi Cracking
Crack WPA/WPA2 Wi-Fi Routers with Airodump-ng and Aircrack-ng/Hashcat
Stars: ✭ 9,546 (+9741.24%)
Mutual labels: tutorial
Learn Jetpack Compose By Example
🚀 This project contains various examples that show how you would do things the "Jetpack Compose" way
Stars: ✭ 1,319 (+1259.79%)
Mutual labels: sample-app
Elasticsearch Hn
Index & Search Hacker News using Elasticsearch and the HN API
Stars: ✭ 92 (-5.15%)
Mutual labels: tutorial
Flask Tutorial
这个项目已经很久很久了, 不推荐看, 不过倒是可以进群叨逼叨一下. 🚗 交流群:630398887
Stars: ✭ 91 (-6.19%)
Mutual labels: tutorial
Absolutebeginnerprojects
A repo for brand new devs who are looking for great real-world fundamental practice projects
Stars: ✭ 93 (-4.12%)
Mutual labels: tutorial
Articulate Common Lisp.github.io
docs/specs for a tutorial site for a Common Lisp environment
Stars: ✭ 90 (-7.22%)
Mutual labels: tutorial
Pytorch Pos Tagging
A tutorial on how to implement models for part-of-speech tagging using PyTorch and TorchText.
Stars: ✭ 96 (-1.03%)
Mutual labels: tutorial
Dropzone Laravel Image Upload
Laravel 5.2 and Dropzone.js auto image uploads with removal links
Stars: ✭ 92 (-5.15%)
Mutual labels: tutorial
My Appdaemon
My apps, my helpfiles, all about AppDaemon for Home Assistant
Stars: ✭ 94 (-3.09%)
Mutual labels: tutorial
Ecno
Ecno is a task state manager built on top of UserDefaults in pure Swift 4.
Stars: ✭ 92 (-5.15%)
Mutual labels: tutorial
Tutorial Ubuntu 18.04 Install Nvidia Driver And Cuda And Cudnn And Build Tensorflow For Gpu
Ubuntu 18.04 How to install Nvidia driver + CUDA + CUDNN + build tensorflow for gpu step by step command line
Stars: ✭ 91 (-6.19%)
Mutual labels: tutorial
Flutter todo
Yet another Todo app, now using Flutter (with ScopedModel)
Stars: ✭ 94 (-3.09%)
Mutual labels: todoapp
H2o Tutorials
Tutorials and training material for the H2O Machine Learning Platform
Stars: ✭ 1,305 (+1245.36%)
Mutual labels: tutorial
Machine Learning Algorithms
A curated list of almost all machine learning algorithms and deep learning algorithms grouped by category.
Stars: ✭ 92 (-5.15%)
Mutual labels: tutorial
Angular Multi Step Wizard
Tutorials on building an Angular 4 Multi-Step Wizard with its own Router
Stars: ✭ 96 (-1.03%)
Mutual labels: tutorial
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
TodoListcomponent. -
step-5 - Extract more components:
TodoItem, &Header. -
step-6 - Add
Footercomponent to display count. -
step-7 - Add
InputBoxcomponent. - 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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].