Advanced React Development Courseware (REA300)

Benefits

1. Mastery of Modern React 19 Features: Gain in-depth knowledge of Actions, Server Components, the React Compiler, and the current generation of hooks — use, useActionState, useOptimistic, useTransition, and more — so you can build dynamic, responsive applications with today's patterns rather than yesterday's defaults.
2. Hands-on Experience with Real-world Projects: Spend more than half of class time in substantial labs that simulate real-world challenges, sharpening your problem-solving skills and reinforcing each concept through application.
3. Framework Fluency Across the Ecosystem: Implement routing, data loading, and authentication in both React Router v7 (framework mode) and Next.js 15's App Router, taught side by side so you can weigh trade-offs and make sound architectural decisions instead of defaulting to one stack.
4. A No-Dogma Approach to State and Data: Learn a practical decision framework spanning local state, Zustand, Jotai, Redux Toolkit with RTK Query, and server state via TanStack Query — so you reach for the right tool for each kind of state rather than forcing everything into a global store.
5. Performance Optimization Techniques: Profile and optimize React applications with the React DevTools Profiler and modern tooling, learning what the React Compiler handles automatically and what still requires deliberate, hands-on work.
6. Productive Collaboration with AI Coding Assistants: Learn to work effectively alongside tools like Cursor, Claude Code, and Copilot while recognizing the React mistakes they reliably make — stale closures, missing dependencies, useEffect overuse, and hydration mismatches — so you can review AI-generated code critically.
7. Confident Testing and Production Practices: Write meaningful tests with Vitest, React Testing Library, MSW, and Playwright, and apply React-specific security and accessibility practices that keep your applications safe, accessible, and production-ready.

Full Lab Environment Add-On

Enhance and simplify your classes by providing an unparalleled learning platform that requires no setup. Your trainers and students can dive straight into a fully-prepared lab environment with just a click. This seamless integration means no time wasted on installations or configurations, allowing trainers and students to focus solely on the task at hand. The lab comes pre-loaded with all the necessary tools and resources, ensuring a smooth, hassle-free learning experience.

Outline

Required Prerequisites

• Solid Understanding of JavaScript: Proficiency in modern JavaScript fundamentals, including ES2020+ features such as async/await, destructuring, modules, and arrow functions.
• Working React Knowledge: Comfort reading and writing function components, JSX, props, and basic hooks (useState, useEffect). If you've shipped or maintained a React app, you're ready.
• Experience with Web Development: Understanding of HTML, CSS, and core web development principles, including how the browser renders and loads a page.
• Development Environment Setup: Ability to set up a local development environment, including Node.js (v22+) and a code editor such as VS Code.
• Version Control with Git: Working knowledge of Git, including cloning repositories, creating branches, and committing — labs are submitted on feature branches.
• Command Line Proficiency: Comfort using a command line interface to navigate directories, run scripts, and install software globally.
• Understanding of RESTful APIs: Familiarity with consuming RESTful APIs for fetching and mutating data.
• Familiarity with a Package Manager: Experience using npm (or a comparable package manager) to install and manage project dependencies.
• Optional — Basic TypeScript Awareness: Helpful but not required; the pre-work doc covers TS-in-React essentials for anyone who wants a refresher.

Useful Prerequisites

• Exposure to TypeScript — labs run in plain JavaScript, but TypeScript appears where it adds value (typed props, discriminated unions).
• Experience with a React Framework — prior exposure to Next.js or React Router is helpful for the routing and Server Components modules.
• Familiarity with a State-Management Library — having used Redux, Zustand, or similar gives useful context for the state-management module.
• Some Exposure to Automated Testing — prior experience with a test runner like Jest or Vitest will make the testing module go more smoothly.
• Hands-on Time with an AI Coding Assistant — any prior use of Cursor, Claude Code, GitHub Copilot, or Windsurf will help, since AI-assisted workflows run throughout the course.