Repositorio semilla: aplicación React + RTK + MUI 🌱

ℹ️ Este proyecto fue creado con Create React App, y por lo tanto toda la documentación del sitio oficial también puede consultarse para saber más.

¡Bienvenida/o! En este repositorio encontrarás una plantilla (de las infinitas posibles) para crear una aplicación web con React. Las principales tecnologías que utilizamos son:

• React: framework para construir interfaces de usuario.
• Redux Toolkit (RTK): biblioteca para manejar estado en React.
• Material UI: sistema de componentes visuales para React.
• React Router: biblioteca para manejar rutas en React.
• Jest: framework para escribir tests.

Para crear un proyecto siguiendo esta plantilla, lo único que tenés que hacer es clickear en el botón que dice Use this template. ¡Y no te olvides de cambiarle el nombre en el package.json!

☝️ Prerrequisitos - para instalar antes de empezar

⚠️ El ejemplo viene preparado para ser ejecutado junto a una API, que puede crearse desde este repositorio.

Vas a necesitar un IDE o al menos un editor de texto que coloree la sintaxis. Recomendamos utilizar Visual Studio Code - que se lleva muy bien con proyectos JavaScript - enriquecido con los siguientes plugins:

• ESlint
• Prettier
• Jest

Para ejecutar el código es necesario tener NodeJS en su versión 18 (lts/hydrogen). Para instalarlo recomendamos utilizar el manejador de versiones nvm, aunque también podés hacerlo manualmente siguiendo las instrucciones adecuadas para tu sistema operativo.

☑️ Configuración inicial del proyecto

Asumiendo que ya configuraste todos los prerrequisitos, estos son los comandos que deberías ejecutar la primera vez que trabajes en el proyecto:

# Instala las dependencias Node del proyecto.
npm install

Por defecto, el proyecto espera que la API esté levantada en localhost:4000. Si se quiere modificar el puerto o la URL, es posible hacerlo creando un archivo .env y editando la variable correspondiente:

# Copia el archivo .env de ejemplo
cp .env.example .env

📁 Estructura de directorios

Breve descripción de qué se puede encontrar en cada uno de los directorios del proyecto:

├── public                  # Index, favicon y otros archivos comunes
└── src
    ├── app                 # Archivos raíz de RTK
    │   └── services        # APIs de RTK Query
    └── features            # Componentes de React

👩‍💻 👨‍💻 Comandos útiles para el día a día

A continuación, algunos comandos necesarios para el desarrollo diario en este proyecto.

Código

# Levanta el proyecto y recarga automáticamente si hay cambios.
npm start

# Ejecuta los tests y se queda esperando por cambios.
npm test

🚀 Despliegue

El proyecto puede desplegarse automáticamente en Vercel, configurando la variable de entorno REACT_APP_API_URL con la URL donde esté desplegada la API.