Frontend Masters XState Workshop

Welcome to the Frontend Masters workshop on JavaScript State Machines and Statecharts with XState. In this workshop, you will:

• Learn fundamental computer science principles
• Represent complex logic clearly
• Prevent impossible states and detect edge-cases
• Identify and eliminate edge cases
• Visualize your logic as state machine diagrams

XState

• GitHub repo: https://github.com/davidkpiano/xstate
• Documentation: http://xstate.js.org/docs
• Visualizer: http://xstate.js.org/viz

Getting Started

To run this workshop:

• Clone this repo
• You need to have parcel installed. To do this, run npm install -g parcel-bundler.
• In the repo's directory, run npm install
• Run npm start. You should see this:

Server running at http://localhost:1234

• Navigate to http://localhost:1234/00/index.html.

Exercises

Exercises are separated by directory. The first lesson is at 01/index.js. Each directory will contain a README.md describing the goal of the exercise, as well as tips and comments in the index.js file.

If you get lost, refer to the index.final.js file in each directory.

To navigate to a rendered exercise in the browser, change the directory in the URL (http://localhost:1234/[dir]/index.html). The first lesson is located at http://localhost:1234/00/index.html.

• Welcome (📝): 📄 Readme | 🔗 Link
• Exercise 01: 📄 Readme | 🔗 Link
• Exercise 02: 📄 Readme | 🔗 Link
• Exercise 03: 📄 Readme | 🔗 Link
• Exercise 04: 📄 Readme | 🔗 Link
• Exercise 05: 📄 Readme | 🔗 Link
• Exercise 06: 📄 Readme | 🔗 Link
• Exercise 07: 📄 Readme | 🔗 Link
• Exercise 08: 📄 Readme | 🔗 Link
• Exercise 09: 📄 Readme | 🔗 Link
• Exercise 10: 📄 Readme | 🔗 Link