Skip to main content
Pouyam Pouyam
Sign up Login
Academy
Intermediate Code District

React

Components, hooks and state for real interfaces.

React is one of the most widely used libraries for building user interfaces, and React 19 brings Actions, the new use API and Server Components into everyday code. This track takes you from your first component to the patterns real apps rely on: props and state, lists and forms, effects and refs, context, reducers and custom hooks, and finally Suspense, Server Components, error boundaries, testing and accessibility.

You already know JavaScript, so every lesson goes straight to how React thinks, with examples from a small social app called Nova: a feed, like buttons and a leaderboard.

Lessons
24
Time
3 h
Level
Intermediate
Start the track · Components and the tree
  • Bronze open
  • Silver open
  • Gold locked

Ready to prove it?

Three exams are waiting: Bronze, Silver and Gold.

Go to the exams

What you'll be able to do

  • Break any screen into components and write clean JSX
  • Manage state with useState and useReducer, and update it without mutation
  • Build lists, controlled inputs and forms with React 19 Actions
  • Use effects and refs only where they belong, and clean up after them
  • Share logic with context and custom hooks, and memoize only when it pays off
  • Load data with Suspense, understand Server Components, and test accessible components

The journey

  1. 1
    Module 1

    Thinking in React

    Components, the rules of JSX, what rendering really means, and a first post card.

    0 / 4
    2. JSX rules Lesson · 7 min · +20 XP
    3. Rendering, purity and Strict Mode Lesson · 7 min · +20 XP
    4. Practice: your first PostCard Practice · 6 min · +25 XP
  2. 2
    Module 2

    Props and state

    Pass data down with props, remember values with state, and update it without mutating.

    0 / 4
    1. Props and children Lesson · 7 min · +20 XP
    2. State with useState Lesson · 7 min · +20 XP
    3. Update and share state Lesson · 8 min · +25 XP
    4. Boss: props and state Boss fight · 8 min · +40 XP
  3. 3
    Module 3

    Lists, events and forms

    Render lists with keys, handle events, control inputs and submit forms with Actions.

    0 / 4
    1. Lists and keys Lesson · 6 min · +20 XP
    2. Events and controlled inputs Lesson · 7 min · +20 XP
    3. Form actions and useActionState Lesson · 8 min · +25 XP
    4. Practice: a comment box Practice · 7 min · +25 XP
  4. 4
    Module 4

    Effects and refs

    Sync with the outside world, fetch data safely, use refs, and skip effects you do not need.

    0 / 4
    1. Effects and cleanup Lesson · 8 min · +25 XP
    2. Fetching data safely Lesson · 7 min · +25 XP
    3. Refs and the DOM Lesson · 6 min · +20 XP
    4. Boss: effects and refs Boss fight · 8 min · +45 XP
  5. 5
    Module 5

    Sharing logic

    Context, reducers, custom hooks, and memoization only where it pays off.

    0 / 4
    1. Context and useReducer Lesson · 8 min · +25 XP
    2. Custom hooks Lesson · 7 min · +25 XP
    3. memo, useMemo and useCallback Lesson · 8 min · +25 XP
    4. Practice: a leaderboard hook Practice · 7 min · +25 XP
  6. 6
    Module 6

    Modern React

    Suspense and use, Server Components, error boundaries, testing and accessibility.

    0 / 4
    1. Suspense, use and error boundaries Lesson · 8 min · +25 XP
    2. Server Components and frameworks Lesson · 7 min · +25 XP
    3. Testing and accessibility Lesson · 7 min · +20 XP
    4. Final boss Boss fight · 10 min · +50 XP

Quick navigation

ExploreAcademyExamsNewsVideosReelsMusicGamesAIStudioTranslateChatRoomLeaderboardReferralWalletHelp a PawPoke WorldBlogShopSettings