Examples structure

The course is organized in modules, each implementing a real-world use case. While working on real requirements, we will gradually introduce new concepts and features of XState.

The modules start from simple examples and gradually move to more complex ones.

Most directories inside the course repository contains the same examples implemented using useState, useReducer, and XState.

useReducer examples will help to bridge the gap between useState and XState actors.

Don't worry if you never used useReducer before. We will introduce it in the course, show the differences with useState, and then refactor the same examples with XState.

The examples all come from real-world use cases. Each module starts from useState and useReducer.

I will assume that you are somehow familiar with useState and useReducer hooks. The course will not cover them in detail, but we will use them as a reference to understand how XState works.

We will then highlight the problems and refactor the same examples with XState.

At each step I will highlight the code that can be reused and the main differences in the mental model of XState compared to useState and useReducer.

At the end of each module we will compare the various implementations and highlight the benefits of XState.

We will follow this structure with useState first, then useReducer, and finally XState for the first few modules.

For later modules we will jump directly with XState, since the useState and useReducer implementations would become too complex and distract from the main concepts of XState.