Learn State Machines

Finite state machines and statecharts help developers build more predictable interfaces by providing sequential, easily-modeled logic. In this course, you'll learn how to make use of state machines in your JavaScript applications.

Heads up! This course is a bit dated right now, but don't worry! A new version has been written and will be recorded following the release of XState v5. Upgrades to Learn State Machines v2 will be free for anyone who has already purchased the course.

What you will learn

  • What are state machines and statecharts?
  • How can I leverage statecharts to build complex, modern web applications?
  • What do statecharts give me that other state management tools do not?
  • How can I approach refactoring my applications to use statecharts?
  • How do I test statecharts?

About this course

In this course, we take an application called Photobook from mockup to working application.

The app has many of the features that you would expect to find in apps today: authentication, data fetching, CRUD actions, automated tests, and more. Using xstate and react-automata, you will cover all of the important features of statecharts: parallel states, hierarchical states, history states, and guards.

The goal of this course is to take intermediate to advanced JavaScript developers, particularly those interested in React, and give you the knowledge and tools to start using state machines and statecharts to build more predictable applications.

I believe this course will be particularly useful to developers who are:

  • Frustrated by the difficulty of maintaining complex state in your applications
  • Front-end JavaScript developers looking to level-up
  • Backend developers interested in front-end state management
  • JavaScript developers looking to advance their careers

Course content

  • Getting setup
    05:43
  • Setting up Firebase
    02:20
  • xstate and react-automata
    03:25
  • State machines and statecharts
    05:39
  • Hierarchical machines
    06:06
  • Parallel machines
    03:16
  • Transitions
    06:41
  • Actions and guards
    03:50
  • History states
    03:24
  • Collaborating with designers
    03:52
  • Breaking down designs
    06:59
  • Global authentication states
    07:27
  • User registration
    10:07
  • User login
    06:48
  • Fetching data
    07:20
  • Pagination
    05:03
  • Writing data
    04:23
  • Animation
    03:22
  • Testing statecharts
    04:43