Basic Satellite

What We Are Building

A satellite UI component that can be turned on and off.

Concepts

These are the XState concepts that will be covered in this lesson and required knowledge (if any).

Concepts Covered
  • Config
  • States
  • Initial State
  • Transitions

Modelling

These are the states, events and context (if any) the machine we will be building will have.

states
  • unpowered
  • powered
events
  • ON_BUTTON_CLICKED
  • OFF_BUTTON_CLICKED

Template

Follow along and build this component step by step using the template.

Steps

Code

Define the machine's state type. This defines the different states our machine can be in. Ignore the context property. It is out of the scope of this lesson.

  • types.ts
  • machine.ts
  • components.ts
  • index.ts
export type StateType =
| {
context: null;
value: "unpowered";
}
| {
context: null;
value: "powered";
};