Skip to content

Developing Work Skills · Career & Development

Build Applications with React

Build, test and explain a learning-goal tracker with reusable React components.

Level
Intermediate
Estimated study
About 16 hours
Lessons
12 lessons in 4 modules
Format
Online, self-paced
Start your free 7-day trialAlready a student? Open course

Monthly: $0 today with a card, then $34 on day 8 unless you cancel before then. After the trial, 30 days' notice applies. Active on-campus students have academy access included. Check your existing student account before buying another subscription.

About this course

For learners who finished Interactive Browser Apps. In about 16 hours you will build a learning-goal tracker in React 19 with components, state, forms, routes, saved data and tests, and explain every design decision.

What you will be able to do

  • Build and explain components, props and state.
  • Handle forms, routing and asynchronous data with useful feedback.
  • Choose appropriate state boundaries and test a meaningful interaction.

Course outline

Module 1: Components and props

3 lessons · 3 h 45 min

Split an interface into components and pass information explicitly.

  1. Run React and explain the render boundary1 h 15 min
  2. Pass goal information through explicit props1 h 15 min
  3. Render collections with stable identity1 h 15 min

Module 2: State and forms

3 lessons · 3 h 45 min

Model user interactions and manage controlled inputs.

  1. Model completion with state and derived progress1 h 15 min
  2. Create goals with a controlled and validated form1 h 15 min
  3. Edit a goal while preserving saved data1 h 15 min

Module 3: Routes, effects and data

3 lessons · 3 h 45 min

Handle navigation and external data while understanding when an effect is needed.

  1. Add routes that work with Back and direct links1 h 15 min
  2. Load example data and handle stale requests1 h 15 min
  3. Persist the tracker with an explicit storage boundary1 h 15 min

Module 4: Finish a React application

3 lessons · 4 h 45 min

Check accessibility, test a key interaction and explain your component decisions.

  1. Build accessible filters without duplicated state1 h 15 min
  2. Test a state change and a rendered interaction1 h 30 min
  3. Deliver and explain the learning-goal tracker2 h
Get helpStart 7-day trial