Introducing Construct Sturdy UIs with XState
State machines give you the power to make sturdy UIs for three main reasons:
- They encourage planning, so you know ahead of time what states your component should handle.
- They've been used and refined for decades, so the technology has very few unexpected edge cases.
- They can be rendered visually, so you can understand at a glance what is happening.
In Construct Sturdy UIs with XState, we'll create an app that allows users to match a Star Wars character with their home world. We'll use XState to ensure that the UI is predictable and resilient.
Isaac Mann: [0:00] Welcome to the "Construct Sturdy UIs with xstate" course. My name is Isaac Mann and I'm excited to share with you this course on how to use xstate inside of your apps. There are three main reasons why I love xstate.
[0:15] The first is that state machines encouraged planning out your component before you create it, and planned code is better code. The second reason is that state machines are a very old idea which means they've been tested and proven.
[0:31] The third reason is that sometimes diagrams communicate a lot better than text, and the xstate visualizer is a great way of communicating what a state machine is doing.
[0:41] In this course, we'll build out an app that challenges the user to match a "Star Wars" character with their home world. Along the way, we'll explore how to map out the states and events of your state machine and create the transitions that connect these states together.
[0:56] We'll explain how to use context to store extra data and use actions and services to interact with the world outside of the state machine. We'll build larger state machines that have sub-states inside of them and use guards to decide at the time of an event which transition to take.
[1:14] We'll look at using parallel states to model situations where a state machine can be in more than one state at the same time. We'll create multiple machines that live inside of different components and explain how to coordinate between the different machines by passing messages through component props.
[1:32] We'll use history states as a way to have the state machine remember where it was in a particular area so you can return to it later. Finally, we'll use activities to start a process when a state is entered and ended when the state is exited.