🌱
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
!
☝️ 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.