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.

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.

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.

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.

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.

Part VI: Capstone

The Knowledge Explorer

Requirements and acceptance criteria. No instructions.

All courses