Module 12 Web Engineering

React & Modern Frontend Frameworks

React is currently the most widely used frontend framework in production, and it's the lens through which most job descriptions define 'frontend engineering.' But knowing how to generate React components with AI is very different from understanding why React works the way it does — why the rules of hooks exist, why stale closures happen in useEffect, why re-renders happen when they do. This module builds the deep understanding that lets you use React correctly, not just fluently. You'll start from the problem React solves — managing DOM state at scale — and build up to hooks, composition patterns, forms, routing, and data fetching. You'll understand the virtual DOM reconciliation algorithm well enough to avoid unnecessary re-renders. You'll write custom hooks that genuinely encapsulate logic. You'll understand controlled versus uncontrolled components, not just which one to use. The module ends with Next.js — the dominant full-stack React framework — covering the App Router, server versus client components, static generation, server-side rendering, and API routes. By the end, you'll be able to build and deploy a real Next.js application with an understanding of every architectural decision you're making, not just a copy of the tutorial.

What You'll Learn

  • 1
    Why Frameworks Exist — The DOM manipulation problem at scale, declarative vs imperative UI
  • 2
    React Fundamentals — JSX, components, props, one-way data flow, React DevTools
  • 3
    State and Hooks — useState, useEffect, useRef, stale closures, and re-render mechanics
  • 4
    Component Composition Patterns — Compound components, render props, custom hooks, useMemo
  • 5
    Forms in React — Controlled components, React Hook Form, multi-step forms
  • 6
    Client-Side Routing and Data Fetching — React Router, React Query, and SWR patterns
  • 7
    Building a Component Library — Button, Input, Modal, Dropdown with accessibility
  • 8
    Next.js Basics — App Router, server vs client components, SSG, SSR, API routes, Vercel

Capstone Project: Build a Real-Time Dashboard Application with Next.js

Build a full-stack real-time dashboard using Next.js App Router — with server components for the initial data load, client components for live updates via WebSocket, React Query for cache management, and a custom component library for the UI elements. The dashboard must handle loading states, error boundaries, optimistic updates, and authentication, demonstrating that you can architect a real application rather than just scaffolding a demo.

Why This Matters for Your Career

React's hook rules and rendering model produce a category of bugs that only appear when you violate them — stale closures in effects, infinite re-render loops, race conditions in async hooks. Developers who understand the underlying model can avoid and diagnose these bugs. Those who don't will encounter them repeatedly, and their only option is to paste the error into AI and hope the suggestion works. The shift from client-side React to server components in Next.js App Router is the most significant architectural change in frontend development in years. Engineers who understand the boundary between server and client rendering — and the performance, SEO, and data-fetching implications of that boundary — are equipped to make the right architectural decisions. Those who just follow tutorials will produce applications that technically work but make poor tradeoffs. Component library development is a career-defining skill. Every design system, every UI component library, every large frontend application is built on reusable, accessible, well-designed components. Building components correctly — with proper keyboard navigation, ARIA attributes, forwarded refs, and flexible APIs — is what separates frontend engineers who are genuinely skilled from those who just know the framework.