Este proyecto es tu primer acercamiento práctico a React usando Vite. Está pensado como una guía educativa y de práctica para aprender conceptos esenciales de React mientras construyes un proyecto funcional.
Demo del Proyecto
Tecnologías
Áreas de Estudio
- Introducción a Vite con React: Instalación y configuración de Vite, diferencias con Create React App, estructura del proyecto y desarrollo rápido.
- Componentes: Base de React; componentes funcionales, composición, importación y exportación.
- JSX: Sintaxis similar a HTML, expresiones, condicionales, loops y buenas prácticas de legibilidad.
- Props: Pasar información a componentes, props por defecto, validación y comunicación entre componentes padre e hijo.
- useState: Manejo del estado local, actualización de estado, objetos y arrays, y patrones para múltiples estados.
- useEffect: Efectos secundarios, fetch de datos, timers, dependencias y limpieza de efectos.
- useContext: Manejo de estado global, creación y consumo de contextos, y evitar prop drilling.
- useCallback: Optimización de funciones pasadas como props y evitar recreación innecesaria de funciones.
- useMemo: Memorizar cálculos costosos y evitar renders innecesarios de componentes.
- Manejo de eventos: Eventos en JSX, objeto event, prevención de comportamiento por defecto y buenas prácticas.
- Renderizado de listas: Map, claves (key), listas anidadas, componentes reutilizables, filtrado y ordenamiento.
- React Router: Configuración de rutas, rutas dinámicas, navegación programática y rutas anidadas.
- Formularios: Inputs controlados y no controlados, validación de datos, manejo de errores y librerías externas opcionales.
- Optimización avanzada: Memoización de componentes, lazy loading, división de código y análisis de performance.
Instalación
- Requisitos Previos
- Descargar Proyecto.
- Tener Docker y Docker Compose instalados.
- Make: Utilizado para automatizar procesos y gestionar contenedores de manera más eficiente.
- Pasos de Instalación
- Clona el repositorio desde GitHub.
- Dentro del repositorio, encontrarás un archivo Makefile que contiene los comandos necesarios para iniciar y gestionar tu aplicación.
- Usa los siguientes comandos de Make para interactuar con la aplicación:
- make init-app: Inicializa la aplicación, copiando .env, creando symlinks, levantando contenedores, instalando dependencias y levantando el servidor de desarrollo.
- make up: Levanta la aplicación y sus contenedores asociados.
- make down: Detiene los contenedores y apaga la aplicación.
- make shell: Ingresa al contenedor para interactuar directamente con el sistema en su entorno de ejecución.
- make npm-install: Instala todas las dependencias definidas en package.json.
- make npm-host: Levanta el servidor de desarrollo (npm run dev) accesible desde tu máquina local.
- makebuild-prod: Genera la versión de producción de la aplicación (npm run build) y mueve los archivos compilados a la raíz del proyecto.
- Accede a los siguientes URL:
- Aplicación Web: http://localhost:5173/
