Aprende a montar la base de un proyecto en React e integrar XState para manejar máquinas de estados. Es ideal si ya conoces React y quieres dar el salto a una arquitectura más predecible para tus flujos de UI.

¿Cómo crear el proyecto base con create-react-app?

El primer paso es levantar la estructura inicial con create-react-app. En el ejemplo, el proyecto se llama React State Machine, pero tú puedes ponerle el nombre que quieras.

Una vez termina la instalación, te mueves a la carpeta recién creada con cd react-state-machine y verificas que estén el README, la carpeta node_modules y el resto de archivos base [01:00].

bash npx create-react-app react-state-machine cd react-state-machine

¿Qué hace create-react-app? Genera un proyecto React listo para usar, con configuración de webpack, Babel y servidor de desarrollo, sin que tengas que configurar nada manualmente.

¿Cómo instalar XState y XState React en tu proyecto?

Con el proyecto creado, necesitas dos paquetes para trabajar con máquinas de estados dentro de React. El primero es el core de la librería y el segundo es la integración oficial con React, que expone hooks como useMachine [01:20].

bash npm install xstate npm install @xstate/react

Después de instalar, deja corriendo el servidor de desarrollo con npm start para ir viendo los cambios en tiempo real.

¿Dónde guardar la máquina de estados en la estructura del proyecto?

Dentro de la carpeta src, crea un nuevo folder llamado machines. Allí vas a crear el archivo booking-machine.js, que contiene la definición de tu máquina [02:00].

Lo interesante aquí es que puedes copiar literalmente el objeto que armaste en el visualizer de XState y pegarlo en el archivo. La definición es la misma; lo único que agregas es un export default bookingMachine al final para poder importarla desde otros archivos.

¿Cómo inicializar la máquina con el hook useMachine?

Para conectar la máquina con la interfaz, primero crea una carpeta components y dentro un archivo BaseLayout.js. Este componente, por ahora, solo retorna un div con un saludo simple para verificar que todo funciona [02:50].

Luego, en App.js, borras lo que no necesitas (el header, el logo y los estilos por defecto), importas BaseLayout desde la carpeta de componentes y lo llamas dentro del return.

jsx import BaseLayout from './components/BaseLayout';

function App() { return <BaseLayout />; }

export default App;

¿Qué retorna el hook useMachine de XState?

Dentro de BaseLayout, importas el hook useMachine desde @xstate/react y la bookingMachine desde la carpeta machines. Al ejecutar el hook obtienes un arreglo con dos elementos clave [03:40]:

• state: contiene toda la información de la máquina en ese momento, incluido el estado actual, el contexto y el historial.
• send: es la función que te permite disparar transiciones, es decir, enviar eventos a la máquina para cambiar de estado.

jsx import { useMachine } from '@xstate/react'; import bookingMachine from '../machines/booking-machine';

const BaseLayout = () => { const [state, send] = useMachine(bookingMachine); console.log('nuestra máquina', state);

return <div>Hola</div>; };

export default BaseLayout;

¿Para qué sirve el objeto state en XState? Te entrega el estado actual (en value), el contexto, la historia de transiciones, los eventos recibidos y la configuración. Es tu fuente única de verdad para renderizar la UI.

¿Cómo verificar que la máquina de estados quedó inicializada?

Al guardar y abrir el navegador, vas a ver el saludo Hola en la parte superior. Si abres el inspector y revisas la consola, encontrarás el log con el objeto completo de la máquina [04:30].

Dentro de ese objeto, fíjate en la propiedad value: ahí aparece el estado inicial, que en este caso se llama justamente initial. También verás propiedades como history, events, context y configuration, que te dan visibilidad total sobre el comportamiento de la máquina.

Con esto, tu máquina ya está conectada al ciclo de vida del componente y lista para reaccionar a transiciones. ¿Qué evento te gustaría enviar primero con send? Cuéntame en los comentarios.