How peanque/reactjs-todo-app works
This is a small React to-do app. A user enters a task in the add form; the app creates and stores it, then passes the task list to the list component. Users can toggle completion or delete tasks, with changes saved in browser local storage. The graph focuses on runtime behavior; the shared task shape is included as an internal domain layer. Evidence is limited to the README and the source excerpts and index provided.
Main entry points: App.tsx Task state · addTodo.tsx Add form · listTodo.tsx Task list · main.tsx React entry
Components 7
App runtime
- React entry
src/main.tsx - Task state
src/App.tsx
Task domain
- Task shape
src/types/todoInterface.tsx
Other components
- User
- Browser local storage
Connections 9
- React entry → Task state: renders
src/main.tsx - Task state → Add form: renders
src/App.tsx - Task state → Task list: renders
src/App.tsx - User → Add form: enters task
src/components/addTodo.tsx - Add form → Task state: submits task
src/App.tsx - User → Task list: selects task
src/components/listTodo.tsx - Task list → Task state: invokes callbacks
src/App.tsx - Task state → Browser local storage: reads and writes
src/App.tsx - Task state → Task shape: uses type
src/App.tsx