Statechart Driven UI Components with Zag.js

• 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.

This course teaches how to build a pin-input component with state machines, Zag.js, and React. It covers modeling a UI component with state machines, implementing them in a framework agnostic way using Zag.js, and connecting the logic to the UI component.

• Ideal for developers unfamiliar with state machines who want to learn how to use them to build UI components with ease.

• Basic understanding of React and JavaScript is recommended.

• Introduction to Statechart Driven UI Components with Zag.js.
• Model Finite Number of State and Events with State Machines.
• Model the Basic Events, Actions, and Transitions of a Pin Input Component.
• Set up a React Zag.js Project with Vite.
• Style a Pin Input through Data Attributes in React.
• Create and Visualize a Pin Input State Machine with TypeScript and Zag.js.
• Connect Zag.js Machine Logic to React UI through the useMachine Hook.
• Implement a State Machine Action for Setting Input Focus in Zag.js.
• Trigger Side Effects in a Zag.js State Machine with the watch Property.
• Schedule Input Focus with requestAnimationFrame to Handle Multiple DOM Mutations in Zag.js.
• Spread Values Across a Pin Input Field in a Zag.js State Machine.
• Implement Conditional Logic in a Zag.js Action to Enforce a Single Character Per Input.
• Trigger Side Effects using Zag.js computed and watch Properties.
• Submit Pin Input Values in a Form with a Hidden Input.
• Refactor Zag.js State Machine Powered Pin Component Functionality to a Custom React Hook.