Basic Satellite

What We Are Making

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

Concepts

Concepts Covered
  • States
  • Initial State
  • Transitions

Modelling

states
  • unpowered
  • powered
events
  • ON_BUTTON_CLICKED
  • OFF_BUTTON_CLICKED

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";
};