Introduction to statecharts

on YouTube ↗44m

" summary

Demo builds a working drag‑and‑drop using xstate and React and the sandboxed code is linked, not just abstract theory. It uses the useMachine hook, context for pointer x/y and dx/dy, assign actions to update positions, a small CSS fix to make movement visible, nested states to lock axis with Shift, and connects the machine to the visualizer so state transitions are inspectable. Everything runs live in the demo with statecharts actually steering behavior.

AI-written summary · about

" chapters (10)

1. 0:00Start
2. 7:16Mouse Move
3. 7:42Actions
4. 14:09Css Variables
5. 20:52Shift Events
6. 22:37Add an Event Listener
7. 26:05What Is the Difference between State Charts and State Machines
8. 26:41Parallel States
9. 34:10Reason for State Charts
10. 40:08New Visualizer

" related talks

• 19mIntroducing state machines and statechartsLaura Kalbag · React Finland 2021
• 37mReactive State Machines and StatechartsDavid Khourshid · React Finland 2018
• 31mXState: the Visual Future of State ManagementDavid Khourshid · React fwdays'21
• 01h 01mThe visual future of reactive applications with statechartsDavid Khourshid · HolyJS Piter 2019
• 18mBuilding an accessible Slider component using State MachinesSegun Adebayo · Next.js Conf 2021
• 22mMake legacy code delightful with statechartsMatt Pocock · React Finland 2021
• 28msetState MachineMichele Bertoli · React Amsterdam 2018
• 42mTackle React component complexity using Reactive StatechartsFarzad Yousefzadeh · reactjsday 2019