React Foundations: Build a Task Tracker
Written edition published 4 October 2026, prepared 3 October 2026. Earlier completion, quiz attempts and reviews relate to earlier content. Historical records and existing purchases are retained; they do not establish mastery of this revised material.
About this course
Original practical beginner React course for learners with basic HTML/CSS and introductory JavaScript familiarity. It teaches a bounded browser-only task tracker, not full-stack development, employment readiness, a credential or production/security/accessibility certification. Earlier completion markers refer to earlier content and do not establish mastery of this revision.
Level: Beginner React; some prior web/programming familiarity required
Prerequisites
- Basic HTML elements and attributes, CSS selectors, and simple JavaScript variables/functions.
- Comfort opening a folder in an editor and running a terminal command; the setup lesson supplies the specific workflow.
- A compatible Node installation, modern browser, editor and package-registry access for local installation. No paid software or account is required.
- The JavaScript bridge reviews arrays/objects/expressions; it is not a complete first programming course.
Learning outcomes
- Explain components, JSX, props and pure rendering.
- Use events, state snapshots and immutable identity-safe list updates.
- Build labeled controlled forms with recoverable validation.
- Choose shared state ownership and derive views/counts without redundant Effects.
- Synchronize a simple external browser property with cleanup.
- Run and interpret component tests, production builds and a manual browser checklist.
- Reconstruct and explain a bounded local task tracker with an honest handoff.
Materials in this written edition
- 11 original written lessons with 12 worked examples.
- 33 independent practice questions and 22 exit checks with explanatory answer keys.
- 3 topic self-assessments with 12 questions and marking guidance.
- One integrated 50-point capstone with model answer and rubric.
- Accessible text explanations and labelled learning tables.
Course contents
- React and JavaScript Foundations (4 lessons)
- Interactive User Interfaces (4 lessons)
- A Complete Small Application (3 lessons)
New written edition. Earlier course completion is not evidence of completing this revised material. Worked keys are provided for self-checking.
Source references
References support general concepts. Teaching prose, examples and assessments in this edition are original.
- Your first component. Component/JSX boundary; no source sample copied. Bounded concept verification; original prose, code, data and exercises. Verified 2026-10-03.
- Keeping components pure. Render purity and repeatability. Bounded concept verification; original prose, code, data and exercises. Verified 2026-10-03.
- JavaScript expressions in JSX. Expression insertion in JSX. Bounded concept verification; original prose, code, data and exercises. Verified 2026-10-03.
- Passing props. Props and defaults. Bounded concept verification; original prose, code, data and exercises. Verified 2026-10-03.
- Arrays. JavaScript array transformations. Bounded concept verification; original prose, code, data and exercises. Verified 2026-10-03.
- Build React from scratch. Learning-oriented build tooling; framework trade-off explicitly bounded. Bounded concept verification; original prose, code, data and exercises. Verified 2026-10-03.
- Vite guide. Current setup/build/preview commands; actual locked versions are separately tested. Bounded concept verification; original prose, code, data and exercises. Verified 2026-10-03.
- Responding to events. Event function passing and user actions. Bounded concept verification; original prose, code, data and exercises. Verified 2026-10-03.
- State as a snapshot. Captured render state. Bounded concept verification; original prose, code, data and exercises. Verified 2026-10-03.
- Queued state updates. Functional updater composition. Bounded concept verification; original prose, code, data and exercises. Verified 2026-10-03.
- Rendering lists. Stable sibling keys. Bounded concept verification; original prose, code, data and exercises. Verified 2026-10-03.
- Updating arrays in state. Immutable array/record updates. Bounded concept verification; original prose, code, data and exercises. Verified 2026-10-03.
- Input reference. Controlled fields and labels. Bounded concept verification; original prose, code, data and exercises. Verified 2026-10-03.
- Sharing state. Shared ownership and callbacks. Bounded concept verification; original prose, code, data and exercises. Verified 2026-10-03.
- You might not need an Effect. Derived values are not an external synchronization need. Bounded concept verification; original prose, code, data and exercises. Verified 2026-10-03.
- Synchronizing with Effects. Setup/cleanup and external systems. Bounded concept verification; original prose, code, data and exercises. Verified 2026-10-03.
- useEffect reference. Dependencies and cleanup lifecycle. Bounded concept verification; original prose, code, data and exercises. Verified 2026-10-03.
- StrictMode. Development checks. Bounded concept verification; original prose, code, data and exercises. Verified 2026-10-03.
- React Testing Library. User-facing component testing. Bounded concept verification; original prose, code, data and exercises. Verified 2026-10-03.
- user-event. Interaction simulation. Bounded concept verification; original prose, code, data and exercises. Verified 2026-10-03.
- Vitest guide. Test runner setup. Bounded concept verification; original prose, code, data and exercises. Verified 2026-10-03.
- npm install. First installation and lockfile creation from a manifest. Bounded concept verification; original prose, code, data and exercises. Verified 2026-10-03.
- npm ci. Clean installation requires an existing agreeing lockfile. Bounded concept verification; original prose, code, data and exercises. Verified 2026-10-03.
What Will I Learn?
- Explain components, JSX, props and pure rendering.
- Use events, state snapshots and immutable identity-safe list updates.
- Build labeled controlled forms with recoverable validation.
- Choose shared state ownership and derive views/counts without redundant Effects.
- Synchronize a simple external browser property with cleanup.
- Run and interpret component tests, production builds and a manual browser checklist.
- Reconstruct and explain a bounded local task tracker with an honest handoff.
Course Content
React and JavaScript Foundations
-
A first component and the render model
-
JavaScript expressions, objects and arrays
-
JSX, components and props
-
A reproducible local project and browser checks
-
React Foundations: revised concept and behavior check