"¡Aprende React, Redux, Node.js, MongoDB, GraphQL y TypeScript de una sola vez! Este curso te presentará el desarrollo web moderno basado en JavaScript. El enfoque principal es crear aplicaciones de una sola página con ReactJS que usan REST API creadas con Node.js."
Parte 1: Introducción a React. En esta parte, nos familiarizaremos con la librería React, que usaremos para escribir el código que se ejecuta en el navegador. También veremos algunas características de JavaScript que son importantes para comprender React. 1. Introducción a React. 2. Javascript. 3. Estado del componente, y controladores de eventos. 4. Avanzando a un estado más complejo, y depuración de aplicaciones React.
Parte 2: Comunicándose con el servidor. Continuemos nuestra introducción a React. Primero, veremos cómo representar una colección de datos, como una lista de nombres, en la pantalla. Después de esto, inspeccionaremos cómo un usuario puede enviar datos a una aplicación React utilizando formularios HTML. A continuación, nuestro enfoque se centra en ver cómo el código JavaScript en el navegador puede obtener y manejar los datos almacenados en un servidor backend remoto. Por último, echaremos un vistazo rápido a algunas formas sencillas de agregar estilos CSS a nuestras aplicaciones React. 1. Renderizando colecciones, y módulos ECMAScript. 2. Formularios. 3. Alterando datos del servidor. 4. Estilos en aplicaciones React.
Parte 3: NodeJS y Express. En esta parte, nuestro enfoque se desplaza hacia el backend, es decir, hacia la implementación de la funcionalidad en el lado del servidor. Implementaremos una API REST simple en Node.js utilizando la librería Express, y los datos de la aplicación se almacenarán en una base de datos MongoDB. Al final de esta parte, desplegaremos nuestra aplicación en Internet. 1. NodeJs y Express. 2. Despliegue de la aplicación a internet. 3. Guardando datos en MongoDB. 4. Validaciones y ESLint.
Parte 4: Testing y autenticación en NodeJS. En esta parte, continuaremos nuestro trabajo en el backend. Nuestro primer tema principal será escribir pruebas de unidad e integración para el backend. Una vez que hayamos cubierto las pruebas, analizaremos la implementación de la autenticación y autorización de usuario. 1. Estructura de la aplicación backend, e introducción a las pruebas. 2. Probando el backend. 3. Administración de usuarios con Mongoose. 4. Autenticación basada en tokens. 5. Legacy Testing con Jest.
Parte 5: Testing y autenticación en React. En esta parte volvemos al frontend, primero mirando a diferentes posibilidades para probar el código React. También implementaremos la autenticación basada en tokens que permitirá a los usuarios iniciar sesión en nuestra aplicación. 1. Iniciar sesión en la interfaz. 2. props.children y proptypes. 3. Probando aplicaciones React. 4. Pruebas extremo a extremo en Playwright. 5. Pruebas extremo a extremo en Cypress.
Parte 6: Gestión avanzada del estado en React. Hasta ahora, hemos colocado el estado de la aplicación y la lógica de estado directamente dentro de los componentes de React. Cuando las aplicaciones crecen, la administración del estado debe trasladarse fuera de los componentes de React. En esta parte, presentaremos la librería Redux, que actualmente es la solución más popular para administrar el estado de las aplicaciones React. Aprenderemos sobre la versión ligera de Redux compatible directamente con React, es decir el contexto de React y el hook useRedux, también sobre la librería React Query que simplifica la gestión de estados de la aplicación. 1. Flux-architecture y Redux. 2. Muchos reducers. 3. Comunicarse con el servidor en una aplicación redux. 4. React Query, useReducer y contextos.
Parte 7: React router, custom hooks, estilando la aplicación con CSS y webpack. La séptima parte del curso aborda varios temas diferentes. Primero, nos familiarizaremos con React Router. React Router nos ayuda a dividir la aplicación en diferentes vistas que se muestran según la URL en la barra de direcciones del navegador. Después de esto, veremos algunas formas más de agregar estilos CSS a las aplicaciones React. Durante todo el curso hemos utilizado Vite para construir nuestras aplicaciones. También es posible configurar todas las herramientas uno mismo, y en esta parte veremos cómo se puede hacer esto con una herramienta llamada Webpack. También echaremos un vistazo a las funciones hook y a cómo definir un hook personalizado. 1. React-router. 2. Hooks personalizados. 3. Más sobre estilos. 4. Webpack. 5. Componentes de clase, y misceláneos.
Parte 8: GraphQL. Esta parte del curso trata sobre GraphQL, la alternativa de Facebook a REST para la comunicación entre navegador y servidor. 1. Servidor GraphQL. 2. React y GraphQL. 3. Administración de bases de datos y usuarios. 4. Iniciar sesión y actualizar caché. 5. Fragmentos y suscripciones.
Parte 9: TypeScript. Esta parte trata sobre TypeScript: un superconjunto de JavaScript de código abierto desarrollado por Microsoft que se compila en JavaScript simple. En esta parte, utilizaremos las herramientas introducidas anteriormente para crear funciones de extremo a extremo en un ecosistema existente con linters predefinidos y una base de código existente en TypeScript. Después de hacer esta parte, debería poder comprender, desarrollar y configurar proyectos utilizando TypeScript. Esta parte fue creada por Tuomo Torppa, Tuukka Peuraniemi y Jani Rapo, los increíbles desarrolladores de Terveystalo, el proveedor de servicios de salud privado más grande de Finlandia. La red nacional de Terveystalo cubre 300 ubicaciones en Finlandia. La red de clínicas se complementa con servicios digitales 24/7. 1. Antecedentes e introducción. 2. Primeros pasos con TypeScript. 3. Tipando una aplicación Express. 4. React con tipos. 5. Grande finale: Patientos.
Parte 10: React Native. En esta parte, aprenderemos cómo compilar Android nativo y aplicaciones móviles iOS con JavaScript y React usando el marco React Native. Nos sumergiremos en el ecosistema React Native desarrollando una aplicación móvil completa desde cero. En el camino, aprenderemos conceptos tales como cómo renderizar componentes de interfaz de usuario nativos con React Native, cómo crear hermosas interfaces de usuario, cómo comunicarse con un servidor y cómo probar una aplicación React Native. 1. Introducción a React Native. 2. Conceptos básicos de React Native. 3. Comunicándose con el servidor. 4. Probar y ampliar la aplicación.
Parte 11: CI/CD. Entonces, tienes una nueva característica lista para ser enviada. ¿Qué sucede después? ¿Subes archivos a un servidor manualmente? ¿Cómo gestionas la versión de tu producto que se ejecuta en el mercado? ¿Cómo te aseguras de que funcione y vuelves a una versión segura si no lo hace? Hacer todo lo anterior de forma manual es una molestia y no es escalable para un equipo más grande. Es por eso que tenemos sistemas de Integración Continua/Entrega Continua, en resumen, sistemas CI/CD. En esta parte, comprenderás por qué deberías usar un sistema CI/CD, qué puede hacer uno por ti y cómo comenzar a usar GitHub Actions, que está disponible para todos los usuarios de GitHub de forma predeterminada. Este módulo fue creado por el equipo de ingeniería de Smartly.io. En Smartly.io, automatizamos cada paso de la publicidad social para desbloquear un mayor rendimiento y creatividad. Hacemos que cada día de publicidad sea fácil, efectivo y agradable para más de 650 marcas en todo el mundo, incluidas eBay, Uber y Zalando. Somos uno de los primeros en adoptar GitHub Actions en su uso en producción a gran escala. Colaboradores: Anna Osipova, Anton Rautio, Mircea Halmagiu, Tomi Hiltunen. 1. Introducción a CI/CD. 2. Introducción a las acciones de Github. 3. Despliegue. 4. Manteniéndose verde. 5. Expandiendo aún más.
Parte 12: Contenedores. En esta parte, aprenderemos como empaquetar el código en unidades de software estandarizadas llamadas contenedores. Estos contenedores pueden ayudarnos a desarrollar software más rápido y fácil que antes. Durante el camino exploraremos un punto de vista completamente nuevo del desarrollo web, alejado de los ya familiares Node.js y React. Utilizaremos contenedores para crear entornos de ejecución inmutables para nuestros proyectos de Node.js y React. Los contenedores también simplifican la inclusión de múltiples servicios en nuestros proyectos. Con su flexibilidad, exploraremos y experimentaremos con muchas herramientas populares al utilizar los contenedores. Esta sección ha sido creada por Jami Kousa en colaboración con el equipo Services Fundation de Unity radicado en Helsinki. El equipo Services Fundation trabaja como proveedor de plataformas para el resto de los equipos de Unity en su misión de construir excelentes servicios para sus clientes. El equipo está enfocado en mejorar la experiencia de los desarrolladores de Unity y trabaja en herramientas como el Unity Dashboard, el Unity Editor y Unity.com. 1. Introducción a los contenedores. 2. Construcción y configuración de entornos. 3. Conceptos básicos de orquestación.
Parte 13: Bases de datos relacionales. En las secciones anteriores del curso, usamos MongoDB para almacenar datos. MongoDB es una base de datos llamada NoSQL. Las bases de datos NoSQL se volvieron muy comunes hace poco más de 10 años, cuando el crecimiento de Internet comenzó a producir problemas para las bases de datos relacionales que utilizaban el lenguaje de consulta SQL antiguo. Las bases de datos relacionales han experimentado desde entonces un nuevo comienzo. Los problemas de escalabilidad se han resuelto parcialmente y también han adoptado algunas de las características de las bases de datos NoSQL. En esta sección exploramos diferentes aplicaciones de NodeJS que usan bases de datos relacionales, nos enfocaremos en usar la base de datos PostgreSQL que es la número uno en el mundo de código abierto. La traducción al inglés de esta parte está realizada por Reiner Mangly. 1. Uso de BDs relacionales con Sequelize. 2. Unión de tablas y consultas. 3. Migraciones, y relaciones N-N.