Pebellslearn by building
RoadmapsMatrixCoursesSandboxSign in

Course details

React

Learn how React turns data into a user interface. You will write function components in JSX, pass data with props, keep changing data in state, respond to events, and use hooks for effects, refs and shared logic — all while building one small reading-list app.

Ready to learn4 sections · 18 lessons
Start learning

Course curriculum

Components and JSX5 lessons

Start a React project with Vite, write function components in JSX, pass data down with props, and combine components with children.

  1. Starting a Project with Vite12 min
  2. Function Components12 min
  3. JSX — Markup Inside JavaScript14 min
  4. Props — Data Flowing Down14 min
  5. Composition and children15 min
Rendering4 lessons

See how React renders and why components must be pure, then show content conditionally, render lists with proper keys, and handle user events.

  1. How Rendering Works14 min
  2. Conditional Rendering13 min
  3. Lists and Keys15 min
  4. Handling Events14 min
State4 lessons

Remember values between renders with useState, follow the rules every hook depends on, organise many updates with useReducer, and share values across the tree with useContext.

  1. useState — Memory for a Component16 min
  2. The Rules of Hooks12 min
  3. useReducer — State Changes by Name16 min
  4. useContext — Skipping the Middlemen15 min
Effects, Refs and Reuse5 lessons

Sync with outside systems using useEffect and cleanup, hold DOM nodes and hidden values with useRef, cache slow work with useMemo and useCallback, and package logic into custom hooks.

  1. useEffect — Syncing with the Outside World16 min
  2. Mount, Update, Unmount — Effect Cleanup15 min
  3. useRef — Remembering Without Re-rendering14 min
  4. useMemo and useCallback — Caching Between Renders15 min
  5. Custom Hooks — Reusing Logic17 min