thumb image
Outline Last updated:

Course Overview

This fast-paced course equips you with the skills to build modern web applications using React, no prior React experience required.

Our Pedagogical Philosophy We believe that to truly master an abstraction, one must understand the layer directly beneath it. Rather than merely observing the outputs of React’s internals, we dissect the engine itself. Our curriculum moves beyond "by-example" learning to provide a rigorous exploration of the Fiber Architecture, the mechanics of reconciliation, and the fundamental nature of Hooks. By grounding our instruction in core Computer Science principles and Functional Programming patterns, we empower students to predict React’s behavior rather than simply reacting to it.

By the end of this course, you will be able to develop dynamic Web Applications with React, utilizing the latest features and best practices:

  • Build reusable, functional components and work with props, state, and hooks.
  • Leverage modern routing solutions to create dynamic, multi-page experiences.
  • Master modern testing practices to ensure reliability and maintainability.
  • Implement efficient form handling with validation and advanced techniques.
  • Explore and create custom hooks to encapsulate reusable logic.
  • Understand and apply rendering techniques (client-side, server-side, and static rendering).
  • Follow industry best practices for testing, performance optimization, and maintainability.
  • Gain a deep understanding of React's architecture, principles, and evolution.
  • Be aware of popular tools, frameworks, and component libraries used by React developers today.

Through hands-on labs and a non-trivial/real-world recipe application project, you'll tackle practical challenges and learn to implement robust solutions for modern React applications.

Course Prerequisites

Students for this course should be familiar with JavaScript and have a strong understanding of HTML/CSS. The course uses TypeScript so it is helpful students are already familiar with that. In addition, students benefit if they are familiar with a more "Functional" way of developing JavaScript/TypeScript. We recommend to follow our Introduction to Modern JavaScript and Introduction to TypeScript courses before.

Outline

Introduction

  • Understand the rationale behind React
  • Define the scope of the React library
  • Understand the overall architecture of React,
  • Understand its component-based design
  • Explore how React adheres to Declarative programming principles and incorporates concepts from Functional Programming.
  • Contrast with other popular frameworks and libraries (e.g., Vue, Angular, Svelte)
  • Recap important ECMAScript features critical for React development
  • Introduce relevant concepts from Functional Programming
  • Introduce foundational concepts: Elements, Components, JSX, Props, State, and Hooks.
  • Understand client-side rendering and server-side rendering (SSR) as techniques supported by React's architecture.
  • Introduce the Element Tree, Fiber Tree, the reconciliation process, and its impact on performance.
  • Discuss styling options, including Tailwind CSS, CSS in JS, CSS Modules, Styled Components, …

Elements, JSX and Components

Elements & Components

  • Understand React Nodes and in particular Elements
  • Understand the *React Element Tree and its React Root
  • Rendering React element trees to a page
  • Use React Components to break up your application
  • Appreciate how Components leverage aspects of Functional Programming (such as pure and immutable functions)
  • Work with props to pass data into components.
  • Understand and use the children prop for component composition.
  • Add type information to a component's props using TypeScript.
  • Use standard prop types (e.g, Render Props)
  • Discuss (legacy) patterns: Higher-Order Components (HOCs)
  • Provide an overview of the older React Class Components

JSX and Elements

  • Understand the JSX syntax and how it simplifies rendering logic
  • Explore what JSX transpiles/compiles into
  • Embed JavaScript expressions and functions inside JSX for dynamic rendering
  • Perform conditional rendering using different techniques (ternary operators, logical AND, and immediately invoked function expressions (IIFEs))
  • Learn how to create dynamic class lists efficiently and discuss tools (e.g., clsx/classnames)
  • Work with lists in JSX
  • Recognise the importance of providing a unique key when rendering lists and the potential issues with improper key usage

Fiber Architecture

  • Move beyond the Virtual DOM: Understand the limitations of the Stack Reconciler and why a rewrite was necessary.
  • Define the Fiber as a "unit of work" and a specialized virtual stack frame.
  • Explore the Fiber Tree structure: How React uses singly linked lists (return, child, and sibling pointers) to traverse the component tree.
  • Deep dive into the Work Loop: Understand how React performs work in small chunks to keep the main thread responsive.
  • Analyse the two phases of a render:
  • The Reconciliation/Render Phase: (Asynchronous, interruptible, and "pure").
  • The Commit Phase: (Synchronous, non-interruptible, and where DOM mutations occur).
  • Understand Concurrent Rendering: How Fiber enables "Time Slicing" and the prioritization.
  • Appreciate the Algebraic Effects influence: How Fiber allows React to "pause" and "resume" component execution (the foundation for Hooks).

