illustration for Statechart Driven UI Components with Zag.js

Statechart Driven UI Components with Zag.js


Segun Adebayo

1h 6m closed-captioning
15 lessons
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
people completed
Published a year ago
Updated a year ago

Learn how to build a pin-input component with state machines, Zag.js and React.

We’ll look at modeling a UI component with state machines, implementing those in a framework agnostic way using Zag.js, and connect the logic to the UI component.

This course is a must-watch if you’re unfamiliar with State machines, and want to learn how to use them to build UI components with ease.

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

Free Community Resource

A Community Resource means that it’s free to access for all. The instructor of this lesson requested it to be open to the public.

Course Content

1h 6m • 15 lessons

    You might also like these resources:

    illustration for Introduction to Cloudflare Workers
    Kristian Freeman・36m・Course

    Become familiar with the Workers CLI wrangler that we will use to bootstrap our Worker project. From there you'll understand how a Worker receives and returns requests/Responses. We will also build this serverless function locally for development and deploy it to a custom domain.

    illustration for Create an eCommerce Store with Next.js and Stripe Checkout
    Colby Fayock・1h 4m・Course

    This is a practical project based look at building a working e-commerce store using modern tools and APIs. Excellent for a weekend side-project for your developer project portfolio

    illustration for Practical Git for Everyday Professional Use
    Trevor Miller・1h・Course

    git is a critical component in the modern web developers tool box. This course is a solid introduction and goes beyond the basics with some more advanced git commands you are sure to find useful.