Overview
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
Delegates will learn how to
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
Outline
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
Frequently asked questions
How can I create an account on myQA.com?
There are a number of ways to create an account. If you are a self-funder, simply select the "Create account" option on the login page.
If you have been booked onto a course by your company, you will receive a confirmation email. From this email, select "Sign into myQA" and you will be taken to the "Create account" page. Complete all of the details and select "Create account".
If you have the booking number you can also go here and select the "I have a booking number" option. Enter the booking reference and your surname. If the details match, you will be taken to the "Create account" page from where you can enter your details and confirm your account.
Find more answers to frequently asked questions in our FAQs: Bookings & Cancellations page.
How do QA’s virtual classroom courses work?
Our virtual classroom courses allow you to access award-winning classroom training, without leaving your home or office. Our learning professionals are specially trained on how to interact with remote attendees and our remote labs ensure all participants can take part in hands-on exercises wherever they are.
We use the WebEx video conferencing platform by Cisco. Before you book, check that you meet the WebEx system requirements and run a test meeting to ensure the software is compatible with your firewall settings. If it doesn’t work, try adjusting your settings or contact your IT department about permitting the website.
How do QA’s online courses work?
QA online courses, also commonly known as distance learning courses or elearning courses, take the form of interactive software designed for individual learning, but you will also have access to full support from our subject-matter experts for the duration of your course. When you book a QA online learning course you will receive immediate access to it through our e-learning platform and you can start to learn straight away, from any compatible device. Access to the online learning platform is valid for one year from the booking date.
All courses are built around case studies and presented in an engaging format, which includes storytelling elements, video, audio and humour. Every case study is supported by sample documents and a collection of Knowledge Nuggets that provide more in-depth detail on the wider processes.
When will I receive my joining instructions?
Joining instructions for QA courses are sent two weeks prior to the course start date, or immediately if the booking is confirmed within this timeframe. For course bookings made via QA but delivered by a third-party supplier, joining instructions are sent to attendees prior to the training course, but timescales vary depending on each supplier’s terms. Read more FAQs.
When will I receive my certificate?
Certificates of Achievement are issued at the end the course, either as a hard copy or via email. Read more here.