Paths/Frontend Engineer/React Fundamentals / Components & State
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.
Validator
IDLE — checks run live as you type commands; submit when done
01Requirements
live checks- Directory ~/frontend/src/components exists○
- File ~/frontend/src/components/OrderRow.tsx exists○
- The component exports a typed props interface○
- The component returns markup from the props○
02Walkthrough
4 steps- 01
Create the components directory
One folder per feature, or one folder for the shared components - be consistent.
mkdir -p ~/frontend/src/components - 02
Write the props
The props interface says exactly what the component needs. Readonly stops a parent from mutating what it handed over.
echo 'import type { Order } from "../types/order";\n\ninterface OrderRowProps {\n readonly order: Order;\n readonly onSelect?: (id: string) => void;\n}' > ~/frontend/src/components/OrderRow.tsx - 03
Write the component
The component is a pure function of its props. No fetching, no globals - that keeps it testable.
echo '\n\nexport function OrderRow({ order }: OrderRowProps) {\n return (\n <li className="order-row">\n <span>{order.id}</span>\n <span>{(order.amountCents / 100).toFixed(2)}</span>\n </li>\n );\n}' >> ~/frontend/src/components/OrderRow.tsx - 04
Verify and submit
cat the file, then submit for validation.
cat ~/frontend/src/components/OrderRow.tsx
03Stuck?
0 of 3 revealedTake a hint without losing the lab — each one points at the thing to look at, not at the answer.
04AI Tutor
guides, never solvesTell me what you're stuck on — I'll nudge, not solve. Which requirement are you looking at?
04Notebook
saved locally in this browserlearner@lab — ubuntu:24.04
Session is disposable
↑/↓ recalls commands · Ctrl+Enter submits · type help for the command list