React Mastery

What you'll learn

• Component CampWhat React is, JSX rules, components and props, children and conditional rendering.
• State SpringsLists and keys, useState, events, immutable updates and lifting state up.
• Form FieldsControlled inputs, selects and checkboxes, submitting, validation and derived state.
• Effect FallsuseEffect, dependencies, cleanup, fetching data and race conditions.
• Context CanyonProp drilling, context, useReducer, reducer plus context and state structure.
• Hook HarboruseRef, DOM refs, custom hooks, debouncing and useId.
• Render RidgeHow rendering works, keys and identity, memo, useMemo and useCallback, Suspense and rendering less.
• App SummitComponent architecture, a tiny router, error boundaries, testable UI and the boss board.

Course outline

8 units and 40 lessons. Each lesson has a short read with examples you run, a quiz, and coding problems tested in your browser; most have a step-through visualizer.

1. 1

   Unit 1:Component Camp

   What React is, JSX rules, components and props, children and conditional rendering.

   Free
   1. ⚛
      What Is React? UI as a function of data: components, JSX, and how this course runs and grades your apps.
      1 problem
   2. </>
      JSX Rules One root element, closed tags, className and camelCase props, curly braces for JavaScript, and style objects.
      1 problem
   3. fn
      Components and Props Split the UI into components and pass them data with props: destructuring, defaults and one-way data flow.
      2 problems
   4. [ ]
      Children and Composition The children prop, wrapper components and building screens by nesting small pieces.
      1 problem
   5. ?:
      Conditional Rendering Show different UI for different data: if and early returns, the ternary, && and the 0 trap.
      2 problems
2. 2

   Unit 2:State Springs

   Lists and keys, useState, events, immutable updates and lifting state up.

   Free
   1. […]
      Rendering Lists and Keys Turn arrays into elements with map, filter before you render, and give every item a stable key.
      1 problem
   2. [s]
      State with useState Give a component memory: useState, setters, re-renders and why state is a snapshot.
      2 problems
   3. on
      Responding to Events onClick and friends, passing handlers down, reading the event, preventDefault and stopPropagation.
      2 problems
   4. {…}
      Updating Objects and Arrays Never mutate state: copy with spread, update arrays with map, filter and slice, and why React needs new objects.
      2 problems
   5. ↑
      Lifting State Up When two components need the same data, move the state to their closest common parent and pass it down.
      1 problem
3. 3

   Unit 3:Form Fields

   Controlled inputs, selects and checkboxes, submitting, validation and derived state.

   Pro
   1. [_]
      Controlled Inputs Let state drive the input: value plus onChange, textareas, and transforming what the user types.
      1 problem
   2. ☑
      Selects, Checkboxes and Radios value on selects, checked on checkboxes and radios, and keeping several choices in state.
      1 problem
   3. ⏎
      Submitting Forms onSubmit with preventDefault, Enter to submit for free, clearing fields, and reading FormData.
      1 problem
   4. !
      Validating Input Compute errors from state, show them at the right moment with touched fields, and block invalid submits.
      1 problem
   5. =
      Derived State Store the minimum and compute the rest during render: filtered lists, totals and flags.
      1 problem
4. 4

   Unit 4:Effect Falls

   useEffect, dependencies, cleanup, fetching data and race conditions.

   Pro
   1. ⟳
      Synchronizing with useEffect Effects run after React updates the screen and keep something outside React in sync: the title, a timer, a connection.
      1 problem
   2. [ ]
      Effect Dependencies No array, an empty array or a list of values: when effects re-run, and why every value they read belongs in the list.
      1 problem
   3. ⌫
      Cleaning Up Effects Return a cleanup function to stop timers, remove listeners and disconnect, before the next run and on unmount.
      2 problems
   4. ⇣
      Fetching Data Load data in an effect, track loading and error states, and render each state clearly.
      1 problem
   5. ⇄
      Race Conditions When answers arrive out of order: ignore stale responses with a cleanup flag or cancel them with AbortController.
      1 problem
5. 5

   Unit 5:Context Canyon

   Prop drilling, context, useReducer, reducer plus context and state structure.

   Pro
   1. ↓↓
      Passing Data Deeply Props through many layers: when it is fine, when it hurts, and the options before reaching for context.
      1 problem
   2. ◎
      Context createContext, providing a value to a whole subtree, useContext, defaults and when context fits.
      1 problem
   3. ƒ
      Reducers with useReducer Move update logic into one pure function: actions, dispatch, and when a reducer beats several useStates.
      1 problem
   4. ◎ƒ
      Reducer Plus Context Scale up: provide state and dispatch through context, with small custom hooks to read them.
      1 problem
   5. ⌗
      Choosing the State Structure Avoid duplicated and contradictory state: store ids, not copies; group related values; flatten nested data.
      1 problem
6. 6

   Unit 6:Hook Harbor

   useRef, DOM refs, custom hooks, debouncing and useId.

   Pro
   1. &
      Remembering with useRef A box that survives renders without causing them: timer ids, previous values and counters nobody sees.
      1 problem
   2. ⌖
      Refs to DOM Elements The ref attribute, focusing and scrolling, focusing after a re-render, and keeping imperative code small.
      1 problem
   3. use
      Custom Hooks Extract stateful logic into your own use… functions: naming, sharing logic not state, and what to return.
      1 problem
   4. ⏱
      Hook Recipes: Debounce and Storage Two everyday hooks: useDebouncedValue for typing, and useLocalStorage for state that survives a reload.
      2 problems
   5. #
      useId and Refs as Props Unique ids for accessible labels in reusable components, and passing a ref down to a child's DOM node (React 19).
      1 problem
7. 7

   Unit 7:Render Ridge

   How rendering works, keys and identity, memo, useMemo and useCallback, Suspense and rendering less.

   Pro
   1. ⟲
      How Rendering Works Trigger, render, commit; why children re-render with their parent; state lives at a position; resetting with a key.
      1 problem
   2. ≡
      Skipping Renders with memo memo() skips re-rendering a component whose props did not change, and why new objects and functions defeat it.
      1 problem
   3. ⧉
      useMemo and useCallback Cache an expensive calculation between renders, and keep a function stable for memoized children.
      1 problem
   4. …
      lazy and Suspense Load a component only when it is needed, and show a fallback while it loads.
      1 problem
   5. ⋯
      Rendering Less Long lists: paginate or window them, and keep typing responsive with useTransition and useDeferredValue.
      1 problem
8. 8

   Unit 8:App Summit

   Component architecture, a tiny router, error boundaries, testable UI and the boss board.

   Pro
   1. ⊞
      Thinking in React From a mockup to an app: split it into components, build it static, find the minimal state, place it, add inverse data flow.
      1 problem
   2. /
      A Tiny Router Pages from state: a current path, a Link that navigates without reloading, a not-found page, and context to share it.
      1 problem
   3. ⚠
      Error Boundaries Contain a crash: what boundaries catch, where to place them, and fallbacks with a retry.
      1 problem
   4. ✓
      Testing Mindset Test what users see and do: roles and accessible names, behavior over implementation, and how this course grades you.
      1 problem
   5. ♛
      Boss: The Task Board Everything at once: a reducer, derived counts, filtering, context, and persistence that survives a remount.
      2 problems