Ressources

Vous trouverez ci-dessous une collection incomplète de nombreuses ressources pour apprendre et appliquer XState dans des applications du monde réel. Découvrez la collection Awesome XState (opens new window) sur GitHub pour encore plus de ressources !

- Ressource d'un membre de la communauté Stately

Cours

Cours officiel

Regardez le cours officiel State Machines in JavaScript with XState (opens new window) par @davidkpiano (opens new window) sur Frontend Masters ! Dans ce cours, vous apprendrez les bases des machines d'état et des diagrammes d'état, de la création de votre propre sans aucune bibliothèque en JavaScript pur, jusqu'à l'utilisation de XState pour tirer parti d'une grande variété de fonctionnalités.

Les exemples de code de l'atelier sont open-source et disponibles sur GitHub (opens new window).

Il existe également un cours de suivi : State Modeling with React and XState (opens new window). Une fois que vous avez suivi le premier cours, assurez-vous de suivre celui-ci également afin d'apprendre à appliquer des machines d'état et des diagrammes d'états aux applications du monde réel et à maîtriser des concepts avancés tels que la génération/appel d'acteurs et les tests basés sur des modèles.

Catalogue

Explorez une collection de machines d'état et de diagrammes d'état conçus par des professionnels dans le Catalogue XState (opens new window). Vous pouvez copier-coller ces machines directement dans vos projets, ainsi que les visualiser directement dans le catalogue.

Autres excellents cours et guides :

• Egghead - Introduction to State Machines Using XState (opens new window) par Kyle Shevlin (opens new window)
  • GitHub - Course Notes (opens new window)
  • GitHub - Workshop (opens new window)
• Egghead - Construct Sturdy UIs with XState (opens new window) par Isaac Mann (opens new window)
• XState Guide (opens new window) par Brad Woods (opens new window)
• DevTrends: XState (opens new window) par Anthony Gore (opens new window)

Podcasts

• Q&A on XState, Getting Comfortable with JavaScript, Managing WordPress Sites, and Background Images in CSS (opens new window) le 04/10/2021
• 🎙 (Modern Web) S07E20: Building State Machines using XState with David Khourshid (opens new window) le 20/01/2021
  • ▶️ Video (opens new window)
• 🎙 (React Podcast) 83: David Khourshid on XState, Statecharts, and the Future of Designer—Coder Collaboration (opens new window) le 27/02/2020
• 🎙 (Syntax.FM) 206: State Machines, CSS and Animations with David K Piano (opens new window) le 18/12/2019
• 🎙 (Egghead.io Podcast) 11: Introduction To State Machines And XState With Kyle Shevlin (opens new window) le 17/12/2019
• 🎙 (Full Stack Radio) 130: David Khourshid - Building Better UI Components with State Machines (opens new window) le 11/12/2019
• 🎙 (Chats with Kent) Make Your Apps Resilient Using Finite State Machines With David Khourshid (opens new window) le 05/08/2019
• 🎙 (React Round-Up) 069: The State Machines in React with David Khourshid (opens new window) le 09/07/2019
• 🎙 (ShopTalk Show) 327: Working with State Machines with Jon Bellah and David Khourshid (opens new window) le 03/09/2018
• 🎙 (React Podcast) 5: Finite State Machines with David Khourshid (opens new window) le 03/04/2018

Articles

