davidkpiano / Frontend Masters Xstate Workshop
Licence: mit
Frontend Masters State Machines & XState Workshop
Stars: ✭ 175
Programming Languages
javascript
184084 projects - #8 most used programming language
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, runnpm 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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].