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:

1. 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.
2. Tecnologías principales de frontend como HTTP, HTML, CSS, DOM y herramientas de desarrollo del navegador.
3. 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