React JS Frontend Development Course

Lesson 1 • JavaScript Essentials for React

Reviews ES6+ syntax—arrow functions, destructuring, modules, and promises—that React code relies on daily. Ensures students read and write modern JS without friction.

Lesson 2 • How Browsers Render Web Pages

Covers the DOM, CSSOM, and render pipeline that browsers use to display content. Grounds React's virtual DOM concept in real browser behaviour.

Lesson 3 • CSS Fundamentals for Component Styling

Covers the box model, specificity, flexbox, and grid as the styling tools used throughout React projects. Prepares students to style components confidently.

Lesson 4 • HTML and Semantic Markup Essentials

Reviews semantic HTML5 elements and document structure required for accessible React output. Connects proper markup to SEO and screen-reader compatibility.

Lesson 1 • Rendering Lists and Conditional UI

Teaches array mapping, key props, and conditional rendering patterns used in nearly every React UI. Builds on JSX expressions introduced earlier in the chapter.

Lesson 2 • Writing and Understanding JSX

Teaches JSX syntax rules, expressions, and how Babel transforms JSX to React.createElement calls. Connects JSX to the HTML knowledge from Chapter 1.

Lesson 3 • Component Composition and Children Prop

Introduces composition over inheritance using the children prop and slot-like patterns. Students build flexible wrapper components that accept arbitrary child content.

Lesson 4 • Passing and Receiving Props

Explains how parent components pass data to children through props and how children consume them. Reinforces one-way data flow as React's core design principle.

Lesson 1 • Lifting State and Sharing Data

Explains lifting state to a common ancestor to share data between sibling components. Reinforces one-way data flow and prepares students for context in the next chapter.

Lesson 2 • Handling Events in React

Teaches synthetic events, event handlers, and form handling patterns that connect user actions to state updates. Builds on useState to create interactive components.

Lesson 3 • Understanding State and Reactivity

Defines state as data that triggers re-renders and contrasts it with props and regular variables. Establishes the mental model needed before introducing hook APIs.

Lesson 4 • Managing Complex State with useReducer

Introduces useReducer for state logic that involves multiple sub-values or complex transitions. Students refactor useState examples into reducer-based components.

Lesson 1 • Building a Theme and Auth Context

Applies context to two practical use cases: theme toggling and authentication state. Reinforces context patterns with real-world scenarios students encounter on the job.

Lesson 2 • React Context API for Global State

Teaches createContext, Provider, and useContext to share values across the component tree. Solves the prop drilling problem identified in Chapter 3.

Lesson 3 • Custom Hooks for Reusable Logic

Extracts repeated effect and state logic into custom hooks following the use prefix convention. Students produce shareable hooks like useFetch and useLocalStorage.

Lesson 4 • Fetching Data from APIs

Covers fetch and async patterns inside useEffect, loading states, and error handling. Students build a component that retrieves and displays remote JSON data.

Lesson 1 • Protected Routes and Navigation Guards

Implements route protection using the auth context from Chapter 4 and the Navigate component. Students redirect unauthenticated users to a login page.

Lesson 2 • Client-Side Routing Concepts

Explains how single-page applications simulate navigation without full page reloads using the History API. Contrasts client-side and server-side routing models.

Lesson 3 • Defining Routes and Navigation Links

Covers BrowserRouter, Routes, Route, and Link components to map URLs to components. Students build a basic multi-page layout with a persistent navigation bar.

Lesson 4 • Dynamic Routes and URL Parameters

Teaches parameterised routes and the useParams hook to render detail pages from URL segments. Builds on list rendering from Chapter 2 to create master-detail UIs.

Lesson 1 • CSS Modules and Scoped Styles

Teaches CSS Modules syntax and how Vite generates locally scoped class names to prevent conflicts. Students convert a global stylesheet to modular component styles.

Lesson 2 • Utility-First CSS with Tailwind

Introduces Tailwind's utility class model, configuration, and responsive design prefixes. Students rebuild a component using only utility classes to compare approaches.

Lesson 3 • Animations and Transitions in React

Covers CSS transitions, keyframe animations, and the Framer Motion library for component-level animation. Students add entrance and exit animations to routed pages.

Lesson 4 • CSS-in-JS with Styled-Components

Covers tagged template literals, dynamic props-based styles, and theming with styled-components. Connects to the theme context built in Chapter 4.

Lesson 1 • Profiling and Measuring Performance

Applies the React DevTools Profiler and browser performance panel to locate bottlenecks. Students produce a before-and-after performance report for a real component.

Lesson 2 • Understanding React Rendering Behaviour

Explains when and why React re-renders components and how the reconciler decides what to update. Provides the mental model required before applying any optimization.

Lesson 3 • Memoization with React.memo and useMemo

Teaches React.memo for component memoization and useMemo for expensive computations. Students apply both to a slow list component and measure the improvement.

Lesson 4 • Stable References with useCallback

Covers useCallback to stabilize function references passed as props to memoized children. Builds directly on React.memo knowledge from the previous section.

Lesson 1 • Testing User Interactions and Async Behaviour

Uses userEvent and waitFor to simulate clicks, form submissions, and async data loading. Connects to the event handling and fetch patterns from Chapters 3 and 4.

Lesson 2 • Unit Testing with Vitest and React Testing Library

Covers Vitest setup, render utilities, and queries from React Testing Library to test components in isolation. Students write tests for components built in earlier chapters.

Lesson 3 • Testing Fundamentals and Strategy

Introduces the testing pyramid, test types, and the philosophy of testing behaviour over implementation. Sets the strategy students apply throughout this chapter.

Lesson 4 • Building and Deploying to Production

Covers Vite production builds, environment variables, and deploying to a static hosting platform with a CI/CD deployment pipeline. Students ship a live, publicly accessible application.