React
React, built the way real teams build it. Learn to think in components and ship interfaces that stay maintainable as they grow. You'll start with components, props, and state, then move through hooks, side effects, forms, data fetching, context, performance, and the patterns production apps are built on. Every exercise is a small piece of a real UI, so you learn not just how React works, but how to make the design decisions good frontend engineers make every day. Finish able to build, structure, and reason about React applications with confidence.
React 19Components & Props
The building blocks of every React app. Learn to break a UI into reusable components and pass data into them with props — the foundation everything else builds on.
Greeting Card
Reusable Button
Avatar With Initials
Product Price Card
Calculators & Derived State
In this module, you’ll learn how to avoid redundant data by using derived state - values computed from existing state instead of stored directly. You’ll also explore calculators, functions that automatically keep these values up to date whenever dependencies change.
Discount & Tax Calculator
Grade Average Calculator
EMI Calculator
Composition & Communication
Building UI from reusable wrappers that accept children, and lifting state up so a parent owns the shared value while children stay controlled and stateless.
Library Card
Temperature Sync
Composed Profile Section
Forms & Inputs
Controlled inputs and the submit lifecycle: validation, per-field inline errors, blocking invalid submits, and emitting a clean payload.
Contact Form Validation
Password Generator
Live Text Analyzer
Playlist Builder
Lists & Collections
Rendering arrays and updating them immutably: add, toggle, remove, keys and stable identity, derived counts and totals, and safe empty states.
Todo Application
Cart Quantity Manager
Image Gallery Selection
Contacts List with Async Load
Side Effects & Data Fetching
useEffect against a backend, where correctness depends on the failure modes: debouncing input-driven requests, ignoring stale responses so an older one can't overwrite a newer, retrying transient failures with backoff, polling until a terminal status, and cleaning up timers on unmount.
Movie Finder
Travel Catalog Pagination
Weather Forecast Load
Order Status Tracker
Multi-Resource Dashboard
Custom Hooks
Extracting stateful logic into reusable units tested on their own with renderHook. Learners rebuild useDebounce, useLocalStorage, useFetch and useForm, making real design calls about return shape, derived vs. stored values, dependencies and cleanup.
Search Suggestions Debounce Hook
Form Draft
Resource Loader Hook
Settings Form State Hook
Shopping Cart Hook
Reducers & State Logic
useReducer for state too tangled for scattered setState calls: named actions into a pure, unit-testable reducer, plus selectors that derive filtered lists, counts and flags rather than duplicating them in state.
Task Manager
Data Table Query Reducer
Data Grid Selection
Form State Reducer
Forms & Validation
Forms & Validation is a graduated React path where each question hands the candidate a finished, working UI and asks only for the pure logic behind it - validation, form state, and the rules that gate submission. It builds from per-field validation and submit gating, through dynamic array state and async hooks, up to a context-and-reducer multi-step wizard that composes it all.
Validated Registration Form
Guest Invite List
Async Username Availability
Multi-Step Wizard
Context & Shared State
Context & Shared State is a graduated React path where each question hands the candidate a finished UI and asks only for the pure logic behind shared state - what lives in context, how it changes, and who re-renders. It climbs from a permission-checked auth context, through a reducer-backed notification queue and a selector-subscribed store, up to a cached resource context (mini react-query) that composes it all.
Role-Based Access Context
Notification Center
Re-render-Optimized Store Context
Cached Resource Context
Async Patterns
Async Patterns is a graduated React path where each question hands the candidate a finished UI and asks only for the pure async logic behind it - how requests fire, settle, and update state. It builds from an optimistic like with rollback, through a guarded de-duped load-more feed and a parallel dashboard that degrades on partial failure, up to a fetch-once client-filtered dataset that derives every view from one cached set.
Optimistic Like Toggle
Load-More Feed
Parallel Dashboard Load
Client-Filtered Dataset
Performance Optimization
Performance Optimization is a graduated React path where each question hands the candidate a finished UI and asks only for the pure logic that keeps it fast - windowing, reference-preserving updates, and memoization boundaries. It builds from a virtualized transactions table, through a memo-optimized kanban board and a dashboard whose expensive aggregation recomputes only when its inputs change, up to an infinite virtualized feed over a normalized store that composes it all.