• Using State Machines in Front-End Development (opens new window) par Danielle Richter (opens new window) 27/10/2021
• Quick post: Modeling a video player with XState (opens new window) par Matías Hernández Arellano (opens new window) le 25/10/2021
• Getting Started with XState, React and Typescript (Part 2) (opens new window) par Santiago Kent (opens new window) le 18/10/2021
• Untangling your Logic using State Machines (opens new window) par Roberto Ruiz (opens new window) le 07/10/2021
• The power of XState (opens new window) par Yanir Manor (opens new window) le 04/10/2021
• Building an acquisition Funnel in React with Xstate - Part 1 (opens new window) par Jb Rocher (opens new window)
• XState - Expero Night (opens new window) par Iván Trujillo
• Orchestrating Serverless from Serverless (opens new window) par Kjartan Rekdal Müller (opens new window) le 20/09/2021
• How to model application flows in React with finite state machines and XState (opens new window) par Andrew McDowell (opens new window) le 23/07/2021
• Testing XState machines in your React Native app (opens new window) par Simone D'Avico (opens new window) le 15/07/2021
• Using XState with Deno (opens new window) par Bruno Quaresma (opens new window) le 24/06/2021
• Use an XState Machine with React (opens new window) par Josh Branchaud (opens new window) le 09/05/2021
• XState: Should this be an action, or a service? (opens new window) par Matt Pocock (opens new window) le 30/04/2021
• State Machines: Should this be a state, or in context? (opens new window) par Matt Pocock (opens new window) le 29/04/2021
• XState: What's the difference between Machine and createMachine? (opens new window) par Matt Pocock (opens new window) le 28/04/2021
• How to Use Finite State Machines in React (opens new window) par Leonardo Maldonado (opens new window) le 17/03/2021
• Frontend is Rocket Science – Managing state in any JavaScript Application (opens new window) par Aleksej Dix (opens new window) le 26/02/2021
• Boost your React application's performance by XState (opens new window) par Alireza Valizade (opens new window) le 24/02/2021
• Rsvp to weddings with XState (opens new window) par Andrew Peterson (opens new window) le 19/02/2021
• An Introduction to XState in TypeScript (opens new window) par Neeraj Khosla (opens new window) le 04/02/2021
• An Introduction to Finite State Machines: Simplifying React State Management with State Machines (opens new window) par Bradley Kofi (opens new window) le 02/02/2021
• Integrate XState with React Native and React Navigation (opens new window) par Simone D'Avico (opens new window) le 02/02/2021
• Infinite Scrolling with Svelte 3, XState and IntersectionObserver (opens new window) par Gustavo Castillo (opens new window) le 01/02/2021
• Untangle complex flows in your React Native app with XState (opens new window) par Simone D'Avico (opens new window) le 14/01/2021
• "Just Use Props": An opinionated guide to React and XState (opens new window) par Matt Pocock (opens new window) le 11/01/2021
• Creating State Machines in JavaScript with XState (opens new window) par Dor Nisim (opens new window) le 10/01/2021
• Future of state management in React with XState (opens new window) par Jakub Skoneczny (opens new window) le 05/01/2021
• Learning XState by refactoring an old project (opens new window) par Florens Verschelde (opens new window) le 01/01/2021
• React context without context, using XState – CodeWithSwiz 14, 15 (opens new window) par @swizec (opens new window) le 10/11/2020
• State Machines Workshop with XState (opens new window) par Ademola (@ooade) (opens new window) le 06/11/2020
• Tes en Línea: React, TypeScript, XState, fp-ts & CSS Grid (esp) (opens new window) par Edgar Rodriguez (opens new window) le 29/10/2020
• How to write tests for XState (opens new window) par @swizec (opens new window) on 2020-10-13
• Create-React-App Template with XState (opens new window) par Kacper Wdowik (opens new window) le 18/10/2020
• XState Brain Teaser #1 - Auth Flow (opens new window) par Matt Pocock (opens new window) le 09/10/2020
• Refactoring a useReducer to XState, Part 1 (opens new window) par @swizec (opens new window) le 08/10/2020
• How State Machines Saved Our Bacon 🥓 (opens new window) par Ian Jones (opens new window) le 01/10/2020 (approximatif)
• Finite State Machines in React JS using XState JS (opens new window) par Sooraj (opens new window) le 23/09/2020
  • CodeSandbox example (opens new window)
