React

Frontory technology map

UI frameworks · 4 stages · 28 units in the full series · 28 published in English

Series goal

Explain state ownership and Effect lifetimes, and build a learning editor that combines per-unit notes, search, and Canvas.

Prerequisites

JavaScript, TypeScript, and DOM events

Practice approach and scope

Learning units are not calendar days. Read the explanation and tasks, check the completion criteria, then move on. Use each example as a starting point: change variables and observe the results. Built-in examples and tasks requiring a separate environment are identified separately. Opening an example does not complete a unit.

Existing unit IDs and notes are preserved. The original 01, 02, and 03 examples occupy positions 1, 14, and 28 in the expanded sequence, so the number in the address may differ from the learning order.

Only published English units are linked below. The full series has 28 units.

Learning path

Stage 1 · Components and state calculations

• 01. State and Ownership — Editable example
• 02. JSX and Pure Rendering — Editable example
• 03. Events and state snapshots — Editable example
• 04. Updating Objects and Arrays — Editable example
• 05. Conditional Screens and Empty States — Editable example
• 06. List Keys and Identity — Editable example
• 07. Controlled Inputs and Form Validation — Editable example

Stage 2 · Shared state and external systems

• 08. Lifting State Up — Editable example
• 09. Collecting Update Rules in a Reducer — Editable example
• 10. Passing Settings with Context — Editable example
• 11. Refs and DOM Focus — Editable example
• 12. Effect Dependencies and Cleanup — Editable example
• 13. Request Races and Cancellation — Editable example
• 14. Effects and External Renderers — Editable example

Stage 3 · Preserving notes and measuring renders

• 15. Custom Hook Boundaries — Editable example
• 16. Saving Notes and Initial Restoration — Editable example
• 17. Preserving State by Unit — Editable example
• 18. Component Composition and children — Editable example
• 19. Making Asynchronous State Explicit — Editable example
• 20. Transitions and Deferred Results — Editable example
• 21. Finding Bottlenecks with Profiler — Editable example

Stage 4 · Performance verification and an integrated editor

• 22. Memoizing Only Measured Paths — Editable example
• 23. Display Ranges for Long Lists — Editable example
• 24. Event Boundaries and Accessible Selection — Editable example
• 25. Subscription Stores and Snapshots — Editable example
• 26. Creating Regression Scenarios — Editable example
• 27. Integrated Editor and Resource Audit — Editable example
• 28. State Preservation and Performance — Editable example

Capstone project and deliverables

Submit a learning editor that preserves notes, a resource audit table, and Profiler records compared using the same inputs.

Keep the implementation, run instructions, baseline and changed conditions, failure cases, and recovery steps together. Do not report unmeasured performance or tests you have not run as results.

Official references

• React Learning Guide
• React API Reference
• React state as a snapshot
• React state update queues and batching
• React passing event handlers
• useState updaters and Strict Mode
• React: Preserving and Resetting State
• React useEffect: External Systems and Cleanup
• React useDeferredValue and the memo Boundary for Slow Children