Hands-on React Application Architecture

In this workshop, we will explore how to build and improve a React app inside a monorepo. Learn how to structure app features, add routing with React Router, handle client and server state, fetch and update API data with TanStack Query, and create robust forms with React Hook Form and Zod.

Designed for developers who know the basics of React and want more practice with real application structure, this workshop provides practical skills for building maintainable React applications that can grow across apps and shared packages.

Transcript

1. Hands-on React Application Architecture Aurora Scharff @aurorascharff
2. Aurora Scharff Oslo, Norway DX Engineer, Next.js team @ Vercel React Certification Lead @ certificates.dev
4. 🫵
5. In this workshop, we will explore how to build and improve the architecture of a React app inside a monorepo. Learn how to structure app features, add routing with React Router, handle client and server state, fetch and update API data with TanStack Query, and create robust forms with React Hook Form and Zod. Designed for developers who know the basics of React and want more practice with real application structure, this workshop provides practical skills for building maintainable React applications that can grow across apps and shared packages.
6. Technical requirements • Your own laptop with Nodejs LTS version installed: https://nodejs.org/en. You can verify the installation in your terminal with “node —version”. • Chrome extension React Devtools: https://chromewebstore.google.com/detail/react-developer- tools/fmkadmapgofadopljbjfkapdkoienihi • VSCode: https://code.visualstudio.com/ • A GitHub-account and Git installed on your machine
7. AGENDA - 09:00 — Intro - 09:15 — Background: Rendering strategies and browser behavior - 09:30 — Setup - 10:15 — Module 1: Architecture and Reuse - 11:00 — Break - 11:15 — Module 2: Routing - 12:00 — Lunch - 13:00 — Module 3: State and Effects - 13:45 — Module 4: Server State - 14:30 — Break - 14:45 — Module 5: Forms - 15:40 — Wrap-up
8. Background
9. Rendering on the web
10. Static website rendering > Pages are pre-assembled and uploaded to a static host > Simple and efficient > Struggles with dynamic data and impractical to maintain
11. Multi-page applications (MPAs) > HTML and data are dynamically merged on the server > Serves the merged result on page load > Page reloads per request
12. Single-page applications (SPAs, CSR)
13. SPA vs. MPA lifecycle
14. Server-side rendering (SSR) > Pre-render the initial HTML on the server > Fully-formed HTML when opening the page > JavaScript is fetched alongside it
15. Static site generation (SSG) > Pages are pre-assembled and uploaded to a static host > Requires site redeployment whenever data changes > JavaScript is fetched alongside it
16. Server-side rendering (SSR) > Included feature in JavaScript “meta-frameworks” > Build time (SSG) and/or request time (SSR) > Pages generated in the build can be cached
17. Hydration
18. Hydration Hydration is like watering the “dry” HTML with the “water” of interactivity and event handlers. - React core team member Dan Abramov https://github.com/reactwg/react-18/discussions/37
19. Server-side rendering
20. Browser behavior
21. The web is a distributed system
22. The browser has primitives
23. The hard part is time
24. React sits on top of the platform
25. Questions?
26. Setup
27. Repository git clone https://github.com/aurorascharff/react- monorepo-workshop-<company>.git
28. Module 1: Architecture and Reuse
29. Architecture and Reuse
30. STRUCTURE IS COMMUNICATION Structure is communication
31. STRUCTURE IS COMMUNICATION Components name responsibilities
32. STRUCTURE IS COMMUNICATION Group by meaning
33. STRUCTURE IS COMMUNICATION Shared UI has layers
34. STRUCTURE IS COMMUNICATION Error boundaries catch render failures
35. Questions?
36. Module 1: Exercise 15min
37. Module 1: Discussion 5min
38. Module 1: Solution
39. COFFEE BREAK 10min
40. Module 2: Routing
41. Routing
42. Routes connect URLs to screens
43. Links are navigation
44. URLs carry state
45. Layouts preserve shared UI
46. Routing depends on the rendering model
47. Questions?
48. Module 2: Exercise 15min
49. Module 2: Discussion 5min
50. Module 2: Solution
51. LUNNCH BREAK ~45min
52. Module 3: State and Effects
53. State best practises
54. Reacting to Input with State • React provides declarative way to manage UI changes • Describe different states component can be in • Switch between states in response to user input • Avoid multiple boolean states that can cause paradoxes • Use essential state only to prevent impossible states
55. Choosing the State Structure • State structure affects maintainability and debugging • Avoid redundant state that can be calculated • Derive values instead of storing them separately • Use status enums instead of multiple boolean flags • Prevents contradictory states
56. Effect best practises
57. Synchronizing with Effects • `useEffect` synchronizes components with external systems • Connect to browser APIs, third-party libraries, network requests • Requires cleanup function to prevent memory leaks • Dependency array controls when Effect re- runs • Essential for operations outside React's data flow
58. You Might Not Need an Effect • Effects are escape hatch from React paradigm • Only use when synchronizing with external systems • Avoid Effects for transforming data or calculations • Derive values during rendering instead • Removing unnecessary Effects improves performance and clarity
59. Custom Hooks & Logic Reuse
60. Reusing Logic with Custom Hooks • Extract component logic into custom Hooks • Share stateful logic between components • Custom Hooks must start with "use" • Follow Rules of Hooks for correct behavior • Reuse common patterns like data fetching, online status
61. Questions?
62. Module 3: Exercise 15min
63. Module 3: Discussion 5min
64. Module 3: Solution
65. Module 4: Server State
66. Server State
67. Client state vs server state
68. Server state needs identity
69. Waiting and failure need a place
70. Mutations change server state
71. Questions?
72. Module 4: Exercise 15min
73. Module 4: Discussion 5min
74. Module 4: Solution
75. COFFEE BREAK 10min
76. Module 5: Forms
77. Forms
78. Forms have multiple responsibilities
79. Validation should help the user
80. Form submit is a flow
81. Accessible forms use the platform
82. Questions?
83. Module 5: Exercise 15min
84. Module 5: Discussion 5min
85. Module 5: Solution
86. Wrap up
87. AGENDA - 09:00 — Intro - 09:15 — Background: Thinking in web - 09:30 — Setup - 10:15 — Module 1: Architecture and Reuse - 11:00 — Break - 11:15 — Module 2: Routing - 12:00 — Lunch - 13:00 — Module 3: State and Effects - 13:45 — Module 4: Server State - 14:30 — Break - 14:45 — Module 5: Forms - 15:40 — Wrap-up
88. https://speakerdeck.com/aurorascharff/hands- on-react-application-architecture
89. https://github.com/aurorascharff/react-monorepo-workshop
90. Further learning: React Certification
96. https://certificates.dev/react
97. Further learning: Next.js
99. Questions?
100. THANK YOU @aurorascharff aurorascharff.no @aurorascharff