Bootcamp intensivo de 20 semanas (5 meses) diseñado para llevar a desarrolladores con JavaScript intermedio a nivel Mid-Level en React + TypeScript.
Enfoque práctico con Aprendizaje Basado en Proyectos (ABP), Dominios Únicos (política anticopia), y 100% containerización con Docker para despliegues en producción.
Al finalizar el bootcamp, los estudiantes serán capaces de:
- ✅ Aplicar TypeScript en aplicaciones React profesionales
- ✅ Construir aplicaciones React completas con componentes funcionales y hooks modernos
- ✅ Gestionar estado global con Zustand y Redux Toolkit
- ✅ Implementar fetching de datos con React Query y manejo de caché
- ✅ Crear interfaces responsivas con CSS moderno y Tailwind CSS
- ✅ Escribir tests automatizados con Vitest y React Testing Library
- ✅ Aplicar patrones de diseño y arquitectura limpia en React
- ✅ Optimizar rendimiento (memoization, lazy loading, code splitting)
- ✅ Implementar formularios complejos con React Hook Form y Zod
- ✅ Trabajar con APIs REST y GraphQL
- ✅ Containerizar y desplegar aplicaciones React con Docker
- ✅ Implementar CI/CD con Docker en producción
- ✅ Seguir mejores prácticas de accesibilidad (a11y) y SEO
React moderno + TypeScript desde el día 1 — Sin transiciones lentas, solo las mejores prácticas actuales (2026).
- 🎯 Enfocado en resultados: Cada proyecto es un portafolio evaluable
- 🏛️ Dominios únicos: Cada aprendiz trabaja su propio dominio (biblioteca, farmacia, etc.)
- 🐳 Docker First: 100% containerizado desde semana 1
- ⚡ Stack moderno: Vite, React 18+, TypeScript estricto, testing desde día 1
- 👥 Comunitario: Code reviews, pair programming, live coding
| Etapa | Semanas | Horas | Contenido |
|---|---|---|---|
| 1. Fundamentos TypeScript | 1 | 8h | Tipos, interfaces, generics |
| 2. Fundamentos React | 2-6 | 40h | Componentes, hooks, Context API |
| 3. React Intermedio | 7-11 | 40h | Router, estado global, React Query |
| 4. Styling y UI | 12-13 | 16h | Tailwind CSS, animaciones |
| 5. Testing | 14-15 | 16h | Vitest, Testing Library |
| 6. Performance | 16-17 | 16h | Optimización, patrones avanzados |
| 7. Proyecto Final + Docker | 18-20 | 24h | Full-stack, Docker, deployment |
| TOTAL | 20 semanas | 160 horas |
Cada semana incluye:
bootcamp/week-XX/
├── README.md # Descripción y objetivos
├── rubrica-evaluacion.md # Criterios de evaluación
├── 0-assets/ # Imágenes y diagramas
├── 1-teoria/ # Material teórico
├── 2-ejercicios/ # Ejercicios guiados (comentados)
├── 3-proyecto/ # Proyecto con TODOs
├── 4-recursos/ # Recursos adicionales
│ ├── ebooks-free/ # Libros electrónicos gratuitos
│ ├── videografia/ # Videos y tutoriales
│ └── webgrafia/ # Enlaces y documentación
└── 5-glosario/ # Términos clave (A-Z)
└── README.md
- 📖 Teoría: Conceptos fundamentales con ejemplos del mundo real
- 💻 Ejercicios Guiados: Tutoriales paso a paso (código comentado para descomentar)
- 📝 Proyecto Semanal: Implementación en dominio único asignado
- 🧪 Evaluación: Evidencias de conocimiento, desempeño y producto
- 📚 Recursos: Glosarios, referencias, videos, ebooks
| Componente | Versión | Descripción |
|---|---|---|
| JavaScript | ES2023 | Lenguaje base |
| TypeScript | 5.x | Type safety |
| React | 18+ | UI framework |
| Vite | 5+ | Build tool (HMR rápido) |
| Zustand | - | Estado global (ligero) |
| Redux Toolkit | - | Estado global (alternativa) |
| React Query | TanStack | Server state management |
| React Router | v6 | Enrutamiento |
| React Hook Form | - | Gestión de formularios |
| Zod | - | Validación de tipos |
| Vitest | - | Testing rápido |
| React Testing Library | - | Testing de componentes |
| Tailwind CSS | 3+ | Utility-first CSS |
| Docker | 20+ | Containerización |
| pnpm / yarn | - | Gestores de paquetes (❌ NO npm) |
- Node.js 24 LTS (recomendado para herramientas de desarrollo)
- Git para control de versiones
- Docker 20+ (para containerización)
- VS Code (recomendado) con extensiones incluidas
- Navegador moderno (Chrome, Firefox, Edge)
- JavaScript intermedio (ES2023, promesas, módulos)
git clone https://github.com/ergrato-dev/bc-react.git
cd bc-react# Abrir en VS Code
code .
# Las extensiones recomendadas aparecerán automáticamente
# O ejecutar: Ctrl+Shift+P → "Extensions: Show Recommended Extensions"Extensiones recomendadas:
- ES7+ React/Redux/React-Native snippets (dsznajder.es7-react-js-snippets)
- Prettier - Code formatter (esbenp.prettier-vscode)
- ESLint (dbaeumer.vscode-eslint)
- TypeScript Vue Plugin (Vue.vscode-typescript-vue-plugin)
- Thunder Client (rangav.vscode-thunder-client)
cd bootcamp/week-01Cada semana contiene un README.md con instrucciones detalladas.
- 🎯 Aprendizaje Basado en Proyectos (ABP): Proyectos semanales integradores
- 🏛️ Dominios Únicos: Cada aprendiz aplica conceptos a su dominio asignado (anticopia)
- 🧩 Práctica Deliberada: Ejercicios incrementales de dificultad
- 🔄 Coding Challenges: Problemas del mundo real
- 👥 Code Review: Revisión de código entre estudiantes
- 🎮 Live Coding: Sesiones en vivo de programación
- 🐳 Docker First: Containerización desde el inicio
- Teoría: 2-2.5 horas
- Ejercicios Guiados: 3-3.5 horas
- Proyecto Semanal: 2-2.5 horas
Cada semana incluye tres tipos de evidencias:
- Conocimiento 🧠 (30%): Cuestionarios y evaluaciones teóricas
- Desempeño 💪 (40%): Ejercicios prácticos y code reviews
- Producto 📦 (30%): Proyecto entregable funcional
Criterios de aprobación:
- Mínimo 70% en cada tipo de evidencia
- Código funcional y bien documentado
- Tests pasando (cuando aplique)
- Implementación coherente con dominio asignado
- Originalidad: Sin copia entre aprendices
Cada aprendiz recibe un dominio único asignado por el instructor:
Ejemplos de dominios:
📖 Biblioteca, 💊 Farmacia, 🏋️ Gimnasio, 🏫 Escuela, 🏬 Tienda de mascotas, 🍽️ Restaurante, 🏦 Banco, 🚕 Taxis, 🏥 Hospital, 🎥 Cine, 🏞️ Hotel,
Objetivo:
- ✅ Prevenir copia entre estudiantes
- ✅ Fomentar implementaciones originales
- ✅ Aplicar conceptos generales a contextos específicos
- ✅ Desarrollar capacidad de abstracción y adaptación
Responsabilidades del instructor:
- Asignar un dominio único a cada aprendiz al inicio
- Mantener registro de dominios asignados
- No repetir dominios en el mismo grupo
- Validar coherencia con el dominio en evaluaciones
¡Las contribuciones son bienvenidas! Este es un proyecto educativo de código abierto.
- Lee la Guía de Contribución
- Revisa el Código de Conducta
- Fork del repositorio
- Crea tu rama (
git checkout -b feature/nueva-funcionalidad) - Commit con Conventional Commits (
git commit -m 'feat: add new exercise') - Push a la rama (
git push origin feature/nueva-funcionalidad) - Abre un Pull Request
- ✨ Ejercicios adicionales
- 📚 Mejoras en documentación
- 🐛 Corrección de errores
- 🎨 Recursos visuales (diagramas SVG)
- 🌐 Traducciones
- 📹 Videos tutoriales
- 🐳 Ejemplos Docker
- 📧 Email: contacto@bootcamp.dev
- 💬 Discussions: GitHub Discussions
- 🐛 Issues: GitHub Issues
Este proyecto está bajo la Licencia MIT - ver el archivo LICENSE para más detalles.
- React Docs — Por la mejor documentación de React
- TypeScript Handbook — Documentación oficial
- MDN Web Docs — Referencia web estándar
- Vite — Build tool moderno
- Docker — Containerización
- Comunidad React/TypeScript — Por los recursos y ejemplos
🎓 Bootcamp React + TypeScript
De JavaScript intermedio a desarrollador React Mid-Level en 5 meses
📅 Comenzar Semana 1 • 📖 Ver Documentación • 🐛 Reportar Issue • 🤝 Contribuir
Hecho con ❤️ para la comunidad de desarrolladores
Última actualización: Enero 2026
Versión: 1.0