Skip to content
React by Ear cover art

Dilash Chimoriya

React by Ear

A Courses and Education podcast

Good podcast? Give it some love!

About the show

Learn React after JavaScript, one audio chapter at a time. React by Ear follows a small workout-logging app through components, JSX, props, events, state, and Effects. Listen in order, then put the ideas into practice at your keyboard. This independent series uses AI-generated narration and original examples adapted from React documentation. Source credits and license links appear in episode notes. Not affiliated with or endorsed by React or Meta.

Newest episodes

24 — Thinking in React: A Small Workout App

37 min

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 attribution Thinking in React — https://react.dev/learn/thinking-in-react Choosing the State Structure — https://react.dev/learn/choosing-the-state-structure Sharing State Between Components — https://react.dev/learn/sharing-state-between-components Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

23 — Fetching Data and Handling Async UI

47 min

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 attribution useEffect — https://react.dev/reference/react/useEffect Synchronizing with Effects — https://react.dev/learn/synchronizing-with-effects Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

22 — Custom Hooks and Reusable Logic

21 min

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 attribution Reusing Logic with Custom Hooks — https://react.dev/learn/reusing-logic-with-custom-hooks Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

Similar podcasts

All episodes

24 — Thinking in React: A Small Workout App

37 min

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 attribution Thinking in React — https://react.dev/learn/thinking-in-react Choosing the State Structure — https://react.dev/learn/choosing-the-state-structure Sharing State Between Components — https://react.dev/learn/sharing-state-between-components Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

23 — Fetching Data and Handling Async UI

47 min

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 attribution useEffect — https://react.dev/reference/react/useEffect Synchronizing with Effects — https://react.dev/learn/synchronizing-with-effects Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

22 — Custom Hooks and Reusable Logic

21 min

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 attribution Reusing Logic with Custom Hooks — https://react.dev/learn/reusing-logic-with-custom-hooks Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

21 — Effect Dependencies and Stale Closures

21 min

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 attribution Removing Effect Dependencies — https://react.dev/learn/removing-effect-dependencies Separating Events from Effects — https://react.dev/learn/separating-events-from-effects Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

20 — When You Do Not Need an Effect

19 min

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 attribution You Might Not Need an Effect — https://react.dev/learn/you-might-not-need-an-effect Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

18 — Refs and Working with the DOM

43 min

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 attribution Referencing Values with Refs — https://react.dev/learn/referencing-values-with-refs Manipulating the DOM with Refs — https://react.dev/learn/manipulating-the-dom-with-refs Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

19 — Effects, Synchronization, and Cleanup

35 min

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 attribution Synchronizing with Effects — https://react.dev/learn/synchronizing-with-effects Lifecycle of Reactive Effects — https://react.dev/learn/lifecycle-of-reactive-effects Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

16 — Reducers and State Transitions

41 min

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 attribution Extracting State Logic into a Reducer — https://react.dev/learn/extracting-state-logic-into-a-reducer Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

17 — Context and Shared App State

17 min

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 attribution Passing Data Deeply with Context — https://react.dev/learn/passing-data-deeply-with-context Scaling Up with Reducer and Context — https://react.dev/learn/scaling-up-with-reducer-and-context Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

15 — Preserving and Resetting State

45 min

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 attribution Preserving and Resetting State — https://react.dev/learn/preserving-and-resetting-state Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

14 — Sharing State Between Components

29 min

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 attribution Sharing State Between Components — https://react.dev/learn/sharing-state-between-components Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

13 — Choosing What Belongs in State

47 min

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 attribution Choosing the State Structure — https://react.dev/learn/choosing-the-state-structure Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

12 — Forms and Controlled Inputs

41 min

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 attribution Reacting to Input with State — https://react.dev/learn/reacting-to-input-with-state — https://react.dev/reference/react-dom/components/input Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

11 — Updating Objects and Arrays Safely

42 min

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 attribution Updating Objects in State — https://react.dev/learn/updating-objects-in-state Updating Arrays in State — https://react.dev/learn/updating-arrays-in-state Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

10 — Queued Updates and Batching

42 min

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 attribution Queueing a Series of State Updates — https://react.dev/learn/queueing-a-series-of-state-updates Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

09 — State Snapshots and Closures

30 min

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 attribution State as a Snapshot — https://react.dev/learn/state-as-a-snapshot Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

08 — Rendering, Committing, and Purity

50 min

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 attribution Render and Commit — https://react.dev/learn/render-and-commit Keeping Components Pure — https://react.dev/learn/keeping-components-pure Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

07 — State and the Rules of Hooks

37 min

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 attribution State: A Component's Memory — https://react.dev/learn/state-a-components-memory Rules of Hooks — https://react.dev/reference/rules/rules-of-hooks Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

06 — Events and Callback Props

39 min

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 trace what runs when its button is clicked. Sources and attributionResponding to Events — https://react.dev/learn/responding-to-events Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

05 — Conditional UI, Lists, and Keys

58 min

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 and attributionConditional Rendering — https://react.dev/learn/conditional-renderingRendering Lists — https://react.dev/learn/rendering-lists Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

04 — Props, Children, and Composition

15 min

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 attributionPassing Props to a Component — https://react.dev/learn/passing-props-to-a-component Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

03 — JSX and JavaScript Expressions

16 min

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 expressions. Sources and attributionWriting Markup with JSX — https://react.dev/learn/writing-markup-with-jsxJavaScript in JSX with Curly Braces — https://react.dev/learn/javascript-in-jsx-with-curly-braces Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

02 — Components and Module Boundaries

36 min

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 connect their imports. Sources and attributionYour First Component — https://react.dev/learn/your-first-componentImporting and Exporting Components — https://react.dev/learn/importing-and-exporting-components Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

01 — From JavaScript to React

43 min

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 count. Sources and attribution Quick Start — https://react.dev/learn/ Adapted from React documentation by its authors under CC BY 4.0: https://creativecommons.org/licenses/by/4.0/ License notice: https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md Independent AI-generated narration with adapted explanations and original workout examples. Not affiliated with or endorsed by React, Meta, or the source authors.

–

0 ratings from members

5
4
3
2
1

Rate this podcast

Log in to rate and review the shows you listen to.

No reviews yet — be the first member to rate "React by Ear".

This podcast, its content and its artwork are not owned by, affiliated with, or endorsed by Castquire.

Keep listening

Discover more podcasts like this.

Up next

  1. Nothing queued. Use + Queue on any episode to line it up.

0:00 0:00