React: Software Architecture

Introduction

• Learn software architecture with React
• What you should know

1. Software Architecture Basics

• What is software architecture?

2. Server-Side Rendering (SSR)

• Server-side rendering basics
• Setting up a simple React app
• Basic React SSR
• Building and rendering an SSR React app
• Routing with server-side rendering
• Styling with server-side rendering
• Server-side rendering caveats

3. State Management Architecture

• What is state management?
• Small state with the useState Hook
• Small state with context
• Accessing context inside components
• Medium state with Recoil
• Sharing Recoil state
• Using Recoil selectors
• Big state with Redux
• Using Redux with components
• Big state with MobX

4. Data Loading and WebSockets

• When should we load data?
• Data loading with SSR
• Rendering server-side API data
• Enhancing SSR with context

5. Code Splitting

• Code splitting basics
• Route-based code splitting
• When to use code splitting
• Error boundaries

6. Folder Structure and Naming Conventions

• Function vs. feature-based organization
• Monoliths, multi-repos, and monorepos

Conclusion

• Next steps