XState, React, and Typescript 101 Tutorial | Pt. 2

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.

? Watch Part 1: https://youtu.be/po1YRAk7irY

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/getting-started-with-xstate-react-and-typescript-part-2/

? Subscribe to the Modus Create YouTube Channel to get more insights from our global team of
technologists, designers, and strategists: http://mdus.co/subscribe

? Modus Create maintains an active blog on application development, customer experience,
product management, and more. Check it out: https://moduscreate.com/blog

? Ready to transform your career? Modus is expanding and hiring!! Check out these positions and apply today!

Business Intelligence Engineer
https://grnh.se/be0df69d3us

Front End Engineer (JavaScript, Vue)
https://grnh.se/7972d0183us

Full Stack Engineer (React, Node, AWS)
https://grnh.se/5d581fa93us

Full Stack Engineer - LeaseUp Web Application - (React,Python,AWS)
https://grnh.se/608025fd3us

Front End Engineer (React,Ionic)
https://grnh.se/4ed1104e3us

Front End Enginer (Angular, Ionic)
https://grnh.se/23c3a35b3us

QA Automation (Python/Pytest)
https://grnh.se/6a118e423us


? Modus Create builds customer-centric products, processes, and platforms to help businesses
succeed in the digital economy.

? For over 10 years, our global team of strategists, designers, and technologists have helped the world’s biggest brands such as Burger King, Kaplan, AARP, PBS, and Time Inc. deliver powerful digital experiences to their clients. We work in an iterative, outcome-driven way to support our clients with product strategy, customer experience (CX), full-stack Agile software development, and security.

? Inc Magazine has rated Modus Create as one of the fastest-growing American companies for 6 years in a row. Our distributed team of 250+ Modites have been pioneers in the open-source community, creating innovations such as the Ionic-Vue integration, RoboDomo, Beep, and Capsule. Visit moduscreate.com to learn more.