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.
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
Custom CSS Animations with Splitting.js
Make smooth, interactive CSS animations with CSS Variables! In this episode, Stephen Shaw teaches us how to create…
Use Gatsby & WordPress for Dynamic Sites
Content writers love the content management workflows that WordPress provides. Devs love the developer experience of using Gatsby.…
Let's Build a Game!
Do you wish you could build your own video game, but it seems impossibly hard? This episode is…
Sell Products on Your Jamstack Site
For independent creators, finding ways to charge for creations helps keep the dream alive. In this episode, Chris…
Let's Learn CSS Grid!
CSS Grid lets us create stunning layouts without adding complex markup or JavaScript. In this episode, Rachel Andrew…
Sell Products on the Jamstack
How does ecommerce work on the Jamstack? In this episode, Thor 雷神 teaches us how to use Gatsby,…
Supporters
Become a supporter to see yourself here on future episodes!
