illustration for Construct Sturdy UIs with XState

Construct Sturdy UIs with XState

Instructor

Isaac Mann
39m closed-captioning
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.5
556
people completed
Bookmark
Download
RSS

Our applications have lots of states that they can be in.

We usually remember “Loading” and “Successful”. If we’re having a particularly good day, we’ll get “Error” handled as well.

But what about other states that our application can be in?

Things like “Haven’t requested yet” or “The request was successful but there isn’t any data for us to show”.

It’s frustrating to think you’re “done” and then an edge case shows up (and this cycle repeats at least one more time).

Fed up with forgetting to handle the edge cases that appear when developing UIs, Isaac Mann started looking for a solution.

The answer? State machines.

In this course, Isaac will teach you how to plan and visualize your application’s states and the transitions between them through the creation of a React & XState powered Star Wars quiz app.

Credits

Maxime Bourgeois (illustration)

Listen to Isaac Mann tell you about this course:

What you'll learn

  • Handling HTTP request state
  • Blocking state transitions with guards
  • Parallel state transitions
  • Communicating between state machines in different components with the Actor Model
  • Saving previous state history

Learner Reviews

  • Learner
    7 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    How will you use what you learned from this collection?

    To manage my states in big applications

  • EdmundsEcho
    8 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    How will you use what you learned from this course?

    Good introduction. But that is all I can say about it. For instance, I wish there was more information about how xstate-context and component states work together to limit/control rendering. I wish there were more on how to execute custom actions. I hope this helps. - E

  • Eric Pan
    10 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What would make this course a 7 for you?

    There is so much amazing and (hard to find!) critical information here on how to integrate XState with an actual React app and how to handle network requests and responses and update the UI. For some reason I found the videos to be a little too quick for me so I found myself rewinding and pausing a lot. Both to look at the code (and in the code section) and to think about what was said. Thanks for making this.

  • Colin
    11 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Isaac shows practical examples of how to utilise XState in an app with an easy to understand demo. He then progressively enhances the app with a clear demonstration which focuses on each of the XState features.

  • Ivan Bacallado
    a year ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What would make this course a 7 for you?

    Thanks Isaac.

    I liked the course, but I would appreciate to have started from zero when you explained the matching, due most of the code was there and you just did some changes to make it work.

    The fetch machine and the force machine were very well explained.

  • Steve Schwarz
    a year ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Covers a lot in an easy to follow manner! A future topic might be how/when context should be used for state mgmt vs redux/vuex. I just read xstate 4.x has interpreters - help on when to use that would also be valuable.

Course Content

39m • 8 lessons

    You might also like these resources:

    illustration for Introduction to Cloudflare Workers

    Introduction to Cloudflare Workers

    Kristian Freeman・36m・Course

    Become familiar with the Workers CLI wrangler that we will use to bootstrap our Worker project. From there you'll understand how a Worker receives and returns requests/Responses. We will also build this serverless function locally for development and deploy it to a custom domain.

    illustration for Create an eCommerce Store with Next.js and Stripe Checkout

    Create an eCommerce Store with Next.js and Stripe Checkout

    Colby Fayock・1h 4m・Course

    This is a practical project based look at building a working e-commerce store using modern tools and APIs. Excellent for a weekend side-project for your developer project portfolio

    illustration for Practical Git for Everyday Professional Use

    Practical Git for Everyday Professional Use

    Trevor Miller・1h・Course

    git is a critical component in the modern web developers tool box. This course is a solid introduction and goes beyond the basics with some more advanced git commands you are sure to find useful.