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, 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 React's virtual DOM 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 what companion tools fill the gaps.

Lesson 1 • Component Composition Patterns

Introduces children props, slot-style composition, and wrapper components. Prepares students to build flexible, 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 vs. 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 apps. 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 v6

Installs React Router, wraps the app 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 auth system.

Lesson 1 • Introduction to External State Libraries

Surveys Zustand and Redux Toolkit as alternatives to Context for large apps. 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 sync.

Lesson 1 • Pagination and Infinite Scroll

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

Lesson 2 • Fetching Data with useEffect and 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 fetch with Axios for cleaner syntax, automatic JSON parsing, and interceptors. Covers creating an Axios instance with base URL and default headers.

Lesson 4 • Optimistic Updates and Error Recovery

Updates 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.

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 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 memoisation toolkit.