Modern Agenda — Phase 04: React
Rosetta Phase 06 — React
React implementation comparing component state, hooks, and data flow against other phases.
Modern Agenda — Phase 04: React
Use the same agenda requirements to compare React's component and state model with Angular and native approaches. The visible target remains comparable with every other Modern Agenda phase.
Use the same agenda requirements to compare React's component and state model with Angular and native approaches. The visible target remains comparable with every other Modern Agenda phase.
Purpose & Learning Objectives
Why this project exists and what the implementation should teach.Purpose
Use the same agenda requirements to compare React's component and state model with Angular and native approaches.
Learning Objectives
- Model the agenda as reusable React components.
- Use TypeScript with props and state.
- Use hooks deliberately rather than mechanically.
- Keep derived state separate from source data.
- Compare React data flow against Angular and framework-free implementations.
Technology Plan
Current, planned, legacy, or candidate technologies for this project.Phase Implementation
Planned behaviors, architecture decisions, and evidence this project should produce.- Agenda page.
- Session groups.
- Session detail.
- People lists.
- Expanded item state.
- Data loading state.
- No duplicated derived data.
- Component composition.
- Data flow.
- Tooling.
- Amount of framework code.
Rosetta Comparison Notes
Implementation context, boundaries, and later expansion.Series Rule
Keep the data fixture, application behavior, and expected output recognizable.
Comparison Output
Document what this phase changes in syntax, typing, modules, state, rendering, requests, and tooling.