In the second part of our XState, React, and Typescript tutorial, Santiago Kent adds more features to the traffic light example created in part one. In the first part of this video series, Santiago showed you state machines, the concepts behind them, and how to create a basic working machine using XState and integrate that into a React component. In this second part, we will make our traffic light run automatically as well as turn it on and off. Santiago will also go over how Delayed Transitions can make automatic transitions possible without writing too much code, and how Hierarchical States can help model more complex behaviors without losing confidence, type safety, and code readability.

⏱ TIMESTAMPS

• 0:00 Intro
• 1:00 Use Delayed Transition to Make Transition Automatic
• 3:38 Use Hierarchical States to Turn Light On and Off

⌨ Want to check out Santiago’s code? Check it out here: https://codesandbox.io/s/xstate-getting-started-2-yn8uo

📄 Also read more on his blog: https://moduscreate.com/blog/xstate-react-typescript/

#react #typescript