Rendering Triggers & The Lifecycle of an Update

  • Distinguish between Rendering (the engine calculating changes) and Painting (the browser drawing pixels).
  • Identify the primary trigger for a render.
  • Understand the "Render-Phase" and the "Commit-Phase" in the context of an update lifecycle.
  • Explore the Bailout mechanism to avoid unnecessary work.
  • Discuss the role of Keys as stable identifiers that persist Fiber nodes across renders.

React Application Development

  • Discuss modern toolchains, along with considerations for new projects.
  • Introduce Vite as a popular choice for React Application Development
  • Discuss key configuration options for Vite
  • Discuss linters and plugins (eslint, Oxlint, …)

Testing

  • Understand the different types of tests: unit, integration, component, and end-to-end (e2e)
  • Explore common testing libraries and tools (vitest, js-dom, Chai, …)
  • Introduce and use React Testing Library (RTL)to test components
  • Write unit tests for components
  • Best practices for writing tests for components
  • Simulate user interactions and assert expected DOM updates using RTL Queries and jest-dom
  • Mock APIs and external dependencies for isolated tests using spying
  • Introduce snapshot testing to detect unintended UI changes
  • Discuss e2e testing (e.g., Playwright, Cypress) with a React Project

Hooks: State and Effects in Functional Components

  • Understand how Hooks allow components to be pure
  • Discuss common solutions to impurity and effects is in programing
  • hooks as Algebraic Effects
  • Understand the role of Fibre Architecture and its memoizedState
  • See how hooks tie into the render architecture
  • Analyse the Dispatch mechanism: How state updates are queued as "Update" objects on the Fiber.
  • Understand how React matches hooks on the Fiber and your code (The Rules of Hooks:

Core Built-in hook

  • State hooks with useReducer, useState and useActionState
  • Understand how useReducer is most of the time a better solution than useState
  • Synchronise external state with effect hooks:
    • useEffect: Understand the synchronisation lifecycle (setup, clean-up, and dependency arrays).
    • useLayoutEffect: The cost of "blocking" the browser paint for DOM measurements.
    • useInsertionEffect: Addressing CSS-in-JS performance bottlenecks.
  • Discuss common pitfalls and incorrect usage when using effect hooks
  • Mutable state in pure components using useRef
  • Use useRef to bypass the render cycle for mutable values and DOM access.
  • Use useImperativeHandle to control the abstraction boundary between parent and child components.

Performance & Memoization Hooks

  • Understand how reference are instable
  • Use useCallback and useMemo to maintain stable identities across render passes.
  • Deep dive into the "Shallow Comparison" check that governs hook execution in the Dependency Array.
  • Briefly discuss the React Compiler and how it aims to automate memoization by analysing component logic at build time.

Building Custom Hooks (Logic Abstraction)

  • Understand how to encapsulate complex logic by nesting standard hooks within custom abstractions.
  • Build reusable logic for data fetching, media queries, or form state.
  • Use React Testing Library (specifically renderHook) to verify stateful logic independently of the UI.
  • Avoid "Fat Hooks" and maintain the Single Responsibility Principle in hook design.

Routing

  • Discuss different routing libraries and their trade-offs
  • Contrast Component-based routing with Data-driven routing
  • Define routes using Object-based configuration (createBrowserRouter)
  • Explore route matching and the ranking algorithm
  • Implement path parameters for dynamic routing
  • Define nested routes and the <Outlet> component for hierarchical layouts
  • Use Loaders to fetch data before rendering to eliminate "waterfall" requests
  • Use Actions for data mutations and form handling
  • Imperative navigation using the useNavigate hook
  • Get route metadata using hooks (e.g., useParams, useLocation, useNavigation)
  • Use declarative navigation (Link, NavLink) and the isActive state
  • Handle errors gracefully using errorElement and route-level Error Boundaries
  • Passing state with the state property in navigation
  • Briefly contrast with file-based routing (Next.js) and type-safe routing (TanStack Router)

Forms

  • Understand uncontrolled components and the useRef hook for direct DOM access
  • Understand controlled components and the cost of state synchronization
  • Analyse the performance impact of re-rendering on every keystroke in large forms
  • Work with standard form elements (input, select, textarea, checkbox, radio)
  • Implement form submission and prevent default browser behavior
  • Add HTML5 validation vs. Schema-based validation (Zod, Yup)
  • React Actions: Transitioning from onSubmit handlers to the native action attribute
  • Use the useActionState hook to manage form state, errors, and pending transitions without manual useState
  • Implement Optimistic UI useOptimistic in forms to improve perceived latency
  • Use useTransition to manage pending states during heavy UI shifts based on Use Input
  • Use useDeferredValue to prioritise user input over expensive re-renders
  • Introduce React Hook Form as a common solution for developing rich and complex forms.

This React Masterclass course looks very interesting, I do however have a question