This course has been updated! We now recommend you take the State Machines in JavaScript with XState, v2 course.
Transcript from the "Introduction" Lesson
[00:00:00]
>> Hey everyone. Welcome to the Frontend Masters JavaScript State Machines and State Charts workshop with XState. Again, my name is David Khourshid. I am @davidkpiano, pretty much everywhere online, on Twitter, on GitHub, pretty much anywhere you could find me. So in this workshop, we're going to be talking about state machines from basic principles.
[00:00:22] We're going to be working with state machines from scratch, without using any libraries. And we could see how they could really improve the way that we manage application logic and state managements. And then we are going to be moving to state charts with XStates, the library that I created.
[00:00:40] So the repo that we're going to be working from is this Frontend Masters XState workshop repo. You should already have it set up by now. But if you don't, just get clone it, and then follow the installation instructions. So you're going to need to have parcel installed. Parcel-bundler should be included in the repo already.
[00:01:01] So if you just run npm install, everything should work fine. And then when you run npm start, you'll see a server running at localhost 1234. So if we go ahead and do that, run npm start, assuming that you've already run npm install, you might see an error such as this where it can't find the file in the cache.
[00:01:26] But if you were to just rebuild it by saving any of the files, that errors should disappear. So don't worry about that too much. That's not really a showstopper. So here's the way that the workshop is structured. We have a bunch of lessons. We have 12 lessons in total.
[00:01:43] And each one of those lessons has an index.html, an index.js file, a readme, and some styling. So in order to reach one of these, you could just click one of the links here or you can navigate directly to localhost 1234, then the lessons such as lesson zero, and then index.html.
[00:02:13] So this is built with parcel. So it's just going to be plain HTML, CSS and JavaScript. The styles are going to be in SaaS. We're not going to be worrying about the styles too much in this workshop. We're going to be focusing just on the JavaScript. So if you're able to see the screen when you get to 00/index.html, congratulations, the workshop repo is working.
[00:02:38] So we're all good there. So let's work in the index.js file just to get a feel for how this workshop is going to be run. When you go to the readme, there's going to be Goals, Tips and obstinately some extra credit at the end. So the goal is what you're supposed to do in order to accomplish the exercise.
[00:03:03] This is how you're going to get the most value out of this workshop is by doing each one of the exercises. There's going to be tips both here in the readme and also in the index.js file in the form of comments. And so in this one, this is just a warm-up example, if you output some object, it will print it out to the screen.
[00:03:23] So let's see how that works. We have output object and then it's just writing to this elOutput elements that I have over here. So my name is David Khourshid. I work at Microsoft. My interests are piano, state machines and also animation as well. So if I save that, you'll see that it updates over here, which is pretty nice.