State Modeling in React with XState

4 hours CC
State Modeling in React with XState

Course Description

XState helps you manage both local and global component states in React. In this course, we'll be learning to model state before we code using state machines and statecharts and then use those in our app to orchestrate complex app logic. We'll also be visualizing or machines in real-time and learning to use model-based testing.

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: December 29, 2020

Learning Paths

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 8 minutes

State Machines

Section Duration: 40 minutes

XState Machines

Section Duration: 50 minutes

Transitions

Section Duration: 31 minutes

State Types

Section Duration: 25 minutes

Actors

Section Duration: 1 hour, 2 minutes

Wrapping Up

Section Duration: 20 minutes
  • Wrapping Up
    David concludes the course by sharing some examples of XState being used with other frameworks and answering some questions. The questions were about the future of XState with TypeScript, the use of state machine with a GUI, and best practices when coding a state machine.
I recently learned State machines and state modelling in react using XState on frontend masters by David Khourshid. This was really good. Very well presented! Their VS Code extension is also amazing.
Adnan Sheikh

Adnan Sheikh

ImAdnanSheikh

State Machine made easy in ReactJS with XState React Hooks => And better yet! A course delivered by David Khourshid, the creator of XState... What else! ๐Ÿ˜๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป
Dave Carter

Dave Carter

d4vecarter

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now