React Best Practices by Pearson

Course details

React has become a cornerstone of modern front-end development, enabling teams to build dynamic, high-performance user interfaces. In this course from Shaun Wassell, take your skills from intermediate to expert level, exploring the modern techniques, patterns, and best practices that define professional React development—from functional components and hooks to state management, routing, and more. Learn how to leverage advanced patterns like compound components and render props, implement state management solutions at scale using Redux or the Context API, and optimize your applications for production. By the end of this course, you’ll be equipped with practical skills to structure and build efficient, scalable React applications for complex real-world scenarios.

Learning objectives
Develop a deep understanding of React's latest features, including hooks and the Context API, to write cleaner and more efficient code.
Apply best practices for building scalable and maintainable React applications, focusing on component design, state management, and routing.
Enhance the performance of React applications through advanced techniques, such as code splitting, lazy loading, and memoization.

Concepts

Introduction

React best practices - Getting started

Best Practices for Components

Learning objectives
Recognize different component types, part 1
Recognize different component types, part 2
Understand the difference between hooks and class components, part 1
Understand the difference between hooks and class components, part 2
Use composition with components

Best Practices for State Management

Learning objectives
Manage state with hooks
Manage state with Context
Manage state with Redux

Best Practices for Project Organization

Learning objectives
Learn the difference between feature- and function-based organization
Keep component files lean

Best Practices for Routing and Navigation

Learning objectives
Learn React Router best practices
Improve performance with lazy-loaded routes
Use route guards to protect front-end routes

Optimize Performance

Learning objectives
Using React.memo, useMemo, and useCallback
Virtualize lists for performance
Profile and debug apps with React DevTools

Security Best Practices

Learning objectives
Protect against cross-site scripting (XSS)
Safe data handling and avoiding exposing sensitive data

Conclusion

Summary and next steps