Declarar la maquina de estados

npx create-react-app react-state-machines
npm install xstate @xstate/react
.
src/Machines/bookingMachine.js:

import { createMachine } from 'xstate';

const bookingMachine = createMachine({
  id: 'buy plane tickets',
  initial: 'initial',
  states: {
    initial: {
      on: {
        START: 'search'
      }
    },
    search: {
      on: {
        CONTIUNE: 'passengers',
        CANCEL: 'initial'
      }
    },
    passengers: {
      on: {
        DONE: 'tickets',
        CANCEL: 'initial'
      }
    },
    tickets: {
      on: {
        FINISH: 'initial'
      }
    },
  }
})

export default bookingMachine

src/Components/BaseLayout.js:

import React from 'react';
import { useMachine } from '@xstate/react';
import bookingMachine from '../Machines/bookingMachine';

export const BaseLayout = ()=> {
    const [state,send] = useMachine(bookingMachine)

    console.log('machine', state)
    return (
        <div>State Machine</div>
    )
}

src/App.js:

import { BaseLayout } from './Components/BaseLayout';
import './App.css';

function App() {
  return (
    <div className="App">
        <BaseLayout />
    </div>
  );
}

export default App;

les recomiendo que copien el código manualmente en vez de copiar y pegar, ya que es todo nuevo sería mejor familiarizarnos con la sintaxis y aprender el orden de cada cosa. Ya cuando estemos hartos de hacer tantas máquinas de estados haremos Ctrl + V xD

Te convendría saber como funciona una maquina de vapor.

Declarar la maquina de estados

Para comenzar debemos inicializar nuestro proyecto en React.

Luego, vamos a usar el siguiente comando para instalar XState:

npm install xstate @xstate/react

Ahora por convención vanos a crear una nueva carpeta que se va a llamar machines, y dentro crearemos un un archivo llamado bookingMachine.js que será una serie de pasos senciila de la lógica de nuestra aplicación:

import { createMachine } from 'xstate';

const bookingMachine = createMachine({
  id: 'buy plane tickets',
  initial: 'initial',
  states: {
    initial: {
      on: {
        START: 'search'
      }
    },
    search: {
      on: {
        CONTIUNE: 'passengers',
        CANCEL: 'initial'
      }
    },
    passengers: {
      on: {
        DONE: 'tickets',
        CANCEL: 'initial'
      }
    },
    tickets: {
      on: {
        FINISH: 'initial'
      }
    },
  }
})

export default bookingMachine;

Ahora vamos a crear una nueva carpeta llamada components, y dentro crearemos un archivo BaseLayout.jsx.

/* Vamos a hacer import del hooks que necesitamos para inicializar 
la máquina "useMachine" y nuestro bookingMachine */
import { useMachine } from "@xstate/react";
import bookingMachine from "../machines/bookingMachine";

export const BaseLayout = () => {
  // Ahora vamos a inicializar la máquina de la siguiente manera:
  /* Vamoa a destructurar dos cosas del useMachine, la primera es el 
  "state", que nos dá toda la infromación de la máquina en ese 
  momento, y el send me permite transicionar entre distintos pasos,
  para esto, debe recibir la declaración de los estados entre 
  parentesis */
  const [state,send] = useMachine(bookingMachine);

  /* Si vemos en nuestra consola veremos nuestrab máquina de estado 
  inicializada, si vemos en value, si valor será el estado inicial, 
  el cual es "initial", junto con mucha más información */
  console.log('Nuestra máquina', state);

  return (
    <div>Hola :3</div>
  )
}

Ahora solo importamos el componente en App.jsx:

import BaseLayout from './components/BaseLayout';
import './App.css'

function App() {

  return (
    <div className="App">
      <BaseLayout />
    </div>
  )
}

export default App;

Y listo, así de fácil hemos inicializado nuestra máquina de estado 😄.

Si usas yarn:

yarn create react-app my-app

npm me parece super lento.

Este es el procedimiento si vas a trabajar con React + TypeScript + Vite:

• Primer paso: npm create vite@latest
• Escoger React y typescript
• Ingresar a la carpeta y usar el comando: npm i
• (Opcional) Luego utilizar el comando git init para usar git en nuestro proyecto.
• Ahora instalamos paquetes de xstate: npm i xstate @xstate/react
• A codear!

npm i xstate @xstate/react

EMPECE MI PROYECTO CON STATE MACHINE

Es un proyecto de películas, aún en proceso, solo está disponible la vista mobile. Utilicé la máquina de estado para el nav.
https://my-movies-in-react.vercel.app/