React Frontend Framework cookbook

9 recipes · 54 steps · about 38 minutes of reading

Turn repeated markup into one reusable component with props
I keep pasting the same block of markup with only the text changed, and every edit means fixing it in five places.
BeginnerRead 4 minDoing: under an hour6 steps
A controlled input in React ignores every keystroke
Why won't this text field let me type anything?
BeginnerRead 3 minDoing: under 30 minutes5 steps
Give a single-page app real URLs with React Router
Every link on my app points at the same page, and sharing a link with someone just lands them on the homepage.
Beginner to intermediateRead 5 minDoing: an hour or two6 steps
One class component still runs on lifecycle methods everyone else replaced
This class component still works, but it's the last one in a codebase that's otherwise all hooks.
Beginner to intermediateRead 4 minDoing: about an hour6 steps
Replace prop drilling with React Context for shared state
The theme setting has to pass through four components that never even use it.
IntermediateRead 4 minDoing: an hour or two6 steps
Stop a useEffect that loops forever
My counter climbs to a huge number in under a second, then the tab freezes.
IntermediateRead 5 minDoing: under an hour6 steps
React's list keys start pointing at the wrong row after a reorder
I reordered my to-do list and now the notes are attached to the wrong tasks.
IntermediateRead 4 minDoing: under 45 minutes6 steps
Give one broken widget an error boundary
One bad API response from a single widget just wiped out my entire page.
IntermediateRead 3 minDoing: under an hour6 steps
Pull duplicated logic out of two components into your own custom hook
Three of my components run almost the exact same effect, copied and pasted each time.
Intermediate to advancedRead 6 minDoing: an afternoon7 steps

Cookbook badge

Finish all 9 recipes to earn this.

React Frontend Framework cookbook

Turn repeated markup into one reusable component with props

A controlled input in React ignores every keystroke

Give a single-page app real URLs with React Router

One class component still runs on lifecycle methods everyone else replaced

Replace prop drilling with React Context for shared state

Stop a useEffect that loops forever

React's list keys start pointing at the wrong row after a reorder

Give one broken widget an error boundary

Pull duplicated logic out of two components into your own custom hook

In these roadmaps

React Frontend Framework cookbook

Turn repeated markup into one reusable component with props

A controlled input in React ignores every keystroke

Give a single-page app real URLs with React Router

One class component still runs on lifecycle methods everyone else replaced

Replace prop drilling with React Context for shared state

Stop a useEffect that loops forever

React's list keys start pointing at the wrong row after a reorder

Give one broken widget an error boundary

Pull duplicated logic out of two components into your own custom hook

In these roadmaps