Skip to content
Episode from the podcast React by Ear
01 — From JavaScript to React artwork

Episode

01 — From JavaScript to React

Released Friday, September 11th 2026 43 min

Show notes

About this episode

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.

More from React by Ear

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.

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

Up next

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

0:00 0:00