React: Software Architecture

2h 43mIntermediate2021-08-12

Authors

Shaun Wassell

Full-Stack Software Developer

Course details

Many React developers have intimate knowledge of the React API itself, but little familiarity with how to create real-world apps on a larger scale while dealing with various stakeholders. The heavy demands on web apps both from a customer and managerial perspective require that developers arrange software in an optimal way to ensure performance and maintainability. And in order to do this effectively, programmers must know how to create good software architecture. In this course, senior software developer Shaun Wassell shows you how, detailing what React developers need to know to keep their apps maintainable, performant, and compliant for the long haul. Delve into the basics of server-side rendering, state management, code splitting, and much more.

Skills covered

Software ArchitectureReact.jsMetaJavaScriptOracleFront-End Web DevelopmentWeb DevelopmentSoftware DevelopmentDeep Dive (X:Y)

Concepts

0. Introduction

01 - Learn software architecture with React
02 - What you should know

1. Software Architecture Basics

03 - What is software architecture

2. Server-Side Rendering (SSR)

04 - Server-side rendering basics
05 - Setting up a simple React app
06 - Basic React SSR
07 - Building and rendering an SSR React app
08 - Routing with server-side rendering
09 - Styling with server-side rendering
10 - Server-side rendering caveats

3. State Management Architecture

11 - What is state management
12 - Small state with the useState Hook
13 - Small state with context
14 - Accessing context inside components
15 - Medium state with Recoil
16 - Sharing Recoil state
17 - Using Recoil selectors
18 - Big state with Redux
19 - Using Redux with components
20 - Big state with MobX

4. Data Loading and WebSockets

21 - When should we load data
22 - Data loading with SSR
23 - Rendering server-side API data
24 - Enhancing SSR with context

5. Code Splitting

25 - Code splitting basics
26 - Route-based code splitting
27 - When to use code splitting
28 - Error boundaries

6. Folder Structure and Naming Conventions

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

Conclusion

31 - Next steps