Statechart Driven UI Components with Zag.js
Instructor
Segun Adebayo
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.
Learner Reviews
- Pär-Anton Westboma year agoWhat did you like about this course?
The pedagogic approach is great that takes us through the the process of achiving the goal. I miss parts about how to run unit tests on it though
- Learnera year agoWhat did you like about this course?
Explanation was simple and easy to understand.
- Kathrina year agoWhat did you like about this course?
I love how Segun takes us from basic, working code to a cleaned up React hook while using Zag.js to make a very useful component.
Course Content
You might also like these resources:
Introduction to Cloudflare Workers
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.
Create an eCommerce Store with Next.js and Stripe Checkout
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
Practical Git for Everyday Professional Use
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.