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

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.

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/

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