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.
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.
Resources & Links
- Demo
- Repo
- xstate.js.org/viz/?gist=12a349643a70a8b09c7f7841b5168284
- xstate.js.org/docs/packages/xstate-react/
- en.wikipedia.org/wiki/Finite-state_machine
- codepen.io/jlengstorf/pen/oNXpeqd
- gedd.ski/post/state-machines-in-react/
- reactjs.org/docs/forwarding-refs.html
- developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
- shop.coavacoffee.com/
- partycorgi.com/
More episodes from Learn With Jason Season 3
Learn With Jason
S3.E15
Make smooth, interactive CSS animations with CSS Variables! In this episode, Stephen Shaw teaches us how to create custom text animations and Twitch overlays using CSS, HTML and Splitting.js.
Learn With Jason
S3.E16
Content writers love the content management workflows that WordPress provides. Devs love the developer experience of using Gatsby. And when you combine the two? Everyone wins! In this episode, Zac Gordon teaches us how to power Gatsby sites with WordPress and how to add dynamic features!
Learn With Jason
S3.E17
Do you wish you could build your own video game, but it seems impossibly hard? This episode is for you: Cody teaches us how to use PlayCanvas to collaboratively build games using WebGL!
Learn With Jason
S3.E19
For independent creators, finding ways to charge for creations helps keep the dream alive. In this episode, Chris Biscardi and Jason will add Stripe payments to the Party Corgi website.
Learn With Jason
S3.E20
CSS Grid lets us create stunning layouts without adding complex markup or JavaScript. In this episode, Rachel Andrew — a driving force behind Grid‘s spec & adoption! — teaches us how to get started!
Learn With Jason
S3.E21
How does ecommerce work on the Jamstack? In this episode, Thor 雷神 teaches us how to use Gatsby, Netlify Functions, and Stripe to start selling products on your website in minutes!