React: Software Architecture

Look at app development through the eyes of an expert developer. Discover how to create apps that not only work, but also remain performant and easy to maintain over time.

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