• My First Machine, Getting Started with XState and Angular (opens new window) par Caleb Ukle (opens new window) le 11/09/2020
• State Machines For Everyone (opens new window) par Alex Dodge (opens new window) le 08/09/2020
• State machines in Production (opens new window) par Ivan Kovic (opens new window) le 02/09/2020
• Testing XState with React Testing Library (opens new window) par Joe Purnell (opens new window) le 27/08/2020
• When your brain is breaking, try XState (opens new window) par @swizec (opens new window) le 10/08/2020
• Todo App with XState and Vue composition API (opens new window) par Jasmin Virdi (opens new window) le 03/08/2020
• Firebase authentication with XState and Svelte (opens new window) par @codechips (opens new window) le 31/07/2020
• SWR-Style Fetching with XState State Machines (opens new window) par Daniel Imfeld (opens new window) le 21/07/2020
• Hello XState Part 3: Writing my first state machines (and washing my hands) (opens new window) par Eka (opens new window) le 21/07/2020
• Intro: XState and State Machines (React) (opens new window) par Dimitar Danailov (opens new window) le 17/07/2020
• XState, React, and TypeScript - how to get it working (opens new window) par Matt Pocock (opens new window) le 17/07/2020
• Slides - Working with State Machines in Angular (opens new window) avec XState par Stefanos Lignos (opens new window) le 20/07/2020
• Hello XState Part 2: Exploring the XState Viz example (opens new window) par Eka (opens new window) le 13/07/2020
  • GitHub - code (opens new window)
• Hello XState Part 1: Learning state machines for frontend web development (opens new window) par Eka (opens new window) le 12/07/2020
• Comparing state machines: XState vs. Robot (opens new window) par Samaila Bala (opens new window) le 09/07/2020
• Starting with State Machines and XState! (opens new window) par Jasmin Virdi (opens new window) le 06/07/2020
• Learn and Apply XState with Vonage Video (opens new window) par Kelly Andrews (opens new window) le 01/07/2020
  • Article on Nexmo.com (opens new window)
• Introduction to XState (opens new window) par Flavio Copes (opens new window) le 26/06/2020
• Multistep form handling with Finite State Machines, Formik and TypeScript (opens new window) par Daniel Grychtoł le 17/06/2020
• Intro to XState - a true state management library for React (opens new window) par Pavlo Lompas (opens new window) le 15/06/2020
• Remake of the 100 squares game (opens new window) par @nikpundik (opens new window) le 05/06/2020
  • Tweet with demo (opens new window)
• ThoughtWorks - XState in the Technology Radar for Languages & Frameworks (opens new window) le 19/05/2020
• A front-end journey into XState (opens new window) par Robert Higdon (opens new window) le 15/05/2020
• GitHub - Stripe Machine Example (opens new window): An animated stripe checkout using XState and React by @JacobParis (opens new window) le 08/05/2020
• XState and Svelte: initial setup (opens new window) par @rveciana (opens new window) le 08/05/2020
• How To Build Finite State Machines using XState and React (opens new window) par Ibrahima Ndaw (opens new window) le 21/04/2020
  • Post on Dev.to (opens new window)
• XState Minesweeper (opens new window) par @lednhatkhanh (opens new window) le 16/04/2020
  • Playable demo (opens new window)
• XState Chart Traffic Lights (opens new window) par @howardmann (opens new window) le 16/04/2020
  • Demo link (opens new window)
  • XState visualization (opens new window)
• A simple calculator using React and XState (statecharts) (opens new window) par diegoperezm (opens new window) le 15/04/2020
• Modeling parallel states in XState (opens new window) par Jacob Paris (opens new window) le 05/04/2020
  • XState Text Formatting Part 2 (opens new window)
• Guidelines for State Machines and XState (opens new window) par Kyle Shevlin (opens new window) le 03/04/2020
• An Introduction to State Machines using XState (opens new window) par Mat Warger (opens new window) le 30/03/2020
  • GitHub Demo (opens new window)
• React Single File Components with XState (opens new window) par Robert (opens new window) le 29/03/2020
• State-driven interfaces with XState (opens new window) par Brad Woods (opens new window) le 23/03/2020
• Undo/Redo in React Using XState (opens new window) par Robert (opens new window) le 22/03/2020
  • CodeSandbox demo (opens new window)
