React & Modern Frontend (Next.js) — Zero to Hero

2h 52m total

Build production user interfaces with React 19 and Next.js 15. Starting from your first component, you'll master JSX, props and composition, the re-render model, hooks (useState, useEffect, useRef, useMemo, useCallback, and custom hooks), Context, controlled forms, and data fetching with loading and error states. Then you move to the framework layer: the Next.js App Router, file-based routing and layouts, Server vs Client Components, rendering strategies (SSG, SSR, ISR, and streaming), performance and memoization, TypeScript for props and hooks, and testing with React Testing Library — finishing with a capstone app. Assumes you already know JavaScript and TypeScript (see the JS/TS course); this one teaches the framework on top.

React CoreFrontend WebCareer SWE Foundations

Includes:

Cheat sheet
Progress tracking
Audio narration
Mentor context

Outline

Enroll to unlock

1.
Toolchain, JSX, and Your First Component
24 min3 lessons
1. Locked — enroll to unlock. Scaffold a Next.js app8 min
2. Locked — enroll to unlock. JSX and its rules6 min
3. Locked — enroll to unlock. Your first component and how React renders10 min
2.
Components, Props, Composition, and Lists
19 min3 lessons
1. Locked — enroll to unlock. Props: passing data into components6 min
2. Locked — enroll to unlock. Composition and children5 min
3. Locked — enroll to unlock. Rendering lists and the key rule8 min
3.
State, Events, and the Re-render Model
18 min3 lessons
1. Locked — enroll to unlock. useState and event handling6 min
2. Locked — enroll to unlock. State is a snapshot; updates are batched6 min
3. Locked — enroll to unlock. Never mutate state6 min
4.
Effects, Cleanup, and Fetching Data
17 min3 lessons
1. Locked — enroll to unlock. useEffect and the dependency array6 min
2. Locked — enroll to unlock. Cleanup functions5 min
3. Locked — enroll to unlock. Fetching data with loading and error states6 min
5.
Refs, Memoization, Custom Hooks, and Context
21 min3 lessons
1. Locked — enroll to unlock. useRef: escape hatch from rendering5 min
2. Locked — enroll to unlock. Memoization and custom hooks10 min
3. Locked — enroll to unlock. Context for shared state6 min
6.
Controlled Forms, Validation, and Derived State
17 min3 lessons
1. Locked — enroll to unlock. Controlled inputs5 min
2. Locked — enroll to unlock. Forms, submission, and validation6 min
3. Locked — enroll to unlock. Conditional rendering and derived state6 min
7.
The Next.js App Router: Routing, Layouts, Server vs Client
18 min3 lessons
1. Locked — enroll to unlock. File-based routing and layouts6 min
2. Locked — enroll to unlock. Server Components vs Client Components6 min
3. Locked — enroll to unlock. Navigation, params, and route handlers6 min
8.
Rendering Strategies and Performance
18 min3 lessons
1. Locked — enroll to unlock. Static, dynamic, incremental, and streaming6 min
2. Locked — enroll to unlock. Server-side data fetching and caching6 min
3. Locked — enroll to unlock. Memoization and client performance6 min
9.
TypeScript, Testing, and a Capstone App
20 min3 lessons
1. Locked — enroll to unlock. Typing props, state, and hooks6 min
2. Locked — enroll to unlock. Testing with React Testing Library6 min
3. Locked — enroll to unlock. Capstone: build it end to end8 min

Includes:

Cheat sheet
Progress tracking
Audio narration
Mentor context

Outline

Enroll to unlock

1.
Toolchain, JSX, and Your First Component
24 min3 lessons
1. Locked — enroll to unlock. Scaffold a Next.js app8 min
2. Locked — enroll to unlock. JSX and its rules6 min
3. Locked — enroll to unlock. Your first component and how React renders10 min
2.
Components, Props, Composition, and Lists
19 min3 lessons
1. Locked — enroll to unlock. Props: passing data into components6 min
2. Locked — enroll to unlock. Composition and children5 min
3. Locked — enroll to unlock. Rendering lists and the key rule8 min
3.
State, Events, and the Re-render Model
18 min3 lessons
1. Locked — enroll to unlock. useState and event handling6 min
2. Locked — enroll to unlock. State is a snapshot; updates are batched6 min
3. Locked — enroll to unlock. Never mutate state6 min
4.
Effects, Cleanup, and Fetching Data
17 min3 lessons
1. Locked — enroll to unlock. useEffect and the dependency array6 min
2. Locked — enroll to unlock. Cleanup functions5 min
3. Locked — enroll to unlock. Fetching data with loading and error states6 min
5.
Refs, Memoization, Custom Hooks, and Context
21 min3 lessons
1. Locked — enroll to unlock. useRef: escape hatch from rendering5 min
2. Locked — enroll to unlock. Memoization and custom hooks10 min
3. Locked — enroll to unlock. Context for shared state6 min
6.
Controlled Forms, Validation, and Derived State
17 min3 lessons
1. Locked — enroll to unlock. Controlled inputs5 min
2. Locked — enroll to unlock. Forms, submission, and validation6 min
3. Locked — enroll to unlock. Conditional rendering and derived state6 min
7.
The Next.js App Router: Routing, Layouts, Server vs Client
18 min3 lessons
1. Locked — enroll to unlock. File-based routing and layouts6 min
2. Locked — enroll to unlock. Server Components vs Client Components6 min
3. Locked — enroll to unlock. Navigation, params, and route handlers6 min
8.
Rendering Strategies and Performance
18 min3 lessons
1. Locked — enroll to unlock. Static, dynamic, incremental, and streaming6 min
2. Locked — enroll to unlock. Server-side data fetching and caching6 min
3. Locked — enroll to unlock. Memoization and client performance6 min
9.
TypeScript, Testing, and a Capstone App
20 min3 lessons
1. Locked — enroll to unlock. Typing props, state, and hooks6 min
2. Locked — enroll to unlock. Testing with React Testing Library6 min
3. Locked — enroll to unlock. Capstone: build it end to end8 min

Outline

Toolchain, JSX, and Your First Component

Components, Props, Composition, and Lists

State, Events, and the Re-render Model

Effects, Cleanup, and Fetching Data

Refs, Memoization, Custom Hooks, and Context

Controlled Forms, Validation, and Derived State

The Next.js App Router: Routing, Layouts, Server vs Client

Rendering Strategies and Performance

TypeScript, Testing, and a Capstone App

Outline

Toolchain, JSX, and Your First Component

Components, Props, Composition, and Lists

State, Events, and the Re-render Model

Effects, Cleanup, and Fetching Data

Refs, Memoization, Custom Hooks, and Context

Controlled Forms, Validation, and Derived State

The Next.js App Router: Routing, Layouts, Server vs Client

Rendering Strategies and Performance

TypeScript, Testing, and a Capstone App