egghead-zagjs-course

KO | EN

gitlite — search

#javascript #hacktoberfest #typescript #go #deep-learning #docker #macos #awesome #kubernetes #vue #awesome-list #security #mcp #openai

egghead-zagjs-course

(★ 20)

Egghead Zag.js Course

egghead-zagjs-course Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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)

egghead-zagjs-course

egghead-zagjs-course Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

egghead-zagjs-course

egghead-zagjs-course Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README