Module 08 of 14

React

Lessons

About This Module

React is the framework you'll build most frontend interfaces with — breaking a UI into reusable components and managing how they display and update as data changes. This module covers the core mental model first (JSX, props, state), then the hooks and patterns you'll reach for in real applications.

It's a broad topic like JavaScript itself, so there are more lessons than usual — work through them at your own pace, then move on to Type Checkers to add type safety on top.

Lessons

10 videos · 1 article
01

Why Use a Framework?

What React solves that plain JavaScript makes tedious, and how component-based UI thinking works.

02

JSX & Components

Writing markup inside JavaScript with JSX, and building your first function components.

03

Props & Component Composition

Passing data into components and composing smaller components into larger UIs.

04

State & useState

Giving a component memory with state, and re-rendering the UI when that state changes.

05

Handling Events in React

Responding to clicks, input, and other user actions the React way.

06

useEffect & Side Effects

Running code in response to renders — fetching data, subscriptions, and cleanup.

07

Conditional Rendering & Lists

Showing and hiding UI based on state, and rendering dynamic lists of data with keys.

08

Forms in React

Controlled inputs, handling form submission, and basic validation patterns.

09

Context API & Avoiding Prop Drilling

Sharing state across distant components without passing props down through every layer.

10

Custom Hooks

Extracting reusable logic out of components into your own hooks.

11

React Reference Guide

A written reference covering hooks, patterns, and gotchas — good for a quick lookup after watching the videos.

Article