https://github.com/ankeetmaini/xstate-frontend-masters-workshop
https://github.com/ankeetmaini/xstate-frontend-masters-workshop
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/ankeetmaini/xstate-frontend-masters-workshop
- Owner: ankeetmaini
- License: mit
- Created: 2020-05-14T19:28:37.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T18:11:21.000Z (over 3 years ago)
- Last Synced: 2025-02-10T21:19:13.310Z (over 1 year ago)
- Language: JavaScript
- Size: 1.05 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
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](./00/README.md) | [🔗 Link](http://localhost:1234/00/index.html)
- Exercise 01: [📄 Readme](./01/README.md) | [🔗 Link](http://localhost:1234/01/index.html)
- Exercise 02: [📄 Readme](./02/README.md) | [🔗 Link](http://localhost:1234/02/index.html)
- Exercise 03: [📄 Readme](./03/README.md) | [🔗 Link](http://localhost:1234/03/index.html)
- Exercise 04: [📄 Readme](./04/README.md) | [🔗 Link](http://localhost:1234/04/index.html)
- Exercise 05: [📄 Readme](./05/README.md) | [🔗 Link](http://localhost:1234/05/index.html)
- Exercise 06: [📄 Readme](./06/README.md) | [🔗 Link](http://localhost:1234/06/index.html)
- Exercise 07: [📄 Readme](./07/README.md) | [🔗 Link](http://localhost:1234/07/index.html)
- Exercise 08: [📄 Readme](./08/README.md) | [🔗 Link](http://localhost:1234/08/index.html)
- Exercise 09: [📄 Readme](./09/README.md) | [🔗 Link](http://localhost:1234/09/index.html)
- Exercise 10: [📄 Readme](./10/README.md) | [🔗 Link](http://localhost:1234/10/index.html)