Descripción
Descripción del Curso de ReactJS
Este curso de ReactJS está diseñado para aquellos profesionales que deseen adquirir habilidades sólidas en el desarrollo de interfaces de usuario modernas y reactivas utilizando React, la popular biblioteca de JavaScript. A lo largo del curso, los estudiantes serán guiados a través de conceptos fundamentales y avanzados de React, y aprenderán a construir aplicaciones web de alto rendimiento y componentes reutilizables.
Los tópicos centrales del curso son
- Visión general de React
- Componentes básicos y JSX
- Conceptos Funcionales de Componentes React
- Enrutador React
- Gestión de estados para React
- Construyendo Aplicaciones React con Redux
- Uso de React Hooks
- Creación de ganchos React personalizados
- Pruebas unitarias de React con React Testing Library
Objetivos
Los objetivos de este curso se detallan por capítulo como sigue:
Capítulo 1 Visión general de React
- Comprender los conceptos básicos de React y su arquitectura.
- Familiarizarse con el Virtual DOM y cómo React optimiza el rendimiento de las aplicaciones web.
- Aprender sobre el entorno de desarrollo y las herramientas necesarias para trabajar con React.
Capítulo 2 Componentes básicos y JSX
- Explorar la creación de componentes básicos en React.
- Entender y utilizar JSX (JavaScript XML) para describir la interfaz de usuario de manera declarativa.
- Aprender cómo renderizar componentes en la página web y cómo estructurar la jerarquía de componentes.
Capítulo 3 Conceptos Funcionales de Componentes React
- Profundizar en los componentes funcionales de React y su importancia en el desarrollo moderno de React.
- Aprender a pasar propiedades (props) a los componentes funcionales para personalizar su comportamiento.
- Comprender cómo manejar eventos y actualizaciones de estado en componentes funcionales.
Capítulo 4 Enrutador React (React Router)
- Explorar React Router, una librería que permite la navegación entre diferentes vistas en una aplicación React de una sola página (SPA).
- Aprender a configurar rutas y enrutadores para crear una experiencia de usuario fluida en aplicaciones de varias páginas.
Capítulo 5 Gestión de estados para React
- Comprender el manejo del estado (state) en React y su importancia para mantener la coherencia de la interfaz de usuario.
- Explorar diferentes enfoques para el manejo del estado, como el estado local, el levantamiento de estados y el uso de bibliotecas de gestión del estado.
Capítulo 6 Construyendo Aplicaciones React con Redux
- Aprender a utilizar Redux, una biblioteca de gestión del estado, con React para administrar el estado global de la aplicación.
- Comprender los conceptos de acciones, reducers y el store de Redux, y cómo se integran con los componentes de React.
Capítulo 7 Uso de React Hooks
- Explorar los React Hooks, una característica introducida en versiones recientes de React, para trabajar con el estado y los ciclos de vida en componentes funcionales.
- Aprender a utilizar useState, useEffect y otros hooks para simplificar el desarrollo de componentes.
Capítulo 8 Crear Hooks React personalizados
- Aprender a crear y utilizar hooks personalizados para abstraer la lógica compartida entre componentes.
- Comprender cómo los hooks personalizados pueden mejorar la reutilización de código y mantener una base de código más limpia.
Capítulo 9 Pruebas unitarias de React
- Introducción a la prueba de unidades para componentes de React utilizando React Testing Library.
- Aprender a escribir pruebas para comprobar el comportamiento y la funcionalidad de los componentes React.
Al finalizar este curso, los estudiantes tendrán una comprensión profunda de ReactJS y serán capaces de desarrollar aplicaciones web completas, interactivas y de alto rendimiento utilizando componentes reutilizables y herramientas avanzadas como React Router, Redux y React Hooks. Además, podrán implementar pruebas para garantizar la calidad del código y mejorar sus habilidades como desarrolladores de React.
Requisitos previos para el Curso de ReactJS :
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-2 días de nuestro curso de Introducción a JavaScript para cumplir con este requisito previo si es necesario. Por favor, pregunte a su vendedor para 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 ReactJS
Capítulo 1. Resumen de React
¿Qué es React?
¿Qué hay en un nombre?
Modelo de Componente en React
Lo que React no es
Lo que no encontrarás en React
Motivación para crear React
Un ejemplo de React en JavaScript
Flujo de datos unidireccional
JSX
Un ejemplo de JSX
El DOM Virtual (Mock)
Solo se vuelven a renderizar los subcomponentes que cambian realmente
create-react-app
Capítulo 2. Componentes Básicos y JSX
¿Qué es JSX?
Ejemplo de transpilación de JSX a código de React
Ejecutando el código transpilado
Babel
Jugando en CodePen
Componentes de React
Creando un ejemplo de componente funcional
Los nombres de los componentes deben empezar con mayúscula
Componentes vs. Elementos
Los elementos son inmutables
Propiedades (Props)
Convención de nombres para las propiedades
Las propiedades tienen un valor predeterminado de ‘True’
Atributos Spread (una característica de ES6)
Expresiones
Fragmentos
Capítulo 3. Conceptos de Componentes Funcionales en React
Componentes Funcionales
Anidando elementos JSX
Ejemplo de anidamiento JSX
Comentarios en el código JSX
Estableciendo estilos CSS usando clases
Estableciendo estilos CSS directamente
JSX escapa los valores
Trabajando con listas de elementos
Claves (keys) en listas
Ejemplo de lista con clave
Estado (State)
Tipos de datos de estado
Jerarquía de estado
Elevación del estado (Lifting State Up)
Props vs. State
Pasando una función como prop
Inmutabilidad
Inmutabilidad: ¿por qué es importante?
DOM Virtual y estado
Estableciendo el estado
Actualizando campos de entrada (input fields)
Pasando props a componentes
Pasando funciones a componentes
Manejo de eventos
Ejemplo de manejador de eventos
Vinculación de eventos – Buenas prácticas
Vinculación de eventos – Malas prácticas
Pasando parámetros a los manejadores de eventos
Ciclo de vida del componente
Ciclo de vida en componentes funcionales
Flujo de desarrollo de una aplicación – 1/3
Flujo de desarrollo de una aplicación – 2/3
Flujo de desarrollo de una aplicación – 3/3
Capítulo 4. React Router
Enrutamiento y navegación
react-router
Creando un proyecto basado en react-router
Un componente básico con enrutamiento
Router vs. BrowserRouter
El componente Route
Redireccionar ruta (Redirect Route)
Navegación con Link
Navegación con NavLink
Parámetros de ruta
Recuperando parámetros de ruta
Parámetros de consulta (QueryString)
Uso de Router con Redux
Capítulo 5. Gestión de Estado para React
Conceptos Básicos de Estado en React: Props y State
Props
Estado en Componentes Basados en Clases
Gestionando el 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 de Estado
Tipos de Estado
Estado de Datos
Estado de Comunicación
Estado de Control
Estado de Sesión
Estado de Ubicación
Efectos Secundarios del Estado de Ubicación
Capítulo 6. Construyendo Aplicaciones de React con Redux
Redux
Terminología de Redux
Principios de Redux
Redux: Acciones
Tipos de Acciones de Redux
Creadores de Acciones
Despachando Acciones
Fundamentos del Flujo de Datos
Redux: Reductores
Funciones Puras
Ejemplo de Reductor
Retornando el Estado Predeterminado
Creando un Entorno de Desarrollo con create-react-app
Uso de Redux con React
Inicializando la Tienda (Store)
Inmutabilidad
Beneficios del Estado Inmutable
Mutabilidad de los Tipos Estándar
Copiando Objetos en JavaScript
Copiando Arreglos en JavaScript
Una Tienda – Múltiples Reductores
Combinando Reductores
Componentes y Redux
El Paquete React-Redux
Envolviendo la Aplicación con Provider
mapStateToProps
mapDispatchToProps
Uso de Propiedades y Métodos Mapeados
Envolviendo Componentes con Connect
Configurando la Tienda
Consejo de Programación – Consola Multi-pestaña
Capítulo 7. Uso de React Hooks
Limitaciones de los Componentes Funcionales
Visión General de los Hooks
Reglas de los Hooks
Ejemplo de React Linter
Props en Componentes Funcionales
El Hook useState
Ejemplo de Componente Funcional usando el Hook useState
useState con Múltiples Variables
useState también se puede usar con Objetos
El Hook useEffect
Ejemplo de Hook useEffect
Usando el Hook useEffect para Cargar Datos
Restringiendo Cuándo se Llama useEffect
El Hook useContext
Hooks Adicionales
El Hook useReducer
Una Función Reductora de Ejemplo
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 8. Creando Hooks Personalizados en React
Hooks Personalizados
Hook Personalizado de Mensajes
Uso del Hook Personalizado de Mensajes
Un Hook Personalizado useList
Uso del Hook Personalizado useList
El Hook useDebugValue incorporado
Visualización del Efecto del Hook useDebugValue
Capítulo 9. Pruebas Unitarias de React con React Testing Library
Marco de Pruebas de React
Características
Pruebas de Snapshot
Cobertura de Código
Modo Interactivo
Proyectos creados con create-react-app
Prueba por Defecto del Componente App
Pruebas Unitarias
Anatomía de una Prueba Unitaria
Matchers Comunes
Combinando Pruebas
Ejecución de Pruebas
Pruebas de Código Asíncrono basado en Promesas con ‘done’
Configuración y Limpieza
react-testing-library
Una Prueba Simple de Componente
Una Prueba Simple de Snapshot
Ejecución y Actualización de Pruebas de Snapshot
Construyendo Pruebas de Componentes
Llamando a Render
Propiedades de Render
Ejercicios Prácticos – Laboratorios Curso de ReactJS
Laboratorio 1. Configuración de un Entorno de Desarrollo React
Laboratorio 2. Componentes Básicos de React
Laboratorio 3. Conceptos Adicionales de Componentes en React
Laboratorio 4. Aplicación con React Router
Laboratorio 5. Aplicación con React Redux
Laboratorio 6. Aplicación con React Hooks
Laboratorio 7. Hooks Personalizados en React
Laboratorio 8. Pruebas Unitarias con Jest
Laboratorio 9. Proyecto del Curso – Aplicación React usando Hooks
Laboratorio 10. [OPCIONAL] Manejo de Excepciones en JavaScript
Laboratorio 11. [OPCIONAL] Programación Asíncrona con Promesas