• Working with non-user asynchronous events in model based tests with XState (opens new window) par John de Stigter (opens new window) le 18/03/2020
• Supervising XState Machines with Redux (opens new window) par John de Stigter (opens new window) le 16/03/2020
• Model based UI tests with XState, Cypress, Puppeteer & more (opens new window) par John de Stigter (opens new window) le 12/03/2020
• Thoughts on State Management with XState and ReactJS (opens new window) par John de Stigter (opens new window) le 08/03/2020
• XState: The new opportunity for web development (opens new window) par @mschulte (opens new window) le 05/03/2020
• Communicating with spawned and invoked XState actors in React (opens new window) par Ismayil Khayredinov le 02/02/2020
• Replacing Vuex with XState (opens new window) par Felix Guerin (opens new window) le 28/01/2020
• XState 状态管理 (opens new window) par 陈三 le 31/12/2019
• XState 新手教學 - Finite State Machine (opens new window) par Jerry Hong le 08/12/2019
• How to Effortlessly Model Async (React) with XState's Invoke (opens new window) par Matthew Jones le 30/10/2019
• Getting Started with XState (opens new window) par Viet Nguyen le 09/10/2019
• A series of examples showing how to model application state with statechart using xstate (opens new window) par @coodoo (opens new window) le 27/09/2019
• Finite State Machines in React JS using XState (opens new window) par Sooraj Nair (opens new window) LE 22/08/2019
• Hyperapp demo with XState (opens new window) par @johnkazer (opens new window) LE 23/07/2019
• My love letter to XState and statecharts ♥ (opens new window) par Tim Deschryver le 08/07/2019
• Creating a Complex IVR System with Ease with XState (opens new window) par Yonatan Mevorach le 20/06/2019
• StackOverflow: What is an actual difference between redux and a state machine (e.g. xstate)? (opens new window) par David Khourshid (opens new window) le 04/02/2019
• XState - a TypeScript state machine with a lot of features (opens new window) par Frank Quednau le 30/01/2019
• Vuex + XState (opens new window) par Brock Reece (opens new window) le 17/09/2017

Videos

