React Notes + Counter/To-Do App

Structure

react-notes-todo/
├── notes/
│   ├── 01-functional-components-and-props.md
│   ├── 02-usestate-hook.md
│   ├── 03-useeffect-hook.md
│   ├── 04-conditional-rendering.md
│   └── 05-list-rendering-and-keys.md
└── app/
    └── index.html

Notes

Annotated, code-along style notes on the core React concepts, each with working examples and explanations of why, not just how.

App

app/index.html is a single-file Counter + To-Do app. Open it directly in any browser — no npm install, no build step. It uses React 18 and Babel Standalone from a CDN so the JSX runs client-side.

Just double-click index.html, or run a quick local server:

cd app
python3 -m http.server 8000
# then open http://localhost:8000

How it covers the acceptance criteria

Criteria	Where
Functional components + props passed correctly	App → Counter (prop: step); TodoApp → TodoItem (props: todo, onToggle, onDelete)
useState without reference	Counter's count, TodoApp's todos and inputValue — all built from scratch
useEffect without reference	Counter syncs document.title to count; TodoApp logs todo count to console, both with correct dependency arrays and one with a cleanup function
Conditional rendering	Empty-state message vs. list (? :), completed-count summary (&&), strikethrough styling on completed items
List rendering with keys	todos.map(...) rendering <TodoItem key={todo.id} .../> — keyed by stable id, not array index

Suggested next step

Push this as its own GitHub repo (e.g. react-fundamentals-notes), or add it as a folder inside your existing JS curriculum repo if that's where the grader expects it.