https://github.com/segunadebayo/egghead-zagjs-course
Egghead Zag.js Course
https://github.com/segunadebayo/egghead-zagjs-course
course egghead state-machine stately xstate zagjs
Last synced: about 1 year ago
JSON representation
Egghead Zag.js Course
- Host: GitHub
- URL: https://github.com/segunadebayo/egghead-zagjs-course
- Owner: segunadebayo
- Created: 2023-01-31T21:10:00.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-31T21:19:48.000Z (over 3 years ago)
- Last Synced: 2025-05-03T12:03:55.293Z (about 1 year ago)
- Topics: course, egghead, state-machine, stately, xstate, zagjs
- Language: CSS
- Homepage:
- Size: 26.4 KB
- Stars: 16
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Egghead Zag.js Workshop
Welcome to the [Egghead.io](https://egghead.io/) workshop on **Building UI Components with Statecharts**. In this course, you will:
- Learn fundamental concept of state machine, event and transition
- Model a UI component with state machine
- Connect state machine logic to UI
- Manage DOM events in state machines
- Create custom React hooks with state machines
## Zag.js
- GitHub repo: https://github.com/chakra-ui/zag
- Documentation: https://zagjs.com/
## Getting Started
To run this code in this repo:
- Clone this repo
- You need to have `pnpm` installed. To do this, run `npm install -g pnpm`.
- In the repo's directory, run `pnpm install`
- Run `pnpm dev`. You should see this:
```bash
VITE v3.1.4 ready in 694 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
```
- Navigate to [http://localhost:5173/](http://localhost:5173/).
## Lessons
Lessons are separated by branches. This branch contains the first set of lesson (01-04) and subsequent lessons are in their respective branches.
- [Lesson 05 - Create Logic in Zag.js](https://github.com/segunadebayo/egghead-zagjs-course/tree/05-create-logic-in-zag)
- [Lesson 06 - Connnect Logic to UI](https://github.com/segunadebayo/egghead-zagjs-course/tree/06-connect-logic-ui)
- [Lesson 07 - Handling Focus and Blur Events](https://github.com/segunadebayo/egghead-zagjs-course/tree/07-handling-focus-and-blur)
- [Lesson 08 - Handling Input Event](https://github.com/segunadebayo/egghead-zagjs-course/tree/08-handling-input-event)
- [Lesson 09 - Handling Backspace Event](https://github.com/segunadebayo/egghead-zagjs-course/tree/09-handling-backspace)
- [Lesson 10 - Handling Paste Event](https://github.com/segunadebayo/egghead-zagjs-course/tree/10-handling-paste-event)
- [Lesson 11 - Ensure Single Character](https://github.com/segunadebayo/egghead-zagjs-course/tree/11-ensure-single-character)
- [Lesson 12 - Trigger Value Completion](https://github.com/segunadebayo/egghead-zagjs-course/tree/12-trigger-value-completion)
- [Lesson 13 - Usage with Forms](https://github.com/segunadebayo/egghead-zagjs-course/tree/13-usage-within-forms)
- [Lesson 14 - Refactor to Custom Hook](https://github.com/segunadebayo/egghead-zagjs-course/tree/14-refactor-hooks)