Examen Final: JavaScript Moderno | JSCamp

Saltar al contenido principal

Buscar clases⌘K

Módulo 01

Introducción al Bootcamp

¿Por qué Aprender Programación?
Programación FullStack, Frontend y Backend
Presentación del Proyecto
Diseñando nuestro Proyecto
Requisitos para el Bootcamp
¿Qué tienes que instalar?
Extensión y Terminal recomendada
Acceso al Código del Proyecto

Módulo 02

HTML y CSS

¿Qué es HTML?
La estructura básica
La etiqueta body y más
La etiqueta main, section y img
Formularios
Article y footer
Curso completo de HTML
¿Qué es CSS?
Escribiendo nuestro primer CSS
Selectores CSS
Responsive design
Ejercicios y cursos HTML/CSS
Enlaces en HTML
Comentarios en HTML
Creando múltiples páginas HTML
Arreglando el logo del header
Pseudo-clases en CSS
Aplicar estilos con clases en HTML
La directiva !important y especificidad en CSS
Estilizando la página de empleos
Creando una paginación desde cero
Examen de HTML y CSS

Módulo 03

JavaScript

Introducción a JavaScript
Tipos de datos y variables
Funciones en JavaScript
Examen: Fundamentos de JavaScript
Aprender JavaScript, curso completo
Eventos y JavaScript en el navegador
Manipulación del DOM
Delegación de Eventos
Examen: DOM y Eventos
Optional Chaining
Ejercicios, filtrando resultados
Manejar evento change en JavaScript
Más eventos; input, blur, submit, preventDefault
Cómo recuperar datos de los elementos HTML
Estilando el elemento select
Mejorando las opciones con optgroup
Examen: Atributos, Clases y Filtrado
Aplicando clases CSS dinámicamente con JavaScript
Introducción a JSON
Comprendiendo fetch paso a paso
Mostrando datos dinámicamente con fetch
Evitando inyecciones al pintar HTML dinámico
Separando código en módulos de JavaScript
Creando tu primer Web Component
Iterando nuestro Web Component con atributos
Ejercicios prácticos con el buscador de empleos
Despliegue a producción
Examen Final: JavaScript Moderno

Módulo 04

React

¿Qué es React?
Primeros pasos en React
JSX: La sintaxis de React
Componentes en React
Componentes vs Funciones normales
Creando JobCard: Nuestro primer componente real
Eventos en React
Estado con useState
Renderizado y Virtual DOM
Vite: Empaquetador moderno
Instalación de Vite
Fast Refresh y Actualizaciones de Estado
Migrando el Proyecto DevJobs a React
Ejercicios de práctica
Props - Comunicación entre Componentes
Módulos JavaScript - Import y Export
Paginación - Props y Comunicación Padre-Hijo
Callbacks - Pasar Funciones como Props
Estado por Props - Lifting State Up
Keys y Renderizado de Listas
Terminando la paginación
CSS Modules
Hook useId()
Gestión de Formularios y Filtros
Ejercicios: Formularios y Eventos
Filtros automáticos y Routing básico
Hook useEffect: Efectos secundarios en React
Cuándo usar useEffect
Creando una Single Page Application (SPA) desde cero con React
Custom Hooks: Reutilizar lógica en React
Integrando navegación con formulario de búsqueda
Creando un componente <Route> declarativo
Creando custom hook para formulario
9 Ejercicios prácticos: Router y Formularios
Llamada a la API: Consumiendo datos reales con fetch
Integrando filtros en la petición HTTP
Arreglando paginación con limit y offset
Ejercicios: Mejoras en la aplicación
Problemas con la etiqueta title
Técnica de debounce en el buscador
Hook useRef: referencias y valores que persisten entre renders
Arreglando la paginación
Sincronización de la URL con el buscador

Módulo 05

Estado Global y React Router