• ▶️ Design a polling state machine with XState (opens new window) par Josh Branchaud (opens new window)
• ▶️ You're a Wizard Form, Harry (Infobip Shift) (opens new window) par Erik Rasmussen (opens new window) le 08/09/2021
• ▶️ Making Application Logic Visually Collaborative (Infobip Shift) (opens new window) par David Khourshid (opens new window) le 07/09/2021
• ▶️ The Actor Model: a new mental model for React (React Finland) (opens new window) par Farzad Yousefzadeh (opens new window) le 01/09/2021
• ▶️ Make legacy code delightful with statecharts (React Finland) (opens new window) par Matt Pocock (opens new window) le 01/09/2021
• ▶️ Introducing state machines and statecharts (React Finland) (opens new window) par Laura Kalbag (opens new window) le 01/09/2021
• ▶️ The State of XState (React Finland) (opens new window) le 30/08/2021 par David Khourshid (opens new window)
• ▶️ Splitting the view and the brains in JS — state machines with XState (in French) (opens new window) par Aurelien Meunier (opens new window) le 22/06/2021
• ▶️ Front-end state management with XState (opens new window) par Amy Pellegrini (opens new window) le 09/06/2021
• ▶️ Maquinas de estado finito y gráficas de estado en React (opens new window) par José L Narajo le 19/03/2021
• ▶️ Use State Machines to Build a Queue for Custom Twitch Overlays — Learn With Jason (opens new window) par Jason Lengstorf (opens new window) le 26/02/2021
• ▶️ Getting Started with XState, React, and Typescript | Part 1 (opens new window) par Modus Create (opens new window) le 18/02/2021
• ▶️ Modelling application behaviour with the XState library (in React) (opens new window) par Marc Klefter (opens new window) le 11/02/2021
• ▶️ Custom Svelte Store: XState as Svelte store (opens new window) par lihautan (opens new window) le 10/02/2021
• ▶️ XState Introduction (opens new window) on For Those Who Code (opens new window) le 08/02/2021
• ▶️ XState - Global state in React (opens new window) par Matt Pocock (opens new window) le 04/02/2021
• ▶️ Finite State Machine on Frontend (opens new window) par Eugenia Zigisova (opens new window) le 20/01/2021
• ▶️ Typing XState in Vue 3 (opens new window) par JacoboCode (opens new window) le 18/01/2021
• ▶️ Infinite Scrolling con Svelte, IntersectionObserver & XState (en español) (opens new window) par GCD Coder (opens new window) le 13/01/2021
• ▶️ Getting Started with XState in Vue 3 (opens new window) par JacoboCode (opens new window) le 05/01/2021
• ▶️ Usando XState y React para hacer peticiones HTTP (en español) (opens new window) par GCD Coder (opens new window) le 29/12/2020
• ▶️ Modeling a Voicemail Widget with XState (opens new window) par Constantin Druc (opens new window) le 20/12/2020
• ▶️ React Wednesdays: XState and JavaScript State Machines (opens new window) le 09/12/2020
• ▶️ Frontend is Rocket Science - How to use XState in Vue 3 Now! (opens new window) par Aleksej Dix (opens new window) le 06/11/2020
• ▶️ Finite State Machines in Vue 3 (opens new window) par Sarah Dayan (opens new window) le 06/11/2020
• ▶️ Tutorial of C++ Code Generator for XState State Machine engine (opens new window) par Andrew Shuvalov (opens new window) le 30/10/2020
  • ▶️ Part 2 (opens new window)
  • ▶️ Part 3 (opens new window)
  • GitHub Project (opens new window)
