React by Ear
React by Ear is an audio course that teaches React after JavaScript, one chapter at a time. It follows a small workout-logging app to explain components, JSX, props, events, state, and Effects. Listeners are encouraged to hear the episodes in order and then practice the ideas at their keyboard. The independent series uses AI-generated narration and original examples adapted from React documentation, with source credits and license links in the episode notes. It is not affiliated with or endorsed by React or Meta.
Episodes
24 — Thinking in React: A Small Workout App
Chapter 24 of React by Ear — From JavaScript to Interactive Apps.Pull the series together with an original workout-log app inspired by the React documentation. Break the interface into components, identify minimal state, choose ownership, and connect filters and forms with predictable data flow.Sources and attributionThinking in React — https://react.dev/learn/thinking-in-reactChoosing the State S
23 — Fetching Data and Handling Async UI
Chapter 23 of React by Ear — From JavaScript to Interactive Apps.Build a clear mental model of loading, error, and success states. Handle stale responses and cleanup in a small fetching example, then understand where framework data loading and cache libraries can help.Sources and attributionuseEffect — https://react.dev/reference/react/useEffectSynchronizing with Effects — https://react.dev/learn/
22 — Custom Hooks and Reusable Logic
Chapter 22 of React by Ear — From JavaScript to Interactive Apps.Extract a coherent behavior into a custom Hook. Learn how reusable logic stays connected to React’s rendering model, and why two callers of the same Hook still have independent state.Sources and attributionReusing Logic with Custom Hooks — https://react.dev/learn/reusing-logic-with-custom-hooksAdapted from React documentation by its
21 — Effect Dependencies and Stale Closures
Chapter 21 of React by Ear — From JavaScript to Interactive Apps.Understand reactive dependencies and why a closure can keep an older value. Use dependency-linter feedback, distinguish events from synchronization, and meet Effect Events without treating them as a way to hide dependencies.Sources and attributionRemoving Effect Dependencies — https://react.dev/learn/removing-effect-dependenciesSepar
20 — When You Do Not Need an Effect
Chapter 20 of React by Ear — From JavaScript to Interactive Apps.Simplify components by calculating derived values during rendering and keeping user-driven changes in event handlers. Learn when an Effect is useful and when it creates unnecessary duplicate state.Sources and attributionYou Might Not Need an Effect — https://react.dev/learn/you-might-not-need-an-effectAdapted from React documentation
18 — Refs and Working with the DOM
Chapter 18 of React by Ear — From JavaScript to Interactive Apps.Learn when to use a mutable ref and when a value belongs in state. Retain information between renders and connect React to a real DOM input for practical tasks such as focus.Sources and attributionReferencing Values with Refs — https://react.dev/learn/referencing-values-with-refsManipulating the DOM with Refs — https://react.dev/lear
19 — Effects, Synchronization, and Cleanup
Chapter 19 of React by Ear — From JavaScript to Interactive Apps.Connect a React component to an external system. Walk through Effect setup, cleanup, and re-synchronization, including the extra development checks that reveal missing cleanup.Sources and attributionSynchronizing with Effects — https://react.dev/learn/synchronizing-with-effectsLifecycle of Reactive Effects — https://react.dev/learn/l
16 — Reducers and State Transitions
Chapter 16 of React by Ear — From JavaScript to Interactive Apps.Bring scattered update logic into a pure reducer. Follow an action from dispatch to the next state, and use immutable updates to make workout-log transitions easier to understand.Sources and attributionExtracting State Logic into a Reducer — https://react.dev/learn/extracting-state-logic-into-a-reducerAdapted from React documentation
17 — Context and Shared App State
Chapter 17 of React by Ear — From JavaScript to Interactive Apps.Explore how props, context, and reducers work together as an app grows. Learn where to place a provider, which values belong in shared state, and why context does not replace every other state-management choice.Sources and attributionPassing Data Deeply with Context — https://react.dev/learn/passing-data-deeply-with-contextScaling Up
15 — Preserving and Resetting State
Chapter 15 of React by Ear — From JavaScript to Interactive Apps.See why an editor sometimes remembers its input and sometimes resets. Explore component position, type, and keys while switching between two workouts.Sources and attributionPreserving and Resetting State — https://react.dev/learn/preserving-and-resetting-stateAdapted from React documentation by its authors under CC BY 4.0: https://cr
14 — Sharing State Between Components
Chapter 14 of React by Ear — From JavaScript to Interactive Apps.Keep a filter control and workout list in agreement. Move shared state into a common parent, pass values down, and use named callbacks so children can request changes.Sources and attributionSharing State Between Components — https://react.dev/learn/sharing-state-between-componentsAdapted from React documentation by its authors under
13 — Choosing What Belongs in State
Chapter 13 of React by Ear — From JavaScript to Interactive Apps.Choose the smallest useful state for a workout interface. Derive counts and filtered lists during rendering, track selection by ID, and avoid contradictory or duplicated values.Sources and attributionChoosing the State Structure — https://react.dev/learn/choosing-the-state-structureAdapted from React documentation by its authors unde
12 — Forms and Controlled Inputs
Chapter 12 of React by Ear — From JavaScript to Interactive Apps.Follow a keystroke from a labeled input into state and back to the screen. Explore controlled fields, checkboxes, form submission, validation states, and deliberate conversion of numeric input.Sources and attributionReacting to Input with State — https://react.dev/learn/reacting-to-input-with-state<input> — https://react.dev/re
11 — Updating Objects and Arrays Safely
Chapter 11 of React by Ear — From JavaScript to Interactive Apps.Update workout objects and arrays without mutating earlier state. Explore shallow copies, nested references, map, filter, and copying before sorting or reversing.Sources and attributionUpdating Objects in State — https://react.dev/learn/updating-objects-in-stateUpdating Arrays in State — https://react.dev/learn/updating-arrays-in-sta
10 — Queued Updates and Batching
Chapter 10 of React by Ear — From JavaScript to Interactive Apps.Walk through React’s update queue one step at a time. Compare repeated replacements with named updater functions, then predict the results of mixed updates to a completed-sets counter.Sources and attributionQueueing a Series of State Updates — https://react.dev/learn/queueing-a-series-of-state-updatesAdapted from React documentation
09 — State Snapshots and Closures
Chapter 09 of React by Ear — From JavaScript to Interactive Apps.Trace which render owns an event handler and the values it remembers. Use a repetitions counter and delayed message to understand state snapshots, closures, and why a setter does not rewrite the current value.Sources and attributionState as a Snapshot — https://react.dev/learn/state-as-a-snapshotAdapted from React documentation by it
08 — Rendering, Committing, and Purity
Chapter 08 of React by Ear — From JavaScript to Interactive Apps.Follow a state update through triggering, rendering, committing, and browser paint. Learn why rendering can leave the DOM unchanged and how pure components keep a workout summary predictable.Sources and attributionRender and Commit — https://react.dev/learn/render-and-commitKeeping Components Pure — https://react.dev/learn/keeping-co
07 — State and the Rules of Hooks
Chapter 07 of React by Ear — From JavaScript to Interactive Apps.Give a workout counter memory. Learn how useState preserves values between renders, why separate component instances have independent state, and where ordinary Hooks may be called.Sources and attributionState: A Component's Memory — https://react.dev/learn/state-a-components-memoryRules of Hooks — https://react.dev/reference/rule
06 — Events and Callback Props
Chapter 06 of React by Ear — From JavaScript to Interactive Apps.Follow a click from a workout button to a named event handler. Explore passing functions instead of calling them during rendering, callback props, event propagation, and preventing a form’s default behavior.Before listening: Components, props, functions, and conditional UI.Practice: Pass a named callback into an ExerciseCard and trac
05 — Conditional UI, Lists, and Keys
Chapter 05 of React by Ear — From JavaScript to Interactive Apps.Turn a collection of workout data into the right rows on screen. Explore conditional rendering, filtering and mapping arrays, and stable keys that identify items among their siblings.Before listening: JSX, props, and JavaScript array methods.Practice: Render a filtered exercise list with stable IDs and a completion indicator.Sources
04 — Props, Children, and Composition
Chapter 04 of React by Ear — From JavaScript to Interactive Apps.Make one component useful in several places. Follow workout data from a parent into props, use children for nested content, and explore composition without mutating the data a component receives.Before listening: Components and JSX expressions.Practice: Create a reusable workout card whose details arrive through props.Sources and att
03 — JSX and JavaScript Expressions
Chapter 03 of React by Ear — From JavaScript to Interactive Apps.Connect JavaScript values to the markup a React component returns. Explore JSX structure, closing tags, fragments, className, and braces for expressions through a small workout interface.Before listening: Components, module boundaries, and JavaScript expressions.Practice: Build an ExerciseCard that displays data through JSX expressio
02 — Components and Module Boundaries
Chapter 02 of React by Ear — From JavaScript to Interactive Apps.Break a workout interface into components with clear jobs. This chapter connects named function components, nesting, and JavaScript modules, including default and named imports and exports.Before listening: The introductory React and JSX ideas in Chapter 01.Practice: Split an ExerciseCard and WorkoutPage into separate modules and con
01 — From JavaScript to React
Chapter 01 of React by Ear — From JavaScript to Interactive Apps.How does React turn JavaScript ideas into an interface? Begin with a small workout card and explore components, JSX, and the difference between describing a UI and displaying it in the browser.Before listening: JavaScript functions, objects, and expressions.Practice: Sketch an ExerciseCard showing an exercise name and repetition coun
