Module · Frontend Engineer
React Fundamentals
Components, props and state - and the rendering rules that keep the UI predictable.
TOPIC 01
Components & State
The component contract, and the two hooks that cover most of the work.
What you'll practice
- Write a Typed Component — guided · beginner
- Move State Into a Hook — practice · intermediate
A command you'll meet
cat ~/frontend/src/components/OrderRow.tsxA component is a function of its props. Open the task below for the full walkthrough.
Hands-On Tasks in This Topic (2)
Write a Typed Component
The props are the contract of a component. Write one that renders a single order and refuses to render without what it needs.
Move State Into a Hook
A component that fetches its own data cannot be reused or tested. Write the hook that owns the state and the loading flag.
TOPIC 02
Rendering & Lists
Keys, empty states and the memoisation that is worth the complexity.
What you'll practice
- Render a List Correctly — practice · intermediate
- Memoise the Expensive Parts — challenge · advanced
A command you'll meet
cat ~/frontend/src/components/OrderList.tsxA list without keys is a list with bugs. Open the task below for the full walkthrough.
Hands-On Tasks in This Topic (2)
Render a List Correctly
React identifies rows by key. Use the stable identifier from the data, and render an empty state instead of a blank list.
Memoise the Expensive Parts
Memoisation is a trade - you pay for the comparison to save the recomputation. Apply it where the work is actually expensive.