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.

Table of Contents

Introduction

• Introduction

JavaScript Patterns

• 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

React Patterns

• 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

Performance Patterns

• Bundling & Compiling
• Static & Dynamic Imports
• Browser Hints: Prefetch & Preload

Rendering Patterns

• Core Web Vitals
• Client-Side & Static Rendering
• Incremental Rerendering & SSR

Wrapping Up

• Wrapping Up