• ▶️ XState and React (opens new window) on Leniolabs (opens new window) le 08/10/2020
• ▶️ XState and State Machines in VueJS (opens new window) par Constantin Druc (opens new window) le 30/09/2020
• ▶️ Reducing state complexity with XState (opens new window) par Kishore le 21/09/2020
• ▶️ Refactoring with XState - Part 1 (opens new window) par VigsCodes (opens new window) le 06/09/2020
• ▶️ State-driven Interfaces with XState (opens new window) on Mozilla Indonesia (opens new window) le 30/08/2020
• ▶️ Easy Introduction to XState in React | States, Transitions, Guards, and (Actions (opens new window) par Bhargav Ponnapalli (opens new window) le 28/08/2020
• ▶️ Virtual Lunch & Learn: Let's build an app using Svelte, TypeScript, XState and Tailwind (opens new window) par Anders Bech Mellson le 26/08/2020
• ▶️ Mini Introducción a XState (opens new window) par Michell Ayala (opens new window) 14/08/2020
  • ▶️ React + XState (opens new window)
• ▶️ Model Based Testing with XState | Why It's Great | Part 1 (opens new window) par John Bales (opens new window) le 11/08/2020
  • ▶️ Model Based Testing with XState | The Basics | Part 2 (opens new window)
  • ▶️ Model Based Testing with XState | Path Generation with Context | Part 3 (opens new window)
• ▶️ Managing UI Complexity with Statecharts (playlist) (opens new window) le 01/08/2020
• ▶️ XState Pizza Wizard! (opens new window) par Jack Herrington (opens new window) le 22/07/2020
• ▶️ Declarative and manageable state management with XState (opens new window) par Daniel Lemay (opens new window) le 22/07/2020
• ▶️ Learning XState with Lauren (opens new window) le 17/07/2020
• ▶️ The Actor Model | XState part 1 (opens new window) par @bisvarup (opens new window) le 15/07/2020
  • CodeSandbox example (opens new window)
• ▶️ Part 1: Tic-tac-toe - Let's build (using JavaScript, React, Cypress and XState) (opens new window) par Dane Harnett le 28/06/2020
  • ▶️ Part 2 (opens new window)
  • ▶️ Part 3 (opens new window)
• ▶️ How to add an XState machine conf to a project (opens new window) par Diego Perez (opens new window) le 26/06/2020
• ▶️ Autocomplete, XState, and anything in between (opens new window) par Krzysztof Żuraw (opens new window) le 24/06/2020
• ▶️ Creating a useAutoSave Hook - Part 5: Using XState (opens new window) par Brooks Lybrand (opens new window) le 08/05/2020
  • CodeSandbox (opens new window)
• ▶️ Improving Application Predictability with XState (opens new window) par Sam Edwards (opens new window) le 29/04/2020
• ▶️ Webinar - Visualize Application State with XState in JavaScript (opens new window) par Dani Akash le 02/04/2020
• ▶️ Drag & Drop State Machine! Learning XState with David (opens new window) on the Keyframers (opens new window) le 06/03/2020
  • GitHub - Code (opens new window)
• ▶️ How to Build a simple React App with XState (opens new window) par Tim Ermilov le 04/03/2020
• ▶️ Authentication statechart in XState (opens new window) par Brooks Lybrand (opens new window) le 07/02/2020
• ▶️ Aplicaciones React usando XState (opens new window) by Luis César Contreras le 21/01/2020
• ▶️ Improving state representation by using XState in React (opens new window) par Jon Major Condon (opens new window) le 03/10/2019
• ▶️ Isaac && Zack Code Jam #2: State Machines and XState (opens new window) le 03/10/2019
  • ▶️ Part 3 (opens new window)
• ▶️ XState and State Machines in Vue (opens new window)
• ▶️ Standing on the Shoulders of Giants. Development with XState (opens new window) par Brad Woods le 11/09/2019
  • Slides and more (opens new window)
• ▶️ Infinitely Better UIs with Finite Automata (React Rally) (opens new window) par David Khourshid (opens new window) le 25/08/2017

Repositories

• Une UI dans tous ses états avec XState (A UI in all its states with XState) (opens new window) par Rodolphe Bung (opens new window)
• XState: Street Lights with Pedestrian Crossing using Vue.js (opens new window) par Kevin Warrington (opens new window)
• CodeSandbox - XState Login & Sign Up Forms (opens new window) par Jamie Mason (opens new window)
• GitHub - a flipping cards game using XState (opens new window) par @lednhatkhanh (opens new window) le 21/04/2020
• Tic-Tac-Toe with Crank, XState, and TypeScript (opens new window) par @warger (opens new window) le 17/04/2020
• GitHub - Autocomplete example with XState (opens new window) par @krzysztofzuraw (opens new window) le 06/04/2020
• Github - XState with React and Angular in Nx Workspace (opens new window) par Chau Tran (opens new window) le 08/03/2020
• GitHub - XState Sample Kit (opens new window) par @rjdestigter (opens new window) le 17/02/2020
  • Playable demo (opens new window)
• GitHub - a Markdown Editor in Vue.js and XState (opens new window) par Sarah Dayan (opens new window) le 15/02/2020
  • Live Demo (opens new window)
• GitLab - TDDing XState (opens new window) par Dan Bunea le 13/02/2020
• Tips and tricks of using XState for UI development (opens new window) par Farzad Yousefzadeh (opens new window) le 24/01/2020
  • Link: XState.Tips (opens new window)
• GitHub - Cypress Real-World App (opens new window) le 07/01/2020
• GitHub - A Pac Man game, built with React, TypeScript, MobX, styled-components, and XState (opens new window) par Stefan Wille (opens new window) le 21/12/2019
  • Playable demo (opens new window)
• GitHub - a small React, XState and Framer Motion demo (opens new window) par @tanem (opens new window) le 29/09/2019
• GitHub - Practical examples of statechart-based solutions with XState (opens new window) par @DevanB (opens new window) le 07/09/2019
• CodePen - XState Vue Login Page (opens new window) par Ryan Zola (opens new window) le 19/07/2019