{"id":32563047,"url":"https://github.com/blevs/react-todo-tutorial","last_synced_at":"2026-07-04T08:32:13.792Z","repository":{"id":39209243,"uuid":"244276132","full_name":"Blevs/react-todo-tutorial","owner":"Blevs","description":"A React tutorial project for learning about forms","archived":false,"fork":false,"pushed_at":"2023-01-05T08:47:14.000Z","size":4896,"stargazers_count":3,"open_issues_count":23,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-29T02:56:35.486Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Blevs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-02T03:59:14.000Z","updated_at":"2021-02-11T08:29:32.000Z","dependencies_parsed_at":"2023-02-03T21:16:48.677Z","dependency_job_id":null,"html_url":"https://github.com/Blevs/react-todo-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Blevs/react-todo-tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blevs%2Freact-todo-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blevs%2Freact-todo-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blevs%2Freact-todo-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blevs%2Freact-todo-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Blevs","download_url":"https://codeload.github.com/Blevs/react-todo-tutorial/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blevs%2Freact-todo-tutorial/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35115741,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-04T02:00:05.987Z","response_time":113,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-29T02:56:18.730Z","updated_at":"2026-07-04T08:32:13.775Z","avatar_url":"https://github.com/Blevs.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React TODO \n\nI know it is not original, but it is a good project. And certainly good practice.\n\n\u003cimg src=\"https://i.imgur.com/HCtZ4Ix.gif\" /\u003e\n\nLet's build a classic TODO application, to get the hang of using inputs and forms in react, rendering data from lists and structuring our state.\n\n## Goals\n\n* [ ] Display a list of TODO's.\n* [ ] Create an input for users to type their TODO's.\n  * [ ] Add a TODO to the list when the user clicks an 'add' button.\n  * [ ] Add a TODO to the list when the user hits enter inside the input.\n  * [ ] Make the field a 'controlled input' (it's value is always stored in state)\n* [ ] Users can add TODO's to the list by hitting a button, or hitting enter with the input selected.\n* [ ] Clicking on a todo toggles its status (DONE/TODO)\n* [ ] A clear button to remove DONE TODO's.\n* [ ] Use the `key` prop correctly\n\n## Stretch Goals\n\n* [ ] Add the ability to edit TODO's\n* [ ] Add descriptions/notes to TODO's\n* [ ] Make TODO's re-arrangable (perhaps with drag-and-drop)\n* [ ] Allow TODO's to nest under other TODO's.\n\n## Notes\n\n* Inputs can be a little funky in React. \n\nWe prefer to hold the value of input in a state varible, so that we can easily set or get it the way we would any other piece of data. We refer to this as a 'controlled input', and manage it's value as a stateful variable, and change it as the user types with an `onChange` event listener.\n\nhttps://reactjs.org/docs/forms.html\n\n* Note that the [`input`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) and [`textarea`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) elements are different. \n\nIf you want a one-line field, then go with `input`. If you want multiple lines, use `textarea`. Setting a large width and height on an `input` is not going to do what you want.\n\n## Install and Use\n\nTo run and edit the project, clone the project to your computer, `cd` into the project directory and follow the instructions below for your javascript pacakge manager of choice.\n\n### yarn\n\nIn the project directory run `yarn install` to install the depenencies, and `yarn start` to star the development server. It should open a browser tab to `localhost:3000`.\n\n### npm\n\nIn the project directory run `npm install` to install the depenencies, and `npm start` to star the development server. It should open a browser tab to `localhost:3000`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblevs%2Freact-todo-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblevs%2Freact-todo-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblevs%2Freact-todo-tutorial/lists"}