Este curso cubre todas las fases del desarrollo de aplicaciones web modernas con JavaScript, enfocándose en crear aplicaciones de una sola página con React y API REST con Node.js.
También incluye una sección sobre GraphQL, una alternativa moderna a las API REST, una sobre TypeScript, una sobre React Native y uso en aplicaciones móviles nativas, una sobre sistemas de Integración Continua / Entrega Continua (CI/CD) y sus buenas prácticas para desplegar aplicaciones, una sobre Contenedores y sus utilidades, y una sobre PostgreSQL como base de datos relacional.
En este repositorio se encuentran recogidos todos y cada uno de los ejercicios propuestos por la Universidad, en sus respectivos directorios nombrados con el número de la parte a la que corresponden.
- Certificado Partes 1 - 7
- Certificado GraphQL
- Certificado TypeScript
- Certificado React Native
- Certificado CI/CD
- Certificado Contenedores
- Certificado Bases de Datos Relacionales
| Parte | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 🎓 |
| Estado | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | 🎉 |
| Ejercicios | 6 | 14 | 20 | 22 | 23 | 23 | 24 | 21 | 26 | 29 | 27 | 21 | 22 | 24 | 302 |
🏗️ Parte 0 - Fundamentos de las aplicaciones web
Este apartado proporciona una introducción a los conceptos básicos del desarrollo web, como el funcionamiento de las aplicaciones web tradicionales y las de una sola página (SPA), el uso de JavaScript y el DOM, y las tendencias actuales en el desarrollo web full stack.
- Información general
- Fundamentos de las aplicaciones web
📖 Parte 1 - Introducción a React
Esta parte introduce desde conceptos básicos de React (componentes, props, JSX) hasta aquellos más avanzados como funcionalidades de JavaScript utilizadas habitualmente en componentes (.map(), .filter(), .reduce() ... ), desestructuración, controladores de eventos, pasar estados a componentes hijos, spread operator, hooks y sus normas, y renderizado condicional.
- Introducción a React
- JavaScript
- Estado del componente, controladores de eventos
- Un estado más complejo, depurando aplicaciones React
📡 Parte 2 - Comunicándose con el servidor
Esta parte cubre cómo mostrar un listado de objetos en React y el manejo de formularios. Además, introduce JSON server y fetching de datos utilizando axios para las solicitudes GET, POST, PUT y DELETE. Finalmente da unas nociones básicas sobre la incorporación de estilos CSS.
- Renderizando una colección, módulos
- Formularios
- Obteniendo datos del servidor
- Alterando datos en el servidor
- Agregar estilos a la aplicación React
🛠️ Parte 3 - Programando un servidor con NodeJS y Express
Esta parte se centra en el backend. Más concretamente en cómo implementar una API REST en NodeJS con Express, conectarla a una base de datos MongoDB y finalmente desplegarla.
- Node.js y Express
- Despliegue de la aplicación a Internet
- Guardando datos en MongoDB
- Validación y ESLint
Esta parte se centra en testing unitario de aplicaciones de NodeJS e introduce los conceptos de async/await. Además, se implementa la administración y autenticación de usuarios basada en json web tokens (jwt).
- Estructura de la aplicación backend, introducción a las pruebas
- Probando el backend
- Administración de usuarios
- Autenticación basada en token
🧪 Parte 5 - Probando aplicaciones React
Esta parte se centra en el testing end to end de una aplicación de React utilizando Jest, React Testing Library y Playwright. Además, se implementa la autenticación de usuarios basada en tokens en el frontend.
- Iniciar sesión en la interfaz
- props.children y proptypes
- Probando aplicaciones React
- Pruebas de extremo a extremo: Playwright
⚙️ Parte 6 - Gestión avanzada del estado
Esta parte se centra en Redux, usado para un manejo de estados y contextos más complejo (cubriendo conceptos como inmutabilidad, almacenamiento global, acciones y reducers). Además, también se trata cómo usar Redux con hooks, cómo utilizar redux thunk para código asíncrono y React Query para un código más simple y optimizado.
- Flux-architecture y Redux
- Muchos reducers
- Comunicarse con el servidor en una aplicación redux
- React Query, useReducer y el contexto
Esta parte trata sobre un amplio abanico de temas. Primero React Router (con hooks), que nos ayuda a manejar la navegabilidad en aplicaciones de React. Después, la creación de hooks personalizados y maneras de dar estilos a la aplicación (mediante el uso de librerías UI). Finalmente se trata el uso de Webpack y su funcionamiento. Además, se dedica un apartado a los componentes de React como clases para poder entender versiones más antiguas.
- React-router
- Hooks personalizados
- Más sobre estilos
- Webpack
- Componentes de clase, misceláneos
- Ejercicios: ampliar la lista de blogs
🔧 Parte 8 - GraphQL
Esta parte trata sobre GraphQL, la alternativa de Facebook a las API REST para la comunicación entre navegador y servidor. Se cubren los conceptos básicos como schemas, queries y resolvers, así como la puesta a punto y uso de un Apollo Server para el desarrollo.
- Servidor GraphQL
- React y GraphQL
- Administración de bases de datos y usuarios
- Iniciar sesión y actualizar la caché
- Fragmentos y suscripciones
✏️ Parte 9 - TypeScript
Esta parte trata sobre TypeScript. Comienza con una introducción teórica sobre las características clave, limitaciones y recomendaciones a la hora de utilizar el lenguaje. Tras ello, se tipa una aplicación de Express (utilizando TypeScript para guardias de tipo) y una de React (utilizando tipos tanto para props como para estados y obtención de datos del servidor). Finalmente, se parte una base de código ya creada sobre la que tipar y solventar los errores más comunes a la hora de crear una aplicación full stack utilizando TypeScript.
- Antecedentes e introducción
- Primeros pasos con TypeScript
- Tipando una aplicación Express
- React con tipos
- Grande finale: Patientor
📱 Parte 10 - React Native
Esta parte trata sobre cómo crear aplicaciones móviles nativas para iOS y Android utilizando JavaScript y React utilizando el framework React Native. Se desarrolla una aplicación móvil completa desde cero. En el camino, se aprenden conceptos como renderizar componentes de interfaz de usuario nativos, cómo crear interfaces de usuario atractivas, cómo comunicarse con el servidor y cómo realizar tests en aplicaciones React Native.
- Introducción a React Native
- Conceptos básicos de React Native
- Comunicándose con el servidor
- Probar y ampliar nuestra aplicación
🚀 Parte 11 - CI/CD
Esta parte trata sobre cómo y por qué utilizar sistemas de Integración Continua / Entrega Continua (CI/CD), además de servir como introducción a las GitHub Actions, disponibles para todos los usuarios de la plataforma de manera predeterminada.
- Introducción a CI/CD
- Introducción a las acciones de Github
- Despliegue
- Manteniéndose verde
- Expandiéndose aún más
🐋 Parte 12 - Contenedores
Esta parte trata sobre cómo empaquetar el código en unidades de software estandarizadas (contenedores), haciendo que desarrollar software sea más rápido y sencillo. Se utiliza la herramienta Docker para crear entornos de ejecución inmutables para proyectos de NodeJS y React. Se cubren los conceptos de imágenes y volúmenes, además del uso de Redis y su persistencia de datos en caché. Finalmente se explica cómo desplegar una aplicación en Docker para producción.
- Introducción a los Contenedores
- Construir y configurar entornos
- Conceptos básicos de orquestación
🔗 Parte 13 - Utilizando bases de datos relacionales
Esta parte trata sobre las bases de datos relacionales, en concreto usando PostreSQL. Se utiliza Sequelize para el Mapeo Relacional de Objetos (ORM). Se explican los conceptos clave de este tipo de bases de datos como las claves primarias, relaciones (OtM y MtM), modelos y unión de tablas. Finalmente, se trabaja con migraciones, de manera que los cambios se realicen de forma controlada, con el código del programa almacenado en el control de versiones.
- Uso de bases de datos relacionales con Sequelize
- Unir tablas y consultas
- Migraciones, relaciones de muchos-a-muchos