Frontend Development Using React Course

Lesson 1 • JavaScript Essentials for React

Reviews ES6+ syntax required throughout the course: arrow functions, destructuring, modules, and promises. Prevents syntax confusion in later React code.

Lesson 2 • Setting Up the Development Environment

Installs Node.js, npm, and VS Code, and then scaffolds a project with Vite. Students end the section with a running React app on localhost.

Lesson 3 • How Browsers Render Web Pages

Covers the DOM, CSSOM, and render pipeline from HTML parsing to paint. Establishes the browser model that explains why the Virtual DOM in React matters.

Lesson 4 • React's Place in the Ecosystem

Positions React as a UI library, not a full framework, and contrasts it with Angular and Vue. Clarifies what React solves and which companion tools fill the gaps.

Lesson 1 • Component Composition Patterns

Introduces children props, slot-style composition, and wrapper components. Prepares students to build flexible and reusable UI structures in later chapters.

Lesson 2 • Rendering Lists and Keys

Uses Array.map to render dynamic lists and explains why React requires stable key props. Directly applies JSX expressions and props from earlier sections.

Lesson 3 • Writing and Understanding JSX

Teaches JSX as syntactic sugar over React.createElement and covers its rules and limitations. Grounds students in what JSX compiles to before they write components.

Lesson 4 • Functional Components

Defines a functional component as a pure function returning JSX and covers naming, export patterns, and file conventions. Forms the atomic unit for all future chapters.

Lesson 1 • useRef for DOM and Mutable Values

Demonstrates useRef for direct DOM access and for persisting mutable values across renders without triggering re-renders. Complements useState for non-visual state.

Lesson 2 • Handling User Events

Covers synthetic events, event handler patterns, and preventing default browser behaviour. Combines with useState to produce interactive form and button components.

Lesson 3 • Introducing useState

Explains state as data that triggers re-renders and demonstrates useState for primitive and object values. Connects state changes to the reconciliation process from Chapter 1.

Lesson 4 • Side Effects with useEffect

Teaches useEffect for data fetching, subscriptions, and DOM manipulation after render. Covers the dependency array and cleanup functions to prevent memory leaks.

Lesson 1 • Inline Styles and Style Objects

Applies JavaScript style objects for dynamic, prop-driven styling and explains camelCase property names. Highlights performance tradeoffs compared to class-based approaches.

Lesson 2 • CSS-in-JS with Styled Components

Creates styled components using tagged template literals and passes props for dynamic styles. Compares CSS-in-JS to CSS Modules for team and project fit.

Lesson 3 • Utility-First CSS with Tailwind

Integrates Tailwind CSS into a Vite-React project and applies utility classes directly in JSX. Covers responsive prefixes and conditional class application.

Lesson 4 • Plain CSS and Global Styles

Imports global stylesheets and explains class name collisions in large applications. Motivates scoped styling solutions introduced in later sections.

Lesson 1 • Dynamic Routes and URL Parameters

Defines parameterised route segments and reads them with useParams. Enables detail pages driven by data IDs, a pattern used in most real applications.

Lesson 2 • Nested Routes and Layouts

Uses nested Route elements and the Outlet component to share persistent layouts across child routes. Reduces layout duplication in multi-section applications.

Lesson 3 • Setting Up React Router version 6

Installs React Router, wraps the application in BrowserRouter, and defines routes with the Routes and Route components. Produces a working two-page navigation example.

Lesson 4 • Protected Routes and Navigation Guards

Builds a wrapper component that redirects unauthenticated users using Navigate. Introduces authentication state as a routing concern without implementing a full authentication system.

Lesson 1 • Introduction to External State Libraries

Surveys Zustand and Redux Toolkit as alternatives to Context for large applications. Covers when built-in React state is insufficient and how external stores differ.

Lesson 2 • Complex State with useReducer

Models state transitions as pure reducer functions and dispatches typed actions. Pairs with Context to build a lightweight global state pattern.

Lesson 3 • React Context API

Creates a context, provides a value at the tree root, and consumes it with useContext. Covers context splitting to prevent unnecessary re-renders.

Lesson 4 • Building Custom Hooks

Extracts reusable stateful logic into custom hooks prefixed with use. Demonstrates hooks for data fetching, form handling, and local storage synchronisation.

Lesson 1 • Pagination and Infinite Scroll

Implements page-based and cursor-based data loading using the useInfiniteQuery hook from React Query. Covers UI patterns for load-more buttons and scroll-triggered fetching.

Lesson 2 • Fetching Data with useEffect and the Fetch API

Implements the fetch-on-mount pattern inside useEffect and manages loading and error state with useState. Establishes the baseline before introducing abstractions.

Lesson 3 • Axios for HTTP Requests

Replaces the fetch API with Axios for cleaner syntax, automatic JSON parsing, and interceptors. Covers creating an Axios instance with a base URL and default headers.

Lesson 4 • Optimistic Updates and Error Recovery

Updates the UI before server confirmation and rolls back on failure using React Query mutation callbacks. Improves perceived performance for write-heavy features.

Lesson 1 • Code Splitting and Lazy Loading

Splits the bundle by route and component using React.lazy and Suspense. Reduces initial load time by deferring non-critical JavaScript code.

Lesson 2 • Identifying Performance Bottlenecks

Uses React DevTools Profiler and browser performance tools to locate unnecessary re-renders and slow components. Establishes a measure-first optimisation workflow.

Lesson 3 • Production Build and Deployment

Runs the Vite production build, analyses the output, and deploys to a static hosting platform. Covers environment variables and build-time configuration.

Lesson 4 • Stable Callbacks with useCallback

Stabilises function references passed as props using useCallback to prevent child re-renders. Pairs with React.memo to complete the memoization toolkit.