Application Development

React.js

Components, state, effects, routing and data fetching, built into one sophisticated application that consumes real external data.

The course project

Knowledge Explorer

A real application with search, loading and error states, and reusable components.

course

17 modules · 34 lessons

Each module ends with a practice test, a graded build, and a step of the course project.

Part I: Foundations

Thinking in Components

Stop reaching into the page. Describe what it should look like and let React find the difference.

JSX in Depth

It looks like HTML and it is not. The differences are small, specific, and worth learning once.

Props

One component, many uses. Data flows down, and only down.

Section project · coming soon

The Profile Card Set

Components, props and lists: a reusable card drawn from data.

Part II: Behavior

State

Data a component remembers. Changing it is the only thing that causes a re-render.

Events and Forms

Responding to people, in a way that works for all of them.

Lists and Keys

Rendering many things, and telling React which is which.

Section project · coming soon

The Reading Tracker

State and events: add, finish and filter books in a list.

Part III: Real Data

The Four States

Loading, error, empty, and results. All four are real, and all four need designing.

Effects

Reaching outside React, and cleaning up after yourself.

Fetching Data

Real data, arriving late, sometimes out of order, sometimes not at all.

Section project · coming soon

The Archive Browser

Fetch a public dataset and show it with loading and error states.

Part IV: Structure

Custom Hooks

Sharing logic between components without sharing state.

Routing

More than one page, without losing the things a page gives you for free.

Shared State

Context and reducers, and knowing which problem each one solves.

Section project · coming soon

The Multi-View App

Routing and shared state across several screens.

Part V: Craft

Performance

Measure first. Almost every guess about what is slow is wrong.

Accessibility

The part that decides who can use what you built.

Structuring an Application

Where files go, and why that decision is really about change.

Building and Deploying

Getting it onto the internet, at a real address, that keeps working.

Section project · coming soon

A Polished, Accessible UI

Take an app and make it keyboard-friendly, fast and tested.

Part VI: Capstone

The Knowledge Explorer

Requirements and acceptance criteria. No instructions.

All courses