Repositorio semilla: aplicación React 🌱

Este es uno de los repositorios que utilizamos en la serie Tu primera aplicación full stack: NodeJS + React, disponible en YouTube. Te recomendamos que mires la serie para entender un poco más sobre las tecnologías que elegimos. 😃

¡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.
Recoil: biblioteca para manejar estado en React.
Material UI: sistema de componentes visuales para 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!

ℹ️ 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.

☝️ Prerrequisitos - para instalar antes de empezar

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:

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

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

☑️ Configuración inicial del proyecto

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

# Copia las variables de entorno necesarias para interactuar con la API.
cp .env.example .env

# Instala las dependencias Node del proyecto.
npm install

📁 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
    ├── components          # Componentes de React
    └── state               # Selectores y átomos de Recoil

👩‍💻 👨‍💻 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

Para publicar en Heroku, seguir esta guía: https://blog.heroku.com/deploying-react-with-zero-configuration.

faloi / misuperfrontend