Need help with frontend-masters-xstate-workshop?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

davidkpiano
170 Stars 76 Forks MIT License 43 Commits 4 Opened issues

Description

Frontend Masters State Machines & XState Workshop

Services available

!
?

Need anything else?

Contributors list

# 3,558
TypeScr...
React
statech...
visuali...
30 commits
# 266,335
HTML
statech...
CSS
visuali...
2 commits
# 33,016
nextjs
GraphQL
lodash
CSS
1 commit
# 20,218
React
Shell
CSS
node
1 commit

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

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.