https://github.com/davidkpiano/frontend-masters-xstate-workshop
Frontend Masters State Machines & XState Workshop
https://github.com/davidkpiano/frontend-masters-xstate-workshop
workshop
Last synced: about 1 year ago
JSON representation
Frontend Masters State Machines & XState Workshop
- Host: GitHub
- URL: https://github.com/davidkpiano/frontend-masters-xstate-workshop
- Owner: davidkpiano
- License: mit
- Created: 2020-05-10T00:48:51.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-09T02:58:46.000Z (over 3 years ago)
- Last Synced: 2025-03-30T12:07:52.876Z (about 1 year ago)
- Topics: workshop
- Language: JavaScript
- Homepage: https://frontendmasters.com/courses/xstate/
- Size: 440 KB
- Stars: 242
- Watchers: 10
- Forks: 110
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Frontend Masters XState Workshop
Welcome to the [Frontend Masters](https://frontendmasters.com/) 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:
```bash
Server running at http://localhost:1234
```
- Navigate to [http://localhost:1234/00/index.html](http://localhost:1234/00/index.html).
## Exercises
Exercises are separated by directory. The first lesson is at [`01/index.js`](./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](http://localhost:1234/01/index.html).
- Welcome (📝): [📄 Readme](./src/00/README.md) | [🔗 Link](http://localhost:1234/00/index.html)
- Exercise 01: [📄 Readme](./src/01/README.md) | [🔗 Link](http://localhost:1234/01/index.html)
- Exercise 02: [📄 Readme](./src/02/README.md) | [🔗 Link](http://localhost:1234/02/index.html)
- Exercise 03: [📄 Readme](./src/03/README.md) | [🔗 Link](http://localhost:1234/03/index.html)
- Exercise 04: [📄 Readme](./src/04/README.md) | [🔗 Link](http://localhost:1234/04/index.html)
- Exercise 05: [📄 Readme](./src/05/README.md) | [🔗 Link](http://localhost:1234/05/index.html)
- Exercise 06: [📄 Readme](./src/06/README.md) | [🔗 Link](http://localhost:1234/06/index.html)
- Exercise 07: [📄 Readme](./src/07/README.md) | [🔗 Link](http://localhost:1234/07/index.html)
- Exercise 08: [📄 Readme](./src/08/README.md) | [🔗 Link](http://localhost:1234/08/index.html)
- Exercise 09: [📄 Readme](./src/09/README.md) | [🔗 Link](http://localhost:1234/09/index.html)
- Exercise 10: [📄 Readme](./src/10/README.md) | [🔗 Link](http://localhost:1234/10/index.html)