Check out a free preview of the full State Modeling in React with XState course

The "Using XState Exercise" Lesson is part of the full, State Modeling in React with XState course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to use the state machine within XState and XState React.

Preview
Close

Transcript from the "Using XState Exercise" Lesson

[00:00:00]
>> Okay, so for the next exercise, we are going to refactor our previous machine. And so we're going to be going to exercise 01. We're going to be refactoring this to use xstates. So you'll see in timer.js, we have this timer machine and you could just copy and paste the same machine that you created in exercise zero for that or you could copy and paste it from the timer machine over here.

[00:00:30]
And over here, this is going to be replaced with use machine instead, which is imported over here. So all you have to do is uncomment that and import it and pretty much everything else from exercise zero stays the same. So you're going to want that same onClick handler over here, except call it send instead of dispatch.

[00:00:54]
Basically the same thing. And yeah, so, again, we're refactoring the machine from or the component from exercise zero to use xstate react instead. And that use machine hook. So are there any questions before we start this exercise?
>> The exercise page says to install xstate and react xstate that's in our package locked already, right?

[00:01:22]
>> Yeah, so installation instructions over here it says to install xstate and xstate react. This is just in general, if you're doing a reacts project, you do wanna do those steps as well. But since it's already done for you, when you installed this create react app, it's going to be there for you.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now