Training Program
Learn React from the ground up with our focused curriculum covering components, hooks, state management, and modern React patterns.
Compare starting a React application with a framework, building from scratch and adding React to an existing project. The chapter helps you identify the setup path that matches your starting point and understand which surrounding application responsibilities each path leaves to you. Topics covered: Creating a React App; Build a React app from Scratch; Add React to an Existing Project.
Prepare the tools used while developing React components: an editor, TypeScript and React Developer Tools. These sections focus on making code easier to inspect and check, complementing project installation with a workflow for diagnosing component behaviour during development. Topics covered: Editor Setup; Using TypeScript; React Developer Tools.
Understand the React Compiler's role in optimisation and follow its adoption and debugging guidance. The chapter connects setup with incremental rollout, helping you inspect compatibility and behaviour as compiler support is introduced into an existing application. Topics covered: Introduction; Installation; Incremental Adoption; Debugging and Troubleshooting.
Build an interface from components and express its structure with JSX, props, conditional rendering and lists. Purity and component composition explain how to keep rendering predictable as the same components are reused with different input data.
Follow a user event through a state update and the next render. The chapter explains state snapshots and update queues, then applies those rules to objects and arrays so interactive components update data without mutating the values from an earlier render. Topics covered: Introduction; Responding to Events; State: A Component's Memory; State as a Snapshot; Queueing a Series of State Updates; Updating Objects in State; Updating Arrays in State.
Choose where state belongs and how related components share it. State structure, preservation and reset rules lead into reducers and context, showing how to coordinate a larger interface while keeping transitions and ownership of data understandable. Topics covered: Introduction; Reacting to Input with State; Choosing the State Structure; Sharing State Between Components; Preserving and Resetting State; Extracting State Logic into a Reducer; Passing Data Deeply with Context; Scaling Up with Reducer and Context.
Use refs and effects when a component needs to interact with the DOM or another external system. The chapter distinguishes necessary synchronisation from avoidable effects, then examines dependencies, lifecycle and custom hooks to make that integration easier to reason about.
Compare React Router's declarative, data and framework modes before selecting an approach. The chapter focuses on the capabilities and responsibilities associated with each mode, providing a starting point for the separate implementation tracks elsewhere in the course. Topics covered: Picking a Mode.
Build route modules that combine UI, data loading and actions within React Router's framework workflow. Rendering strategies, pending interfaces, testing and deployment connect those modules to the complete lifecycle of a routed application.
Define route objects and connect loaders, actions and navigation to application data. Pending UI, testing and custom-framework guidance explain how data-router features can fit an application whose wider build and rendering setup remains under your control.
Add routing to a React interface through declarative route configuration and navigation. Work with URL values to connect location to component behaviour, establishing the core routing model before adopting the additional loading and rendering capabilities of other modes. Topics covered: Installation; Routing; Navigating; URL Values.
Find implementation guidance for route-level concerns such as fetchers, uploads, validation, errors, middleware and navigation blocking. Additional recipes cover rendering, security, type safety and HTTP behaviour, helping you place a feature at the appropriate boundary of a routed application.
Understand the decisions behind routing behaviour, including concurrency, race conditions, code splitting and progressive enhancement. Sessions, cookies, state management and type safety connect the routing layer to broader application design rather than treating navigation as URL matching alone.
Plan migration using future flags and the upgrade paths from React Router v6 or Remix. The framework-adoption sections cover existing component routes and RouterProvider applications, allowing you to follow the route that matches your current architecture. Topics covered: Future Flags; Upgrading from v6; Upgrading from Remix; Framework Adoption from Component Routes; Framework Adoption from RouterProvider.
Understand Redux's core data-flow model and why Redux Toolkit is the recommended starting point presented in the material. Installation, ecosystem resources and examples help connect the concepts to a modern store setup before proceeding to longer tutorials. Topics covered: Getting Started with Redux; Installation; Why Redux Toolkit is How To Use Redux Today; Core Concepts; Learning Resources; Ecosystem; Examples.
Follow the Essentials and Fundamentals learning paths from store structure and reducer logic to asynchronous data and UI integration. The later Essentials sections develop normalised data, performance and RTK Query, providing a progression from basic updates to server-data workflows.
Solve application-level Redux concerns such as store configuration, reducer organisation, normalisation, selectors and middleware. TypeScript, testing, migrations, code splitting and server rendering extend those patterns to different project environments and maintenance tasks.
Examine the motivation, principles and history behind Redux and the role of middleware in its design. The style guide and Redux Toolkit overview connect that background to practical conventions, clarifying why modern Redux code differs from older examples. Topics covered: Motivation; Three Principles; Glossary; The History of Redux; Prior Art; Middleware; Redux Style Guide; Redux Toolkit Overview.
Explore Zustand's approach to shared state and compare its model with other state-management options. A tic-tac-toe tutorial connects the introduction to a concrete application, showing how components read store values and trigger changes as the interface evolves. Topics covered: Introduction; Comparison; Tutorial: Tic-Tac-Toe.
Update Zustand state while preserving the immutable relationships expected by consumers. The chapter examines slices, state merging, Map and Set values and patterns without store actions, helping you organise a store as its state and operations become more varied. Topics covered: Updating state; Practice with no store actions; Slices Pattern; Immutable state and merging; Map and Set Usage.
Examine how selected state affects component rerenders and where useShallow can help. URL-connected state and event handling in older React versions broaden the discussion to synchronisation boundaries and the render behaviour of applications with different runtime assumptions. Topics covered: Prevent rerenders with useShallow; Connect to state with URL; Event handler in pre React 18.
Progress from a first typed Zustand store to more advanced typing patterns. Auto-generated selectors connect store types to consumption, helping you maintain a useful relationship between the state shape, its actions and the component code that reads them. Topics covered: Beginner TypeScript Guide; Advanced TypeScript Guide; Auto Generating Selectors.
Integrate Zustand with Next.js and server-rendered applications while accounting for hydration and state initialisation. The props-based initialisation section explains another entry point for store values, helping you distinguish shared store logic from environment-specific setup. Topics covered: Setup with Next.js; SSR and Hydration; Initialize state with props.
Check store behaviour with tests and use consistent patterns for actions and state reset. The Flux-inspired guidance connects those techniques to code organisation, making it easier to isolate scenarios and restore a known starting state during testing or application use. Topics covered: Testing; Flux inspired practice; How to reset state.
Review the changes involved in moving to Zustand v4 and v5, including the older context API. The version-specific sections help you identify which store and consumer patterns need adjustment for the migration path that applies to your codebase. Topics covered: How to Migrate to v5 from v4; Migrating to v4; createContext from zustand/context.