Formación : ReactJS, programación avanzada

ReactJS, programación avanzada




Originalmente una simple herramienta interna para Facebook, React se ha convertido en una de las principales bibliotecas JavaScript de código abierto. Este curso de formación le proporcionará un conocimiento más profundo de React y le ayudará a descubrir los últimos avances y el ecosistema que necesita para diseñar aplicaciones web aún más avanzadas.


ABIERTA
IN-COMPANY
A MEDIDA

Formación en tus instalaciones, en nuestro centro o a distancia

Ref. RJS
  3d - 21h00
Duración, formato, fechas y lugar: ¡Tú decides, nosotros nos encargamos de organizarlo!

Descargar en formato pdf

Compartir este curso por correo electrónico




Originalmente una simple herramienta interna para Facebook, React se ha convertido en una de las principales bibliotecas JavaScript de código abierto. Este curso de formación le proporcionará un conocimiento más profundo de React y le ayudará a descubrir los últimos avances y el ecosistema que necesita para diseñar aplicaciones web aún más avanzadas.


Objetivos pedagógicos
Una vez finalizada la formación, el participante podrá:
Comprensión de conceptos avanzados de ReactJS
Optimización del rendimiento de las aplicaciones ReactJS
Mejorar la calidad del código producido
Integrar las distintas bibliotecas externas esenciales
Mejore la experiencia del usuario con las funciones avanzadas de Redux

Público afectado
Desarrolladores web, arquitectos.

Requisitos previos
Experiencia previa en React y Redux y/o el curso "ReactJS, dominando el framework JavaScript de Facebook" (Ref. TJS).

Programa de la formación

1
Introducción

  • ES6+ y módulos.
  • Los principios clave de React: VirtualDOM, JSX, Flujo de datos unidireccional.
  • Descubre el ecosistema de herramientas ReactJS.
Trabajo práctico
Configuración de un entorno de desarrollo optimizado para React y una aplicación web inicial que servirá de hilo conductor para los capítulos posteriores.

2
Buenas prácticas de desarrollo

  • Recordatorios de productividad: prop-types y DefaultProps, hoja de componentes con StoryBook.
  • Tipado de código con flow o TypeScript.
  • Establecimiento de pruebas unitarias y funcionales.
  • Creación rápida de prototipos de componentes y soluciones.
Trabajo práctico
Mejora de la calidad de las aplicaciones gracias a la mecanografía y las pruebas automatizadas.

3
Técnicas avanzadas y patrones de diseño

  • El patrón de componentes de orden superior (HOC).
  • Renderizado en elementos DOM remotos mediante portales.
  • "React hooks" programación funcional: useEffect, useState.
  • React: creación de "customHooks" para distribuir lógica personalizada.
  • Inyección de dependencia con contextos.
Trabajo práctico
Implementación de contextos y portales en la aplicación red wire. Creación de componentes funcionales y uso de hooks.

4
Redux avanzado

  • Recordatorio de Redux: las diferentes entidades, sintaxis básica e integración con React.
  • Simplifique y optimice la creación de formularios con Redux Form.
  • Mejore la experiencia del usuario con Redux Persist y el almacenamiento de estado local.
  • Crear middleware Redux Custom.
Trabajo práctico
Convertir un formulario a Redux Form y guardar la navegación.

5
Optimizar el rendimiento

  • ¿Cómo optimizar el ciclo de vida de los componentes?
  • Utilice la inmutabilidad para acelerar y simplificar el procesamiento.
  • Componentes puros.
  • API para la optimización de React.Suspense React.Lazy, modo concurrente y React.Cache.
  • Renderizado del lado del servidor con NextJS.
Trabajo práctico
Implementación de código dividido con React.Lazy y Suspense.

6
Eventos/transiciones

  • Animar componentes "a mano" utilizando animaciones y transiciones CSS.
  • Simplifique su trabajo con React Transition Group.
  • Profundización en las principales bibliotecas de animación: comparación y ejemplos de aplicación.
Trabajo práctico
Añadida transición para la aparición/desaparición de diferentes pantallas.

7
Internacionalización

  • Internacionalización frente a localización: diferencias y escenarios de uso.
  • Las principales librerías de internacionalización.
  • Integración con React y Redux.
Trabajo práctico
Traducción de la aplicación Red Wire y gestión del cambio de idioma.