React Advanced

This immersive 5-day course equips developers with best practices in modern React development through a series of project-based learning experiences. Learners will build real-world applications while mastering advanced React techniques, including hooks, state management, routing, and performance optimisation.

Participants will learn how to structure scalable React applications, apply key design patterns, and implement robust solutions using the latest tools and libraries such as Redux Toolkit, React Query, and Firebase Authentication. The course balances hands-on development with practical demonstrations and expert guidance, ensuring learners leave with applied skills ready for immediate implementation in professional environments.

Key focus areas include best practice component design, application state management, routing strategies, optimising performance, and deploying real-world applications.

Prerequisites

Participants should have:

• Working knowledge of JavaScript fundamentals and ES6+ syntax
• Practical experience developing basic React applications
• Familiarity with HTML, CSS, and modern front-end tooling (e.g., npm, Vite)
• Comfortable using Git and VS Code (recommended)

Target audience

This course is designed for:

• Front-end and full-stack developers looking to deepen their React expertise
• Developers seeking to apply React best practices to production applications
• Teams aiming to create scalable, maintainable, and performant React codebases
• Software engineers preparing for collaborative or enterprise React projects

By the end of this course, learners will be able to:

• Build modular and reusable React components following industry best practices
• Implement effective state management solutions using Context API, Redux Toolkit, and React Query
• Apply React Router v6+ for advanced client-side routing, including protected routes and nested layouts
• Optimise React application performance using memoisation and best practice rendering patterns
• Integrate third-party libraries for form handling, API interactions, and authentication
• Develop, deploy, and test project-based applications simulating real-world scenarios
• Identify and avoid common anti-patterns in React development
• Utilise GitHub Copilot and modern developer tools to streamline coding workflows

Introduction and environment setup

• Overview of course structure and project-based approach
• Installing React projects using Vite
• Understanding project scaffolding and key files

Component architecture and best practices

• JSX and component composition
• Pure components and reusability
• Props and data flow in React
• Component lifecycle concepts
• Forms and validation using react-hook-form
• JSON Server: building a single-page blog application

Routing strategies and SPA design

• Client-side routing with React Router v6+
• RouteProvider and nested layouts
• Custom 404 pages and loaders
• Route parameters and error elements
• Securing routes with protected route patterns
• Building a Helpdesk application using advanced routing concepts

Hooks deep dive and custom solutions

• Core hooks: useState, useEffect, useContext, useReducer, useRef, useCallback, useMemo
• Creating custom hooks for reusable logic
• Pair programming and individual coding challenges

State management in practice

• Context API for localised state management
• Project demo: building a Flower Shop cart using Context API
• Introduction to Redux Toolkit and react-redux
• Comparing Context API and Redux: when to use each approach
• Caching and asynchronous state with React Query

Design patterns and performance tuning

• Common design patterns in React applications
• Avoiding anti-patterns for maintainable code
• Performance optimisation: memoisation and component rendering demos

Final project and challenge

• Integrating Firebase Authentication for external user management
• Final group project: building the QAEstate Agents application
• Applying best practices learned throughout the course in a capstone challenge

Exams and assessments

There are no formal exams in this course. Learners will engage in:

• Practical coding challenges and peer code reviews
• Hands-on project work with guided and independent exercises
• Instructor-led walkthroughs and troubleshooting sessions

Hands-on learning

This course includes:

• Daily coding challenges and pair programming exercises
• Full-stack project demos, including JSON Server, React Router, and Firebase Authentication
• Guided labs on hooks, state management, and performance tuning
• Final team-based project simulating real-world product development
• Instructor demonstrations with GitHub Copilot and modern tooling