Live React: Hot Reloading with Time Travel
summary
Live editing environment that replaces component methods at runtime and preserves instance state, powered by Webpack Hot Module Replacement and React hot loader, so edits to render and style apply without full refresh. Stores become reducers (state, action → state) enabling a timeline monitor that records every action, supports rewind/commit, and replays to reproduce bugs or export sequences as unit tests. Demo includes error recovery during edits and a React Native port, all using Redux for state orchestration and time travel debugging.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 0:37The problem
- 2:52The status quo
- 3:30Fixing the problem
- 4:12Autoloading tools
- 6:50React louder
- 8:25Webpack
- 9:47React workflow
- 10:01React components
- 10:50Flux
- 15:49State
- 16:11Reducer
- 17:35Pure Functions
- 17:58Monitor
- 26:17Flux workflow
- 26:41Final demo
related talks
22mTweak your page in real time, without leaving the comfort of your editor
27mThe Redux Journey
21mThe Evolution of React UI Development
01h 04mWhat makes React different?
26mTime travel debugging: A step-by-step guide
26mReact Developer tooling
27mReact, But For Data
37mThe New Hotness" An Exploration of Reacts Exciting New Features"