React: Design Patterns (2021)
3h 20mAdvanced2021-09-27
Authors

Shaun Wassell
Full-Stack Software Developer
Course details
If you’ve learned the basics of React and have worked on many React applications, chances are you’ve run into some recurring problems and situations, like creating reusable layouts or working with forms. If you’ve been on the hunt for solutions to common problems, look no further than this course with Shaun Wassell, where he covers many of the most useful design patterns—effective and repeatable solutions to common application development challenges. This course consists of several sections, each of which will cover a group of React design patterns, ranging from preferred syntax for specific tasks to how to arrange components in the most effective way. Among the topics Shaun covers are composition, higher-order components, state hoisting, controlled vs. uncontrolled components, and many other patterns that help a React app develop into a well-organized codebase.
Skills covered
Software DesignReact.jsMetaJavaScriptOracleFront-End Web DevelopmentWeb DevelopmentSoftware DevelopmentDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - Take your React skills to the next level
- 02 - What you should know
- 03 - What are design patterns
1. Layout Components
- 04 - What are layout components
- 05 - Split-screen components
- 06 - Split-screen component improvements
- 07 - Lists and list items
- 08 - Creating different list types
- 09 - Modal components
2. Container Components
- 10 - What are container components
- 11 - Server instructions
- 12 - CurrentUserLoader component
- 13 - UserLoader component
- 14 - ResourceLoader component
- 15 - DataSource component
- 16 - Loading data from localStorage
3. Controlled and Uncontrolled Components
- 17 - Controlled vs. uncontrolled components
- 18 - Uncontrolled forms
- 19 - Controlled forms
- 20 - Controlled modals
- 21 - Uncontrolled onboarding flows
- 22 - Collecting onboarding data
- 23 - Controlled onboarding flows
4. Higher-Order Components
- 24 - What are higher-order components
- 25 - Printing props with HOCs
- 26 - Loading data with HOCs
- 27 - Modifying data with HOCs
- 28 - Creating forms with HOCs
- 29 - Higher-order component improvements
5. Custom Hooks Patterns
- 30 - What are custom Hooks
- 31 - useCurrentUser Hook
- 32 - useUser Hook
- 33 - useResource Hook
- 34 - useDataSource Hook
6. Functional Programming and React
- 35 - What is functional programming
- 36 - Recursive components
- 37 - Component composition
- 38 - Partially applied components
Conclusion
- 39 - Next steps
Related courses
- React: Design Patterns
- React Best Practices by Pearson
- Application Prototyping with Vercel v0 Agentic Builder
- LinkedIn Ads: Smart Tips and Tricks That Drive Results
- Building Scalable React UI Component Libraries with Storybook
- React Practice for Beginners: Build and Modify Basic Components
- Interactive React for the Web
- Create Your Dream Apps with Cursor and Claude AI