A Tour of JavaScript & React Patterns

Learn a suite of design patterns to improve the code architecture of your web apps! You’ll get an overview of more traditional design patterns with JavaScript, such as the Singleton and Proxy patterns. Then see React patterns such as the Hooks and Higher Order Component patterns. Lastly, we’ll cover Performance patterns and Rendering Patterns.

• Introduction
• Module Pattern
• Module Pattern Solution
• Singleton Pattern
• Singleton Pattern Solution
• Proxy Pattern
• Proxy Pattern Solution
• Observer Pattern
• Observer Pattern Solution
• Observer Pattern Q&A
• Factory Pattern
• Factory Pattern Solution
• Prototype Pattern
• Prototype Pattern Solution
• Container/Presentation Pattern
• Container/Presentation Pattern Solution
• Higher-Order Component Pattern
• Higher-Order Component Pattern Solution
• Render Props Pattern
• Render Props Pattern Solution
• Hooks Pattern
• Hooks Pattern Solution
• Provider Pattern
• Provider Pattern Solution
• Compound Pattern
• Compound Pattern Solution
• Bundling & Compiling
• Static & Dynamic Imports
• Browser Hints: Prefetch & Preload
• Core Web Vitals
• Client-Side & Static Rendering
• Incremental Rerendering & SSR
• Wrapping Up