React: Design Patterns

Course details

Explore recognized React design patterns to elevate your development for cleaner, more scalable code. In this course, Shaun Wassell—a lifelong programmer and full-stack development instructor—shows you how. Learn about layout components to organize on-screen content effectively. Discover container components that allow shared functionality and streamlined communication among React components. Get insights into the benefits of controlled components in state management. Find out how you can use higher order components to add functionality without altering existing code. Dive into functional programming concepts and how they can be applied in React. Plus, solidify your learning with practical examples. By the end of this course, you will have the essential tools to create React applications efficiently and effectively.

Concepts

Introduction

Intro video
What are design patterns

Layout Components

What are layout components
Split-screen components
Split-screen component improvements
List and item components
Solution - Different list types
Modal components

Container Components

What are container components
Server instructions
Loading the current user
CurrentUserLoader component
UserLoader component
ResourceLoader component
DataLoader component
Solution - Loading data from localStorage

Controlled and Uncontrolled Components

Controlled vs. uncontrolled components
Uncontrolled forms
Controlled forms
Controlled and uncontrolled modals
Uncontrolled onboarding flows

Higher-Order Components

What are higher-order components (HOCs)
Printing props with HOCs
Loading data with HOCs
Adding JSX with HOCs

Custom Hooks Patterns

What are custom hooks
useCurrentUser Hook
useUser Hook
useResource Hook
useDataSource Hook
Solution - UseLocalStorage Hook

Functional Programming and React

What is functional programming
Recursive components
Solution - Recursive folders
Component composition
Partially applied components
Partial application example

Conclusion

Next steps in your React journey

Appendix

Tour of CoderPad