[Beta]LisehAcademy
Back to courses

web-development

Professional React Development

Master modern React through rendering mental models, TypeScript, accessible interaction, routing, server state, React 19, testing, production engineering, and a portfolio-quality capstone.

65 lessons55h 0mintermediateoliseh Geneis

About this course

Master modern React through rendering mental models, TypeScript, accessible interaction, routing, server state, React 19, testing, production engineering, and a portfolio-quality capstone.

What you'll learn

1. React Readiness 2. React's Rendering Model 3. Components and Composition 4. State, Events, and Forms 5. Thinking in React 6. Effects and External Systems 7. TypeScript for React 8. Routing and URL State 9. Async and Server State 10. Modern React 11. Accessibility and Testing 12. Architecture and Production 13. Professional Capstone

Course modules

13 sections · 65 lessons

React Readiness

Bridge JavaScript foundations into the browser, modules, asynchronous work, package tooling, and professional debugging.

5 lessons
  1. 1.1Modules and the Vite Workflow
  2. 1.2Browser Events and the DOM
  3. 1.3Promises, async, and fetch
  4. 1.4Git, npm, and DevTools
  5. 1.5Readiness Diagnostic

React's Rendering Model

Understand components, JSX, render and commit, identity, keys, state preservation, and Strict Mode.

5 lessons
  1. 2.1Components and JSX
  2. 2.2Render Phase and Commit Phase
  3. 2.3State Identity and Position
  4. 2.4Keys and List Identity
  5. 2.5Strict Mode Debugging Lab

Components and Composition

Design component boundaries, props, children, reusable APIs, and semantic UI primitives.

5 lessons
  1. 3.1Props as Component Inputs
  2. 3.2Children and Composition
  3. 3.3Designing Component APIs
  4. 3.4Semantic UI Primitives
  5. 3.5Component Library Project

State, Events, and Forms

Model interactive state, immutable updates, reducers, controlled fields, validation, and submission behavior.

5 lessons
  1. 4.1Event Handlers and State
  2. 4.2Functional Updates and Batching
  3. 4.3Immutable Objects and Arrays
  4. 4.4Reducers for State Machines
  5. 4.5Accessible Forms and Validation

Thinking in React

Derive component hierarchies, choose state ownership, avoid duplicated state, and refactor large features safely.

5 lessons
  1. 5.1Build a Component Hierarchy
  2. 5.2Choose State Ownership
  3. 5.3Derived State and Data Flow
  4. 5.4Context Without Global Everything
  5. 5.5Refactor a God Component

Effects and External Systems

Use effects only for synchronization, with correct dependencies, cleanup, cancellation, and race handling.

5 lessons
  1. 6.1Effects as Synchronization
  2. 6.2Dependencies and Stale Closures
  3. 6.3Cleanup and Lifecycle
  4. 6.4Cancellation and Race Conditions
  5. 6.5Remove Unnecessary Effects

TypeScript for React

Type component contracts, events, refs, reducers, hooks, API data, and explicit UI state without falling back to any.

5 lessons
  1. 7.1Typing Props and Children
  2. 7.2Typing Events and Refs
  3. 7.3Typing State and Reducers
  4. 7.4Typing Hooks and API Data
  5. 7.5Typed Component Library Project

Routing and URL State

Build nested route layouts, loaders, actions, pending states, error boundaries, search parameters, and protected workflows.

5 lessons
  1. 8.1Nested Routes and Layouts
  2. 8.2Loaders and Route Data
  3. 8.3Actions and Mutations
  4. 8.4URL Search State
  5. 8.5Protected Routes and Sessions

Async and Server State

Model remote ownership with TanStack Query, caching, freshness, mutations, invalidation, pagination, and optimistic rollback.

5 lessons
  1. 9.1Server State Is Different
  2. 9.2Query Keys and Freshness
  3. 9.3Mutations and Invalidation
  4. 9.4Pagination and Infinite Queries
  5. 9.5Optimistic Updates and Rollback

Modern React

Apply React 19 actions, optimistic state, form status, use, Suspense, error boundaries, lazy loading, and React Compiler.

5 lessons
  1. 10.1Actions and Async Transitions
  2. 10.2useActionState and useFormStatus
  3. 10.3useOptimistic
  4. 10.4Suspense, use, and Error Boundaries
  5. 10.5React Compiler and Profiling

Accessibility and Testing

Build keyboard-operable interfaces and verify behavior with Testing Library, user-event, MSW, route tests, and accessibility tooling.

5 lessons
  1. 11.1Semantic HTML and Accessible Names
  2. 11.2Keyboard and Focus Management
  3. 11.3Dialogs, Menus, Tabs, and Status
  4. 11.4Test User Behavior
  5. 11.5Network and Route Testing

Architecture and Production

Organize features, secure browser applications, normalize failures, profile performance, automate CI, monitor, and deploy.

5 lessons
  1. 12.1Feature-Based Architecture
  2. 12.2API Boundaries and Error Normalization
  3. 12.3Authentication, Authorization, and Security
  4. 12.4Performance and Observability
  5. 12.5CI, Deployment, and Pull Requests

Professional Capstone

Plan, build, test, profile, secure, document, and deploy a portfolio-quality project management application.

5 lessons
  1. 13.1Capstone Discovery and Architecture
  2. 13.2Capstone Core Workflow
  3. 13.3Capstone Search and Collaboration
  4. 13.4Capstone Accessibility and Tests
  5. 13.5Capstone Production Review
Professional React Development | Liseh Academy