React with TypeScript

Local learning package · 2026-10-14.1

Rebuild Harbor Together as an accessible event explorer. Learn why components render, which values need state, and how to handle uncertain data without pretending a local demo is a real service.

Start after the companion HTML/CSS and Basic JavaScript courses. This course introduces TypeScript, npm and React; it assumes you already understand browser forms, objects, modules and promises.

Your learning route

Module 01

Set up a repeatable React workspace

Practice · Run checkpoint — download the course ZIP (Extract it and follow the included setup instructions for checkpoints/01/index.html.)

Module 02

Describe UI with components and props

Practice · Run checkpoint — download the course ZIP (Extract it and follow the included setup instructions for checkpoints/02/index.html.)

Module 03

Model trustworthy event data

Practice · Run checkpoint — download the course ZIP (Extract it and follow the included setup instructions for checkpoints/03/index.html.)

Module 04

Connect interactions to state

Practice · Run checkpoint — download the course ZIP (Extract it and follow the included setup instructions for checkpoints/04/index.html.)

Module 05

Keep identity through changing lists

Practice · Run checkpoint — download the course ZIP (Extract it and follow the included setup instructions for checkpoints/05/index.html.)

Module 06

Build an honest accessible practice form

Practice · Run checkpoint — download the course ZIP (Extract it and follow the included setup instructions for checkpoints/06/index.html.)

Module 07

Synchronize with browser systems

Practice · Run checkpoint — download the course ZIP (Extract it and follow the included setup instructions for checkpoints/07/index.html.)

Module 08

Handle remote-shaped data locally

Practice · Run checkpoint — download the course ZIP (Extract it and follow the included setup instructions for checkpoints/08/index.html.)

Module 09

Give screens meaningful URLs

Practice · Run checkpoint — download the course ZIP (Extract it and follow the included setup instructions for checkpoints/09/index.html.)

Module 10

Test behavior and prepare a build

Practice · Run checkpoint — download the course ZIP (Extract it and follow the included setup instructions for checkpoints/10/index.html.)

Check understanding

Build independently

Capstone brief and 30-point rubric · Learner starter — download the course ZIP (Extract it and follow the included setup instructions for capstone/starter/index.html.)

The starter runs but its acceptance tests begin red. Implement your own model and UI, add tests, and explain the result before opening the separate reference walkthrough linked from the brief.

Evidence and boundaries

All events and form values are fictional. Nothing is submitted or published. Exact package versions, tests and remaining checks are documented; passing code checks does not certify browser accessibility.

Download this source file