Build a Cart Powered by State Machines
State machines help us visualize complex UI logic and make our components much more predictable and error resistant. In this episode, Jason creates a state machine using xstate to manage the opening and closing of an animated cart component.
Links & Resources
- https://xstate.js.org/viz/?gist=12a349643a70a8b09c7f7841b5168284
- https://xstate.js.org/docs/packages/xstate-react/
- https://en.wikipedia.org/wiki/Finite-state_machine
- https://codepen.io/jlengstorf/pen/oNXpeqd
- https://gedd.ski/post/state-machines-in-react/
- https://reactjs.org/docs/forwarding-refs.html
- https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
- https://shop.coavacoffee.com/
- https://www.partycorgi.com/
Full Transcript
Click to toggle the visibility of the transcript
Learn With Jason is made possible by our sponsors: