React: Design Patterns

Introduction

• Take your React skills to the next level
• What you should know
• What are design patterns?

1. Layout Components

• What are layout components?
• Split-screen components
• Split-screen component improvements
• Lists and list items
• Creating different list types
• Modal components

2. Container Components

• What are container components?
• Server instructions
• CurrentUserLoader component
• UserLoader component
• ResourceLoader component
• DataSource component
• Loading data from localStorage

3. Controlled and Uncontrolled Components

• Controlled vs. uncontrolled components
• Uncontrolled forms
• Controlled forms
• Controlled modals
• Uncontrolled onboarding flows
• Collecting onboarding data
• Controlled onboarding flows

4. Higher-Order Components

• What are higher-order components?
• Printing props with HOCs
• Loading data with HOCs
• Modifying data with HOCs
• Creating forms with HOCs
• Higher-order component improvements

5. Custom Hooks Patterns

• What are custom Hooks?
• useCurrentUser Hook
• useUser Hook
• useResource Hook
• useDataSource Hook

6. Functional Programming and React

• What is functional programming?
• Recursive components
• Component composition
• Partially applied components

Conclusion

• Next steps