Qué es React Router y por qué usarlo
Cómo crear rutas con React Router
Link y hooks useNavigate y useLocation de React Router
Parámetros en React Router con useParams
Trabajando en los estilos del detalle de cada empleo
Navegación a la página de detalle
Ejercicio: terminar de estilar la página de detalle
Hook useSearchParams de React Router
Técnica de lazy load en las rutas
Estilos activos con NavLink
Ejercicios de refuerzo: detalle, paginación y filtros
Autenticación y Prop Drilling
Introducción a React Context
Optimizando el código del Contexto
Usar use en lugar de useContext
Prop Drilling vs Context API
Qué pasa con Redux y por qué hoy casi nunca lo necesitas
Introducción a Zustand para estado global
Store de favoritos con Zustand
Integrar un store de favoritos en la UI
Sincronización del estado global y logout limpio
Rutas protegidas con React Router y estado global
Quitar la persistencia de favoritos al cerrar sesión

Módulo 06

Backend con Node.js y Express

Introducción a Node.js
Examen: Introducción a Node.js
Instalar Node.js y gestionar versiones
Ficheros y sistema de módulos en Node.js
Nuestro primer script con Node.js: leer y escribir archivos
Examen: Gestión de Versiones y Módulos
Trabajar con rutas de archivos en Node.js
Información del sistema operativo e instalación de paquetes
Importante al instalar cualquier paquete en Node.js
Sistema de permisos en Node.js
Creando nuestro propio CLI con Node.js
Creando nuestro primer servidor HTTP y usando watch
Cambiar el puerto usando variables de entorno
Discriminar rutas y devolver respuestas correctas en Node.js
Comprueba que la API funciona bien
Métodos HTTP y cómo debe responder una API
Crear usuarios con POST en una API Node.js
Filtrar usuarios con query params
Introducción a Express: Qué es y para qué sirve
Creando nuestro primer servidor con Express
Diferencias entre usar Express y no usarlo
Middlewares en Express
Rutas con parámetros dinámicos en Express
Devolver los empleos en JSON
Filtrar empleos con query params
Paginación de resultados en Express
Creando nuestra primera REST API
Creando un CRUD con Express
Middleware para parsear el body de las peticiones
Utilizar la REST API y configurar CORS
Aplicando el patrón MVC en nuestra API
Deploy de nuestra API de Express en Vercel

Módulo 07

Testing

Configuración para crear tests en nuestra API
Nuestro primer test para la API
Creando esquemas con Zod para validar nuestra API
Validaciones con middleware en Express
Qué es un Test E2E y cómo montarlo con Playwright
Creando nuestro primer test E2E
Tests End to End con IA usando Stagehand
Testing con Agentes en la vida real
Examen: Testing

Módulo 08

TypeScript

Qué es TypeScript
Cómo funciona TypeScript: compilación vs tiempo de ejecución
JavaScript es tipado débil
Por qué aprender TypeScript
Tipos primitivos en TypeScript
Arrays en TypeScript
Objetos en TypeScript
Tipos anidados y Literal Types en TypeScript
Examen: Fundamentos de TypeScript
Intersection Types en TypeScript
Extensión imprescindible: Pretty TypeScript Errors
Tuplas en TypeScript
Any, unknown, never y void
Tipar funciones básicas
Type Narrowing en TypeScript
Interfaces en TypeScript: contratos y mejores usos
Ejecutar TypeScript con Node
Examen final: TypeScript

Módulo 09

Inteligencia Artificial

¿Qué es la Inteligencia Artificial hoy?
Entender los LLMs como developer
Tokens en Inteligencia Artificial - Lo que todo desarrollador debe entender
Herramientas de IA para Programadores
Agentes de IA en Editores de Código
Examen: Fundamentos de IA para Developers
Claude Code
Model Context Protocol (MCP): Conectando la IA con el Mundo Real
Agent Skills y MCP - Extendiendo las capacidades de la IA
Ejecutar Agentes gratis en local
NotebookLM - Aprende 10x con IA usando tus propias fuentes
Examen: Agentes de IA, MCP y Skills
¿Qué es un monorepo? Monorepositorio multipaquete explicado
Configuración de un Monorepo - Estructura y primeras decisiones
Configurando IA para el backend
Crear tu API Key de OpenAI paso a paso
Cargar ruta al backend - Conectando IA con tu servidor
Integrar llamada al backend desde el frontend
Rate Limit - Protege tu API de abusos y errores
Streaming de datos - Procesa información en tiempo real
Ajustando el streaming para servirlo al frontend
Utilizar cualquier modelo - Cómo elegir y cambiar modelos de IA
Convertir streaming de datos en Markdown
Examen: Monorepos, Backend con IA y Streaming

