资源
以下是,用于在实际应用中学习和使用 XState 的许多资源的不完全集合。查看 GitHub 上的 Awesome XState 集合以获取更多资源!
- 来自 Stately 的资源
课程
:::tip Official Course Watch the official State Machines in JavaScript with XState course by @davidkpiano on Frontend Masters! In this course, you’ll learn the fundamentals of state machines and statecharts, from building your own without any libraries in pure JavaScript, up to using XState to take advantage of a wide variety of other features.
The workshop code examples are open-sourced and available on GitHub.
There is also a follow-up course: State Modeling with React and XState. Once you’ve gone through the first course, be sure to take this one too so you can learn how to apply state machines and statecharts to real-world apps and master advanced concepts such as spawning/invoking actors and model-based testing. :::
:::tip Catalogue Explore a collection of professionally-designed state machines and statecharts in the XState Catalogue. You can copy-paste these machines directly into your projects, as well as visualize them directly in the catalogue. :::
Other great courses and guides:
- Egghead - Introduction to State Machines Using XState by Kyle Shevlin
- Egghead - Construct Sturdy UIs with XState by Isaac Mann
- XState Guide by Brad Woods
- DevTrends: XState by Anthony Gore
播客
- Q&A on XState, Getting Comfortable with JavaScript, Managing WordPress Sites, and Background Images in CSS on 2021-10-04
- 🎙 (Modern Web) S07E20: Building State Machines using XState with David Khourshid on 2021-01-20
- 🎙 (React Podcast) 83: David Khourshid on XState, Statecharts, and the Future of Designer—Coder Collaboration on 2020-02-27
- 🎙 (Syntax.FM) 206: State Machines, CSS and Animations with David K Piano on 2019-12-18
- 🎙 (Egghead.io Podcast) 11: Introduction To State Machines And XState With Kyle Shevlin on 2019-12-17
- 🎙 (Full Stack Radio) 130: David Khourshid - Building Better UI Components with State Machines on 2019-12-11
- 🎙 (Chats with Kent) Make Your Apps Resilient Using Finite State Machines With David Khourshid on 2019-08-05
- 🎙 (React Round-Up) 069: The State Machines in React with David Khourshid on 2019-07-09
- 🎙 (ShopTalk Show) 327: Working with State Machines with Jon Bellah and David Khourshid on 2018-09-03
- 🎙 (React Podcast) 5: Finite State Machines with David Khourshid on 2018-04-03
文章
- Using State Machines in Front-End Development by Danielle Richter 2021-10-27
- Quick post: Modeling a video player with XState by Matías Hernández Arellano on 2021-10-25
- Getting Started with XState, React and Typescript (Part 2) by Santiago Kent on 2021-10-18
- Getting Started with XState, React and Typescript (Part 1) by Santiago Kent on 2021-01-05
- Untangling your Logic using State Machines by Roberto Ruiz on 2021-10-07
- The power of XState by Yanir Manor on 2021-10-04
- Building an acquisition Funnel in React with Xstate - Part 1 by Jb Rocher
- XState - Expero Night by Iván Trujillo
- Orchestrating Serverless from Serverless by Kjartan Rekdal Müller on 2021-09-20
- How to model application flows in React with finite state machines and XState by Andrew McDowell on 2021-07-23
- Testing XState machines in your React Native app by Simone D’Avico on 2021-07-15
- Using XState with Deno by Bruno Quaresma on 2021-06-24
- Use an XState Machine with React by Josh Branchaud on 2021-05-09
- XState: Should this be an action, or a service? by Matt Pocock on 2021-04-30
- State Machines: Should this be a state, or in context? by Matt Pocock on 2021-04-29
- XState: What’s the difference between Machine and createMachine? by Matt Pocock on 2021-04-28
- How to Use Finite State Machines in React by Leonardo Maldonado on 2021-03-17
- Frontend is Rocket Science – Managing state in any JavaScript Application by Aleksej Dix on 2021-02-26
- Boost your React application’s performance by XState by Alireza Valizade on 2021-02-24
- Rsvp to weddings with XState by Andrew Peterson on 2021-02-19
- An Introduction to XState in TypeScript by Neeraj Khosla on 2021-02-04
- An Introduction to Finite State Machines: Simplifying React State Management with State Machines by Bradley Kofi on 2021-02-02
- Integrate XState with React Native and React Navigation by Simone D’Avico on 2021-02-02
- Infinite Scrolling with Svelte 3, XState and IntersectionObserver by Gustavo Castillo on 2021-02-01
- Untangle complex flows in your React Native app with XState by Simone D’Avico on 2021-01-14
- “Just Use Props”: An opinionated guide to React and XState by Matt Pocock on 2021-01-11
- Creating State Machines in JavaScript with XState by Dor Nisim on 2021-01-10
- Future of state management in React with XState by Jakub Skoneczny on 2021-01-05
- Learning XState by refactoring an old project by Florens Verschelde on 2021-01-01
- React context without context, using XState – CodeWithSwiz 14, 15 by @swizec on 2020-11-10
- State Machines Workshop with XState by Ademola (@ooade) on 2020-11-06
- Tes en Línea: React, TypeScript, XState, fp-ts & CSS Grid (esp) by Edgar Rodriguez on 2020-10-29
- How to write tests for XState by @swizec on 2020-10-13
- Create-React-App Template with XState by Kacper Wdowik on 2020-10-18
- XState Brain Teaser #1 - Auth Flow by Matt Pocock on 2020-10-09
- Refactoring a useReducer to XState, Part 1 by @swizec on 2020-10-08
- How State Machines Saved Our Bacon 🥓 by Ian Jones on approximately 2020-10-01
- Finite State Machines in React JS using XState JS by Sooraj on 2020-09-23
- My First Machine, Getting Started with XState and Angular by Caleb Ukle on 2020-09-11
- State Machines For Everyone by Alex Dodge on 2020-09-08
- State machines in Production by Ivan Kovic on 2020-09-02
- Testing XState with React Testing Library by Joe Purnell on 2020-08-27
- When your brain is breaking, try XState by @swizec on 2020-08-10
- Todo App with XState and Vue composition API by Jasmin Virdi on 2020-08-03
- Firebase authentication with XState and Svelte by @codechips on 2020-07-31
- SWR-Style Fetching with XState State Machines by Daniel Imfeld on 2020-07-21
- Hello XState Part 3: Writing my first state machines (and washing my hands) by by Eka on 2020-07-21
- Intro: XState and State Machines (React) by Dimitar Danailov on 2020-07-17
- XState, React, and TypeScript - how to get it working by Matt Pocock on 2020-07-17
- Hello XState Part 2: Exploring the XState Viz example by Eka on 2020-07-13
- Slides - Working with State Machines in Angular with XState by Stefanos Lignos on 2020-07-20
- Hello XState Part 1: Learning state machines for frontend web development by Eka on 2020-07-12
- Comparing state machines: XState vs. Robot by Samaila Bala on 2020-07-09
- Starting with State Machines and XState! by Jasmin Virdi on 2020-07-06
- Learn and Apply XState with Vonage Video by Kelly Andrews on 2020-07-01
- Introduction to XState by Flavio Copes on 2020-06-26
- Multistep form handling with Finite State Machines, Formik and TypeScript by Daniel Grychtoł on 2020-06-17
- Intro to XState - a true state management library for React by Pavlo Lompas on 2020-06-15
- Remake of the 100 squares game by @nikpundik on 2020-06-05
- ThoughtWorks - XState in the Technology Radar for Languages & Frameworks on 2020-05-19
- A front-end journey into XState by Robert Higdon on 2020-05-15
- GitHub - Stripe Machine Example: An animated stripe checkout using XState and React by @JacobParis on 2020-05-08
- XState and Svelte: initial setup by @rveciana on 2020-05-08
- How To Build Finite State Machines using XState and React by Ibrahima Ndaw on 2020-04-21
- XState Minesweeper by @lednhatkhanh on 2020-04-16
- XState Chart Traffic Lights by @howardmann on 2020-04-16
- A simple calculator using React and XState (statecharts) by diegoperezm on 2020-04-15
- Modeling parallel states in XState by Jacob Paris on 2020-04-05
- Guidelines for State Machines and XState by Kyle Shevlin on 2020-04-03
- An Introduction to State Machines using XState by Mat Warger on 2020-03-30
- React Single File Components with XState by Robert on 2020-03-29
- State-driven interfaces with XState by Brad Woods on 2020-03-23
- Undo/Redo in React Using XState by Robert on 2020-03-22
- Working with non-user asynchronous events in model based tests with XState by John de Stigter on 2020-03-18
- Supervising XState Machines with Redux by John de Stigter on 2020-03-16
- Model based UI tests with XState, Cypress, Puppeteer & more by John de Stigter on 2020-03-12
- Thoughts on State Management with XState and ReactJS by John de Stigter on 2020-03-08
- XState: The new opportunity for web development by @mschulte on 2020-03-05
- Communicating with spawned and invoked XState actors in React by Ismayil Khayredinov on 2020-02-02
- Replacing Vuex with XState by Felix Guerin on 2020-01-28
- XState 状态管理 by 陈三 on 2019-12-31
- XState 新手教學 - Finite State Machine by Jerry Hong on 2019-12-08
- How to Effortlessly Model Async (React) with XState’s Invoke by Matthew Jones on 2019-10-30
- Getting Started with XState by Viet Nguyen on 2019-10-09
- A series of examples showing how to model application state with statechart using xstate by @coodoo on 2019-09-27
- Finite State Machines in React JS using XState by Sooraj Nair on 2019-08-22
- Hyperapp demo with XState by @johnkazer on 2019-07-23
- My love letter to XState and statecharts ♥ by Tim Deschryver on 2019-07-08
- Creating a Complex IVR System with Ease with XState by Yonatan Mevorach on 2019-06-20
- StackOverflow: What is an actual difference between redux and a state machine (e.g. xstate)? by David Khourshid on 2019-02-04
- XState - a TypeScript state machine with a lot of features by Frank Quednau on 2019-01-30
- Vuex + XState by Brock Reece on 2017-09-17
视频
- ▶️ Design a polling state machine with XState by Josh Branchaud
- ▶️ You’re a Wizard Form, Harry (Infobip Shift) by Erik Rasmussen on 2021-09-08
- ▶️ Making Application Logic Visually Collaborative (Infobip Shift) by David Khourshid on 2021-09-07
- ▶️ The Actor Model: a new mental model for React (React Finland) by Farzad Yousefzadeh on 2021-09-01
- ▶️ Make legacy code delightful with statecharts (React Finland) by Matt Pocock on 2021-09-01
- ▶️ Introducing state machines and statecharts (React Finland) by Laura Kalbag on 2021-09-01
- ▶️ The State of XState (React Finland) on 2021-08-30 by David Khourshid
- ▶️ Splitting the view and the brains in JS — state machines with XState (in French) by Aurelien Meunier on 2021-06-22
- ▶️ Front-end state management with XState by Amy Pellegrini on 2021-06-09
- ▶️ Maquinas de estado finito y gráficas de estado en React by José L Narajo on 2021-03-19
- ▶️ Use State Machines to Build a Queue for Custom Twitch Overlays — Learn With Jason by Jason Lengstorf on 2021-02-26
- ▶️ Getting Started with XState, React, and Typescript | Part 1 by Modus Create on 2021-02-18
- ▶️ Modelling application behaviour with the XState library (in React) by Marc Klefter on 2021-02-11
- ▶️ Custom Svelte Store: XState as Svelte store by lihautan on 2021-02-10
- ▶️ XState Introduction on For Those Who Code on 2021-02-08
- ▶️ XState - Global state in React by Matt Pocock on 2021-02-04
- ▶️ Finite State Machine on Frontend by Eugenia Zigisova on 2021-01-20
- ▶️ Typing XState in Vue 3 by JacoboCode on 2021-01-18
- ▶️ Infinite Scrolling con Svelte, IntersectionObserver & XState (en español) by GCD Coder on 2021-01-13
- ▶️ Getting Started with XState in Vue 3 by JacoboCode on 2021-01-05
- ▶️ Usando XState y React para hacer peticiones HTTP (en español) by GCD Coder on 2020-12-29
- ▶️ Modeling a Voicemail Widget with XState by Constantin Druc on 2020-12-20
- ▶️ React Wednesdays: XState and JavaScript State Machines on 2020-12-09
- ▶️ Frontend is Rocket Science - How to use XState in Vue 3 Now! by Aleksej Dix on 2020-11-06
- ▶️ Finite State Machines in Vue 3 by Sarah Dayan on 2020-11-06
- ▶️ Tutorial of C++ Code Generator for XState State Machine engine by Andrew Shuvalov on 2020-10-30
- ▶️ XState and React on Leniolabs on 2020-10-08
- ▶️ XState and State Machines in VueJS by Constantin Druc on 2020-09-30
- ▶️ Reducing state complexity with XState by Kishore on 2020-09-21
- ▶️ Refactoring with XState - Part 1 by VigsCodes on 2020-09-06
- ▶️ State-driven Interfaces with XState on Mozilla Indonesia on 2020-08-30
- ▶️ Easy Introduction to XState in React | States, Transitions, Guards, and (Actions by Bhargav Ponnapalli on 2020-08-28
- ▶️ Virtual Lunch & Learn: Let’s build an app using Svelte, TypeScript, XState and Tailwind by Anders Bech Mellson on 2020-08-26
- ▶️ Mini Introducción a XState by Michell Ayala on 2020-08-14
- ▶️ Model Based Testing with XState | Why It’s Great | Part 1 by John Bales on 2020-08-11
- ▶️ Managing UI Complexity with Statecharts (playlist) on 2020-08-01
- ▶️ XState Pizza Wizard! by Jack Herrington on 2020-07-22
- ▶️ Declarative and manageable state management with XState by Daniel Lemay on 2020-07-22
- ▶️ Learning XState with Lauren on 2020-07-17
- ▶️ The Actor Model | XState part 1 by @bisvarup on 2020-07-15
- ▶️ Part 1: Tic-tac-toe - Let’s build (using JavaScript, React, Cypress and XState) by Dane Harnett on 2020-06-28
- ▶️ How to add an XState machine conf to a project by Diego Perez on 2020-06-26
- ▶️ Autocomplete, XState, and anything in between by Krzysztof Żuraw on 2020-06-24
- ▶️ Creating a
useAutoSave
Hook - Part 5: Using XState by Brooks Lybrand on 2020-05-08 - ▶️ Improving Application Predictability with XState by Sam Edwards on 2020-04-29
- ▶️ Webinar - Visualize Application State with XState in JavaScript by Dani Akash on 2020-04-02
- ▶️ Drag & Drop State Machine! Learning XState with David on the Keyframers on 2020-03-06
- ▶️ How to Build a simple React App with XState by Tim Ermilov on 2020-03-04
- ▶️ Authentication statechart in XState by Brooks Lybrand on 2020-02-07
- ▶️ Aplicaciones React usando XState by Luis César Contreras on 2020-01-21
- ▶️ Improving state representation by using XState in React by Jon Major Condon on 2019-10-03
- ▶️ Isaac && Zack Code Jam #2: State Machines and XState on 2019-10-03
- ▶️ XState and State Machines in Vue
- ▶️ Standing on the Shoulders of Giants. Development with XState by Brad Woods on 2019-09-11
- ▶️ Infinitely Better UIs with Finite Automata (React Rally) by David Khourshid on 2017-08-25
仓库
- Une UI dans tous ses états avec XState (A UI in all its states with XState) by Rodolphe Bung
- XState: Street Lights with Pedestrian Crossing using Vue.js by Kevin Warrington
- CodeSandbox - XState Login & Sign Up Forms by Jamie Mason
- Tic-Tac-Toe with Crank, XState, and TypeScript by @warger on 2020-04-17
- GitHub - Autocomplete example with XState by @krzysztofzuraw on 2020-04-06
- Github - XState with React and Angular in Nx Workspace by Chau Tran on 2020-03-08
- GitHub - XState Sample Kit by @rjdestigter on 2020-02-17
- GitLab - TDDing XState by Dan Bunea on 2020-02-13
- Tips and tricks of using XState for UI development by Farzad Yousefzadeh on 2020-01-24
- GitHub - Cypress Real-World App on 2020-01-07
- GitHub - a flipping cards game using XState by @lednhatkhanh on 2020-04-21
- GitHub - a Markdown Editor in Vue.js and XState by Sarah Dayan on 2020-02-15
- GitHub - A Pac Man game, built with React, TypeScript, MobX, styled-components, and XState by Stefan Wille on 2019-12-21
- GitHub - a small React, XState and Framer Motion demo by @tanem on 2019-09-29
- CodePen - XState Vue Login Page by Ryan Zola on 2019-07-19
- GitHub - Practical examples of statechart-based solutions with XState by @DevanB on 2019-09-07