Check out a free preview of the full State Machines in JavaScript with XState course:
The "Getting Started with XState" Lesson is part of the full, State Machines in JavaScript with XState course featured in this preview video. Here's what you'd learn in this lesson:

David explains that XState simplifies a lot of the work needed to model states, demonstrates how to install XState, and demonstrates how to use and import XState.

Get Unlimited Access Now

Transcript from the "Getting Started with XState" Lesson

[00:00:00]
>> This is where XState comes in. XState simplifies all of this and provides a lot more right out of the box. So, in your repo, when you ran NPM install, it also installed XState as a dependency. And so we could see over here, if we look at our package.json, we should see that XState is a dependency over here, and we're currently on version 4.9.1.

[00:00:32] So it should be available just by running import createMachine from xState. And so in that same exercise, we just console.log createMachine, just to make sure it exists. So let's go to the exercise and yeah, we see it over here. It's doing a bunch of things. And this is essentially what we are going to be doing, what we have already been doing in our previous exercises, expect, of course, it permits a lot more things to happen.

[00:01:09] So, that optics syntax that you worked with, where we have an initial and we have a bunch of states, that's going to be the exact same optic syntax that you are going to use to actually create the machine in XState. So we pass in that same object right into createMachine, and then we add transitions over here.

[00:01:32] So I'm going to go ahead and go into the scratchpad just to show you how that's going to look. So we're going to delete all of these, and I have createMachine over here. Just for an example we are going to, actually let's go ahead and do the beginning of that feedback form.

[00:01:52] So we could say const feedbackMachine = createMachine. And this is where you pass in your object syntax. So your initial might be the question state, you might have a bunch of states and remember the first thing we do is we list each of the states that we're going to have.

[00:02:10] So we have a question state. We have a form state. We have a thanks state, and we have a closed state. Okay, so let's look just dive in to the speed back machine and see what it is. So let's console.log feedbackMachine and we are going to go back to 00.

[00:02:36] Remember, you could use 00 as a scratchpad at any time. All right, so we see there's a lot of things happening here. There's this thing called a state node. And if you remember from our graph theory lesson, we have nodes and edges, these edges or transitions connect each of the nodes.

[00:02:54] And so that's what this state node represents. And so our root node we see we have an initial state of question. And we also have a bunch of states in here. And so this is just that object syntax expanded, where each one of those states is itself a state node.

[00:03:11] So you could think of this as a tree. We have a tree of state nodes which might contain child state nodes, each of which might contain child state nodes as well. In this instance, we're just going to be keeping it flat. So we have form, question, thanks, and closed.