Creación de Proyecto React con Máquina de Estados XState

Clase 5 de 15 • Curso de State Machines en React.js

Resumen

¿Cómo iniciar un proyecto con Create React App?

Empezar un proyecto en React es emocionante y sigue un proceso ordenado. Vamos a utilizar Create React App, una de las herramientas más conocidas para crear la base de un nuevo proyecto en React. Para comenzar, sigue estos pasos básicos:

Inicia tu proyecto con Create React App usando el comando:
```
npx create-react-app ReactStateMachine
```
Recuerda cambiar ReactStateMachine por el nombre que desees para tu proyecto.
Después de la instalación, debes moverte al directorio creado para comenzar a trabajar en él. Usa:
```
cd ReactStateMachine
```
Antes de continuar, para mantener el área de trabajo limpia, puedes utilizar:
```
clear
```

Ahora que ya tienes tu proyecto React configurado con Create React App, estás listo para el siguiente paso: instalar las dependencias necesarias.

¿Cómo configurar XState en React?

XState es una biblioteca potente para manejar máquinas de estados finitos que puedes integrar fácilmente en un proyecto de React. A continuación, te explicamos cómo hacerlo:

Primero, debes instalar XState mediante npm:
```
npm install xstate
```
Luego, instala el paquete de integración de XState con React:
```
npm install @xstate/react
```
Una vez instalados, inicia el servidor para comenzar a trabajar en el proyecto:
```
npm start
```

Al iniciar el servidor, asegúrate de que todo esté funcionando correctamente. Luego, podremos crear nuestra primera máquina de estados.

¿Cómo crear y configurar una máquina de estados en XState?

Para utilizar XState de manera efectiva, debes crear y configurar una máquina de estados. Aquí te guiamos en el proceso:

Abre tu proyecto en tu editor de texto favorito (por ejemplo, Visual Studio Code) y navega a la carpeta src.
Crea un nuevo directorio llamado Machines para organizar mejor el código de tus máquinas:
```
/src/Machines
```
Dentro de esta carpeta, crea un archivo BookingMachine.js. Este archivo almacenará el objeto de tu máquina de estados.

En BookingMachine.js, pega la configuración que diseñaste en XState Visualizer:

export default const bookingMachine = {
   id: 'booking',
   initial: 'initial',
   states: {
      initial: { /* configuration */ },
      // Otros estados aquí
   },
};

Esta configuración inicial de la máquina de estados establece su estructura y estados. Ahora, podemos proceder a utilizarla en nuestro componente.

¿Cómo integrar la máquina de estados en un componente React?

Integrar la máquina de estados con React implica usar hooks para gestionar su funcionamiento. Sigue estos pasos:

Crea una carpeta Components en la raíz de src y dentro de ella, un archivo BaseLayout.js:
```
/src/Components/BaseLayout.js
```

Define el componente BaseLayout y usa el hook useMachine de @xstate/react para inicializar la máquina:

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

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

  console.log(state);

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

export default BaseLayout;

No olvides importar tu componente BaseLayout en App.js:

import React from 'react';
import BaseLayout from './Components/BaseLayout';

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

export default App;

Al realizar estos pasos, habrás integrado exitosamente una máquina de estados en tu aplicación React. Al abrir la consola del navegador, podrás observar el estado inicial y sus transiciones en tiempo real. ¡Es solo el comienzo de cómo los estados pueden mejorar el control de flujo en tus aplicaciones!

Continúa explorando el poder de XState, y no dudes en experimentar integraciones y transiciones que podrás aprender en próximas lecciones. La práctica y la experimentación son claves para dominar cualquier tecnología. ¡Ánimo y sigue adelante!