Descripción
Descripción del Curso de React MERN
¡Bienvenido al emocionante curso de React MERN (MongoDB, Express, React, Node.js)! En este viaje de aprendizaje, te sumergirás en el fascinante stack MERN y desarrollarás aplicaciones web modernas y dinámicas. Nuestro principal objetivo es que adquieras habilidades sólidas y apliques tus conocimientos en la creación de tu propia aplicación desde cero, lo que te permitirá ver tu progreso a medida que avanzas en el curso.
Al completar el curso de React MERN de Formación TI, los estudiantes tendrán una sólida comprensión de la propuesta de valor de MERNS; también adquirirán experiencia práctica trabajando con todos los componentes del stack MERN. Este curso de formación de alta intensidad se complementa con laboratorios prácticos que ayudan a los estudiantes a reforzar su conocimiento teórico del material aprendido.
Temas centrales
- La librería React
- MongoDB Esencial
- Node.js
- Depuración y Pruebas Unitarias en Node.js
- Express
- Proyectos de Aplicaciones de Stack Completo (Full-stack)
Objetivos
Los objetivos del curso de React MERN son:
- Comprender el stack MERN: Aprenderá cómo funcionan juntas MongoDB, Express, React y Node.js para desarrollar aplicaciones web modernas y dinámicas.
- Crear una propia aplicación: Tendré la oportunidad de desarrollar mi propia aplicación desde cero, lo que me permitirá aplicar todos los conceptos aprendidos en el curso y ver mi progreso a medida que avanzo.
- Entender MongoDB: Aprenderá a manejar una base de datos NoSQL como MongoDB, lo que me permitirá almacenar y recuperar datos de manera eficiente para mi aplicación.
- Construir una API con Express: Adquirirá habilidades para crear una API RESTful utilizando Express, lo que me permitirá conectar el front-end y el back-end de mi aplicación de manera efectiva.
- Desarrollar interfaces interactivas con React: Seré capaz de crear interfaces de usuario modernas e interactivas utilizando React, lo que mejorará la experiencia del usuario en mi aplicación.
- Utilizar Node.js para el back-end: Aprenderé a utilizar Node.js para desarrollar el servidor del lado del back-end y administrar solicitudes y respuestas para mi aplicación.
- Asegurar mi aplicación: Entenderé cómo proteger mi aplicación contra posibles ataques y vulnerabilidades, lo que garantizará la seguridad de los datos y la información de los usuarios.
- Aplicar buenas prácticas de codificación: Adquiriré conocimientos sobre prácticas recomendadas y patrones de diseño en el desarrollo web para escribir un código limpio, organizado y fácil de mantener.
Requisitos previos para el Curso de React MERN
Para tener éxito en este curso de formación, los participantes deben tener experiencia con:
- Programación en JavaScript (ES6 o superior) a un nivel intermedio, incluyendo cierta exposición al manejo de excepciones, promesas y la depuración de aplicaciones web en el entorno del navegador.
- Tecnologías principales de frontend como HTTP, HTML, CSS, DOM y herramientas de desarrollo del navegador.
- Se asume conocimiento conceptual de sistemas de bases de datos y diseño de aplicaciones web.
Ofrecemos un subconjunto de 1 a 2 días de nuestro curso de Introducción a JavaScript para cumplir con este requisito previo si es necesario. Por favor, consulte a su representante de ventas para obtener más detalles.
Público objetivo
Desarrolladores, Líderes Técnicos y Arquitectos de Software.
Duración
24 horas distribuidas en 3 días de 8 horas, o sesiones de 3 o 4 horas presenciales u Online hasta completar las 24 horas
Contenido del curso de React MERN
Capítulo 1 – Resumen de React
¿Qué es React?
¿Qué hay en un nombre?
Modelo de Componente de React
Lo que React NO es
Lo que NO encontrarás en React
Motivación para crear React
Un ejemplo de JavaScript en React
Flujo de datos unidireccional
JSX
Un ejemplo de JSX
El DOM virtual (falso)
Solo se vuelven a renderizar los subcomponentes que cambian realmente
Bibliotecas de React
Capítulo 2 – ES6 en pocas palabras
¿Qué es ES6?
Características de ES6
Usando ES6
Transpilación
Principales cambios de sintaxis
let y const
Ámbito de las variables
Sombreado de variables
Funciones de flecha
Funciones de flecha como parámetros
Uso de ‘this’ dentro de funciones de flecha
Literales de plantilla
Operador de propagación
Clases de ES6
Declaración de clases
Declaración de métodos de instancia
Métodos de acceso
Métodos estáticos
Herencia con clases
Capítulo 3 – Interfaz de línea de comandos de Babel
Transpilador Babel
Opciones de uso
Presets y plugins
Instalación de Babel CLI
Configuración de Babel
Ejecución de Babel en la línea de comandos
Una configuración básica de desarrollo de ES6 con Babel
Probar la configuración de desarrollo de Babel
Agregar React a la configuración de desarrollo
Crear una aplicación mínima de React – Index.html
Crear una aplicación mínima de React – app.js
Capítulo 4 – Componentes básicos y JSX
¿Qué es JSX?
Ejemplo de transpilación de JSX a código React
Ejecutar el código transpilado
Babel
La biblioteca de tiempo de ejecución de Babel
Código de esqueleto de importación de script
Jugar en CodePen
Componentes de React
Formas de crear componentes de interfaz de usuario (UI)
Ejemplo de creación de un componente funcional
Los nombres de los componentes deben ir en mayúscula
Creación de un componente de React basado en clases en ES5
El método render
Creación de un componente de interfaz de usuario utilizando la notación de clases ES6
Uso de clases ES6 con React
¿Qué sintaxis de creación de componentes de interfaz de usuario (UI) debo usar?
Componentes vs. Elementos
Los elementos son inmutables
Propiedades
Convención de nomenclatura de propiedades
Las propiedades tienen un valor predeterminado de ‘true’
Atributos de propagación (una característica de ES6)
Expresiones
Fragmentos
Capítulo 5 – Conceptos de componentes funcionales de React
Componentes funcionales
Anidación de elementos JSX
Ejemplo de anidación de JSX
Comentarios en el código JSX
Configuración de estilos CSS mediante clases
Configuración de estilos CSS directamente
Valores escapados en JSX
Trabajo con listas de elementos
Claves en listas
Ejemplo de lista con clave
Componentes contenedores vs. presentacionales
Estado (state)
Tipos de datos de estado
Jerarquía de estados
Elevar el estado (lifting state up)
Props vs. Estado
Pasar una función
Inmutabilidad
Inmutabilidad – ¿Por qué?
DOM virtual y estado
Configuración de estado
Actualización de campos de entrada (input fields)
Pasar propiedades (props) a los componentes
Pasar funciones a los componentes
Manipulación de eventos
Ejemplo de controlador de eventos
Vinculación de eventos: qué hacer
Vinculación de eventos: qué no hacer
Pasar parámetros a los controladores de eventos
Ciclo de vida del componente
Ciclo de vida en componentes funcionales
Flujo de trabajo de desarrollo de aplicaciones – 1/3
Flujo de trabajo de desarrollo de aplicaciones – 2/3
Flujo de trabajo de desarrollo de aplicaciones – 3/3
Capítulo 6 – Componentes de React con clases ES6
Clases en ES6
Componentes funcionales
Extender React.Component
El método render()
Estado (state)
Props
defaultProps
propTypes
Ciclo de vida del componente
Ciclo de vida del componente: visión general
Ciclo de vida del componente: fase de renderización
Ciclo de vida del componente: fase de confirmación
Ciclo de vida del componente: desmontaje
Ejemplo de constructor()
Ejemplo de componentDidMount()
setState(nuevoValorDeEstado)
Capítulo 7 – React Router
Enrutamiento y navegación
react-router
Creación de un proyecto basado en react-router
Un componente de enrutamiento básico
Router vs. BrowserRouter
El componente Route
<Switch>
Ruta de redirección (Redirect Route)
Navegación con <Link>
Navegación con <NavLink>
Parámetros de ruta
Obtención de parámetros de ruta
Parámetros de cadena de consulta (QueryString Parameters)
Uso de Router con Redux
Capítulo 8 – Gestión del estado para React
Conceptos básicos del estado de React: Props y State
Props
Estado en componentes basados en clases
Gestión del estado con Hooks en componentes funcionales
El problema con Props y State
Biblioteca de estado Redux
Ventajas de Redux
Desventajas de Redux
Reglas básicas para la gestión del estado
Tipos de estados
Estado de datos (Data State)
Estado de comunicación (Communication State)
Estado de control (Control State)
Estado de sesión (Session State)
Estado de ubicación (Location State)
Efectos secundarios del estado de ubicación (Location State Side Effects)
Capítulo 9 – Uso de React Hooks
Limitaciones de los Componentes Funcionales
Visión General de los Hooks
Reglas de los Hooks
Ejemplo de Linter de React
Props de los Componentes Funcionales
El Hook useState
Ejemplo de Componente Funcional usando el Hook useState
useState con Múltiples Variables
El Hook useState también se puede usar con Objetos
El Hook useEffect
Ejemplo de Hook useEffect
Uso del Hook useEffect para Cargar Datos
Restricción del Momento en que se Llama al Hook useEffect
El Hook useContext
Hooks Adicionales
El Hook useReducer
Un Ejemplo de Función Reductora
Llamando y Usando useReducer
El Hook useMemo
Ejemplo de useMemo
El Hook useCallback
Ejemplo de useCallback
El Hook useRef
Usando useRef para Almacenar Valores
El Hook useImperativeHandle
Ejemplo de useImperativeHandle
El Hook useLayoutEffect
Capítulo 10 – Pruebas Unitarias de React con React Testing Library
Marco de Pruebas de React
Características
Pruebas de Instantáneas (Snapshot)
Cobertura de Código
Modo Interactivo
Proyectos creados con create-react-app
Prueba del Componente de Aplicación Predeterminado
Pruebas Unitarias
Anatomía de una Prueba Unitaria
Matchers Comunes
Combinación de Pruebas
Ejecución de Pruebas
Prueba de Código Asíncrono basado en Promesas con ‘done’
Configuración y Limpieza (Setup y Teardown)
react-testing-library
Una Prueba Simple de Componente
Una Prueba Simple de Instantánea (Snapshot)
Ejecución y Actualización de Pruebas de Instantáneas
Creación de Pruebas de Componentes
Llamando a Render
Propiedades de Renderizado
Simulación de Eventos
Pruebas de Resultados
Uso de Funciones de Consulta (Query Functions)
Coincidencia de Texto
Componente «Counter»
counter-test.js
Capítulo 11 – Introducción a MongoDB
MongoDB
Características de MongoDB
MongoDB en la Web
Posicionamiento de MongoDB
Aplicaciones de MongoDB
Modelo de Datos de MongoDB
Limitaciones de MongoDB
Casos de Uso de MongoDB
Lenguaje de Consulta de MongoDB (QL)
Las Operaciones CRUD
El Método find
El Método findOne
Un Ejemplo de Lenguaje de Consulta de MongoDB (QL)
Inserciones
MongoDB vs Apache CouchDB
Capítulo 12 – Trabajando con Datos en MongoDB
Lectura de Datos en MongoDB
La Interfaz de Consulta
La Sintaxis de la Consulta es Específica del Controlador
Proyecciones
Operadores de Consulta y Proyección
Comparación de Consulta de MongoDB con el SELECT de SQL
Cursores
Expiración del Cursor
Escritura de Datos en MongoDB
Un Ejemplo de Operación de Inserción
La Operación de Actualización
Opciones de la Operación de Actualización
Un Ejemplo de Operación de Actualización
Un Ejemplo de Operación de Eliminación
Limitación de los Datos Devueltos
Ordenación de Datos
Agregación de Datos
Etapas de Agregación
Acumuladores
Un Ejemplo de una Tubería de Agregación
Map-Reduce
Capítulo 13 – Introducción a Node.js
¿Qué es Node.js?
Aplicaciones de Node.js
Instalación de Node.js y NPM
«Primera App en Node!»
Cómo Funciona
Node.js está basado en JavaScript: Ventajas
Modelo Tradicional de E/S del Lado del Servidor
Desventajas del Enfoque Tradicional
E/S basada en Eventos y No Bloqueante
Concurrencia
Uso de Node Package Manager (NPM)
El Marco de Servidor Express
Capítulo 14 – Desarrollo Básico de Aplicaciones Web
Introducción al Módulo HTTP
La Función de Devolución de Llamada del Manejador de Solicitudes
El Objeto Servidor
Ejemplo de Uso del Objeto Servidor
El Objeto Solicitud
El Objeto Respuesta
Análisis del Cuerpo de la Solicitud
Servir Archivos Estáticos
La API del Cliente HTTP
Realización de Solicitudes POST/PUT/etc.
Capítulo 15 – Introducción a Express
Introducción a Express
Ejemplo Básico de Enrutamiento
Definición de Reglas de Enrutamiento
Ruta de Enrutamiento
El Objeto de Respuesta (Response Object)
Suministro de Parámetros de URL
Orden de las Rutas
Definición de Ruta para Capturar Todo (Catch All Route)
Ejemplo Completo de Servicio Web
Capítulo 16 – Middleware de Express
Introducción a Middleware en Express
Creación de una Función de Middleware
Asociación a una Ruta
Orden de Ejecución
Generación de Errores
Manejo de Errores
Servir Archivos Estáticos
Manejo del Cuerpo de una Solicitud POST
Habilitar Compresión de Respuesta
Capítulo 17 – Acceso a MongoDB desde Node.js
Primeros Pasos
La URL de Conexión
Obtención de una Colección
Inserción de Documentos
Actualización de un Documento
Consulta de Documentos
Eliminación de un Documento
Conexión en Pool
Laboratorios
Laboratorio 1. Configurando un Entorno de Desarrollo React
Laboratorio 2. Componentes Básicos de React
Laboratorio 3. Conceptos Adicionales de Componentes de React
Laboratorio 4. Componentes de React en ES6
Laboratorio 5. Aplicación con React Router
Laboratorio 6. Aplicación con React Hooks
Laboratorio 7. Aprendiendo el Entorno de Laboratorio de MongoDB
Laboratorio 8. Operaciones de la Base de Datos de MongoDB
Laboratorio 9. Trabajando con Datos en MongoDB
Laboratorio 10. Creando un Servicio Web con Express
Laboratorio 11. Uso de MongoDB
Laboratorio 12. Proyecto MERN 1
Laboratorio 13. Proyecto del Curso – Aplicación de React usando Hooks
Laboratorio 14. Eventos en Node.js