Módulo 10

SQL

Introducción a SQL
¿Qué es SQL?
Cómo funciona SQL
Las 3 primeras consultas SQL
Insertar más de un elemento a la vez
Filtrar resultados en SQL
Examen: Fundamentos de SQL
Actualizar datos en SQL
Eliminar registros en SQL
Ordenar y limitar resultados en SQL
Paginación en SQL
Modificar tablas con ALTER TABLE
Restricciones y validaciones en SQL
Examen: Consultas y estructura
Relaciones entre tablas en SQL
JOIN en SQL
Tablas relacionales y GROUP_CONCAT
Transacciones en SQL
Conectar una API backend con una base de datos SQL
Persistir la información en SQLite
Hacer que la API lea desde la base de datos
Examen: Final de SQL

Módulo 11

Agente de Código

Qué es OpenCode y las Terminales
Instalando OpenCode + Interfaz
Las Ventajas de los Proveedores y Modelos en OpenCode
Nuestro primer prompt en un proyecto
Más comandos y TUI
Build y Plan en OpenCode
Cómo Ahorrar Tokens en OpenCode
Modo Shell en OpenCode
Por qué importa el historial
Creando un videojuego desde cero
Examen: Fundamentos de OpenCode
La importancia de las especificaciones en OpenCode
Tareas agrupadas en OpenCode
Timeline - Navegando por el Historial de Conversaciones
Cambiar tema en OpenCode
Notificaciones y revertir cambios
OpenCodeGO y los Modelos de Pago
Construyendo una app de Running
Agents.md: La Memoria Persistente para tus Agentes de IA
Cambiar entre sesiones en OpenCode
20 Mejores modelos de pago
Examen: Agentes, Skills y Modelos
Agent Skills
Skill para crear videos
Reducir el porcentaje usado
Conectar tu suscripción a OpenCode
Comparativa de Modelos y Suscripciones
Agentes y Subagentes en OpenCode
Crear tus propios comandos
Compartir sesiones en OpenCode
Ejecutar OpenCode desde la terminal
Crear servidor y web con OpenCode
Cómo usar Arguments en OpenCode
Examen: Final de OpenCode

Módulo 12

CI/CD

Qué es GitHub Actions
Por qué es importante aprender GitHub Actions
Pricing de GitHub Actions
Crear nuestro primer flujo de trabajo
Tener el código del repositorio
Examen: Fundamentos de GitHub Actions
Flujo de trabajo manual
Cron Job - Establecer cada cuánto se tiene que ejecutar
Self-Hosted Runners en GitHub Actions
Eventos en GitHub Actions
Escribir comentarios con un bot y mis propios comentarios
Examen: Triggers, Cron y Eventos
Workflow con CI/CD
Workflow en paralelo
Dependencias en GitHub Actions
Github Actions con Claude
Matrices en GitHub Actions
Examen: Final de CI/CD

Módulo 13· Nuevo

DevOps y Docker

Qué es Docker
Creando nuestro primer contenedor
Cómo instalar Docker
Máquina Virtual vs Docker
Para qué sirve Docker
Revisar que funcione todo correcto e imágenes
Instalar imágenes de Docker
Creando un contenedor desde cero
Examen: Fundamentos de Docker
9 Comandos de Docker
Archivos en Docker
Variables de Entorno en Docker
Más comandos, eliminar contenedores y limpieza de Docker
Evitar meter archivos innecesarios con .dockerignore
Caché en Docker y Optimización de Builds
Docker Init
Examen: Dockerfiles y optimización
Publicar imagen
Docker file multipaso
Volúmenes en Docker
Docker con IA
Examen: Docker avanzado
Docker AI en la terminal
Desplegar Docker en Vercel

Examen de conocimientos

Pregunta 1 de 5

¿Qué devuelve el método fetch()?

Selecciona una opción para continuar