Advanced React: state, data, performance and tests
Industrialize a React application: Redux Toolkit, cached queries, PWA, optimization, tests and architecture.
- Duration
- 14 h · 2 days
- Level
- Advanced
- Format
- On site · Remote · Blended
- Max. group size
- 12 participants
Overview
This program is for developers who already master React and want to move up a level: large-scale state management, data fetching and caching, offline applications, performance optimization and advanced testing. It ends with an architecture workshop to structure a production-ready application.
Who this program is for
- Experienced React developers
- Lead developers and front-end architects
- Teams preparing a React application for production
Prerequisites
- Practice of React: components, hooks, routing
- Very good knowledge of JavaScript
Learning objectives
- Manage global state with Redux Toolkit
- Manage data caching and synchronization with TanStack Query
- Make an application installable and usable offline
- Measure and fix performance problems
- Write asynchronous tests with mocks and simulated APIs
- Understand the move from REST to GraphQL
- Structure a React application for production
Detailed curriculum
4 modules · 14 h · 2 days
State management with Redux Toolkit
- When to use global state
- Slices, reducers and actions
- Asynchronous actions
- Migrating an existing Redux
- Selectors and best practices
Manage a cart shared between several screens.
Server data: queries, cache and synchronization
- Distinguishing client state from server state
- Queries, mutations and cache invalidation
- Pagination and infinite loading
- Handling errors and loading states
- Optimistic updates
Replace manual calls with a cached query layer.
PWA, performance and advanced testing
- Making an application installable and offline
- Measuring with profiling tools
- Memoization, code splitting and lazy loading
- Asynchronous tests, mocks and simulated APIs
- Journey integration tests
Identify and fix three performance bottlenecks.
GraphQL, advanced concepts and architecture
- From REST to GraphQL: principles and client
- Context, portals, error boundaries and suspense
- Folder organization and conventions
- Feature-based splitting
- Go-live checklist
Review the architecture of an existing application and propose an improvement plan.
Tools and technologies
Teaching methods
- Alternating short lectures and hands-on work
- Live demonstrations by the trainer
- Capstone project built throughout the modules
- Group corrections and discussion of best practices
Assessment
- Hands-on exercises corrected in each module
- Mini-project completed at the end of the course
- Knowledge-check quiz
Required equipment
- A computer with an internet connection
- A code editor and Node.js installed
Resources provided
- Course materials and repository of corrected exercises
Career outcomes
- A faster, better-tested application
- A reusable project architecture
- Criteria for choosing your state and data tools
Related video courses
My video courses that go with this program, to get ready for the training or to review afterwards. Free with an account.
