Construct Sturdy UIs with XState
Instructor
Isaac Mann- XState
>=4.6.7
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
Prerequisites
Learner Reviews
- fernando pineda4 years agoHow will you use what you learned from this collection?
To manage my states in big applications
- EdmundsEcho4 years agoHow 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 Pan4 years agoWhat 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.
- Colin4 years agoWhat 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 Bacallado4 years agoWhat 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 Schwarz4 years agoWhat 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
You might also like these resources:
Introduction to Cloudflare Workers
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.
Create an eCommerce Store with Next.js and Stripe Checkout
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
Practical Git for Everyday Professional Use
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.