React Advanced 2022

¿Eres un desarrollador de React tratando de obtener los máximos beneficios de TypeScript? Entonces esta es la masterclass para ti.En esta masterclass interactiva, comenzaremos desde lo básico y examinaremos los pros y contras de las diferentes formas en que puedes declarar componentes de React usando TypeScript. Después de eso, pasaremos a conceptos más avanzados donde iremos más allá de la configuración estricta de TypeScript. Aprenderás cuándo usar tipos como any, unknown y never. Exploraremos el uso de predicados de tipo, guardias y comprobación exhaustiva. Aprenderás sobre los tipos mapeados incorporados, así como cómo crear tus propias utilidades de mapa de tipo nuevo. Y comenzaremos a programar en el sistema de tipos de TypeScript usando tipos condicionales e inferencia de tipos.

En este masterclass, obtendrás una visión de primera mano de lo que es la seguridad de tipo de extremo a extremo y por qué es importante. Para lograr esto, construirás una API de GraphQL utilizando herramientas modernas y relevantes que serán consumidas por un cliente de React.
Prerrequisitos: - Node.js instalado en tu máquina (12.2.X / 14.X)- Se recomienda (pero no es obligatorio) utilizar VS Code para las tareas prácticas- Un IDE instalado (se recomienda VSCode)- (Bueno tener) *Un conocimiento básico de Node.js, React y TypeScript

En esta masterclass aprenderás por qué creamos FlashList en Shopify y cómo puedes usarlo en tu código hoy. Te mostraremos cómo tomar una lista que no es performante en FlatList y hacerla performante usando FlashList con mínimo esfuerzo. Usaremos herramientas como Flipper, nuestro propio código de benchmarking, y te enseñaremos cómo la API de FlashList puede cubrir casos de uso más complejos y aún así mantener un rendimiento de primera categoría.Sabrás:- Breve presentación sobre qué es FlashList, por qué lo construimos, etc.- Migrando de FlatList a FlashList- Enseñando cómo escribir una lista performante- Utilizando las herramientas proporcionadas por la biblioteca FlashList (principalmente el hook useBenchmark)- Usando los plugins de Flipper (gráfico de llamas, nuestro perfilador de listas, perfilador de UI & JS FPS, etc.)- Optimizando el rendimiento de FlashList utilizando props más avanzados como `getType`- 5-6 tareas de muestra donde descubriremos y solucionaremos problemas juntos- Preguntas y respuestas con el equipo de Shopify

¿Tu aplicación de React necesita mostrar eficientemente una gran cantidad de datos en una cuadrícula? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor cuadrícula de JavaScript en el mundo y está repleta de funciones, altamente eficiente y extensible. En este masterclass, aprenderás cómo empezar con AG Grid, cómo habilitar la ordenación y filtrado de datos en la cuadrícula, renderizado de celdas y más. Saldrás de este masterclass gratuito de 3 horas equipado con el conocimiento para implementar AG Grid en tu aplicación de React.
Todos sabemos que crear nuestra propia solución de cuadrícula no es fácil, y seamos honestos, no es algo en lo que deberíamos estar trabajando. Estamos enfocados en construir un producto y promover la innovación. En este masterclass, verás lo fácil que es empezar con AG Grid.
Prerrequisitos: React básico y JavaScript
Nivel del masterclass: Principiante

Sabemos que React es para la web y React Native es para Android e iOS. Pero ¿has oído hablar de react-native-web, para escribir una aplicación para Android, iOS y la web en un solo código base? Al igual que React Native abstrae los detalles de iOS y Android, React Native Web también abstrae los detalles del navegador. Esto abre la posibilidad de compartir aún más código entre plataformas.En este masterclass, aprenderás a configurar el esqueleto de una aplicación React Native Web que funcione de manera excelente y se vea increíble. Puedes utilizar el código resultante como base para construir la aplicación que desees, utilizando los paradigmas de React y muchas bibliotecas de JavaScript a las que estás acostumbrado. ¡Te sorprenderá la cantidad de tipos de aplicaciones que realmente no requieren un código base separado para móvil y web!Aprenderás:- Configurar navegadores de cajón y de pila con React Navigation, incluyendo la capacidad de respuesta- Configurar React Navigation con URLs- Configurar React Native Paper, incluyendo el estilo del cajón de navegación y los encabezados de React Navigation- Configurar un tema de color personalizado que admita el modo oscuro- Configurar favicons/íconos de aplicaciones y metadatos- Qué hacer cuando no puedes o no quieres proporcionar la misma funcionalidad en la web y en el móvil
Prerrequisitos:- Familiaridad con la construcción de aplicaciones con React o React Native. No es necesario conocer ambos.- Configuración de la máquina: Node LTS, Yarn, ser capaz de crear y ejecutar correctamente una nueva aplicación Expo siguiendo las instrucciones en https://docs.expo.dev/get-started/create-a-new-app/

Con el surgimiento de frameworks, como React, Vue o Angular, la forma en que se construyen los sitios web ha cambiado a lo largo de los años. Las aplicaciones modernas pueden ser muy dinámicas y realizar múltiples solicitudes de API para poblar un sitio web con contenido actualizado o enviar nuevos datos a un servidor. Sin embargo, este cambio de paradigma ha introducido nuevos problemas con los que los desarrolladores deben lidiar. Cuando una solicitud de API está pendiente, tiene éxito o falla, el usuario debe recibir una retroalimentación significativa. Otros problemas pueden incluir el almacenamiento en caché de datos de API o la sincronización del estado del cliente con el servidor. Todos estos problemas requieren soluciones que deben ser codificadas, pero pueden volverse rápidamente inmanejables y dar como resultado una base de código difícil de ampliar y mantener. En este masterclass, cubriremos cómo manejar las solicitudes de API, los estados de API y la cancelación de solicitudes mediante la implementación de una Capa de API y combinándola con React-Query.
Prerrequisitos: Para aprovechar al máximo este masterclass, debes estar familiarizado con React y Hooks, como useState, useEffect, etc. Si deseas codificar junto con nosotros, asegúrate de tener Git, un editor de código, Node y npm instalados en tu máquina.

Asegurarse de que su código esté listo para producción sin habilitar sus características para toda su base de usuarios solía implicar mucha suposición. Mediante el uso de feature flags, podemos permitir a nuestros equipos de desarrollo previsualizar características en progreso y funcionalidades no lanzadas en producción sin volver a implementar nuestro código.
En este masterclass, repasaremos los fundamentos de la flagging de características tanto en el lado del cliente como en el servidor. Cubriremos el trabajo con los SDK de LaunchDarkly dentro del contexto de una aplicación React con un backend de node, flagging en diferentes lugares de la pila y daremos una introducción al targeting de reglas en la plataforma.

¿Estás satisfecho con tus suites de pruebas? Si dijiste que no, no estás solo, la mayoría de los desarrolladores no lo están. Y hacer pruebas en React Native es más difícil que en la mayoría de las plataformas. ¿Cómo puedes escribir pruebas en JavaScript cuando el código JS y nativo están tan entrelazados? ¿Y qué diablos se supone que debes hacer con esa persistente advertencia de act()? Ante estos desafíos, algunos equipos nunca logran avanzar en las pruebas de su aplicación de React Native, y otros terminan con pruebas que no parecen ayudar y solo requieren tiempo adicional para mantener.
Pero no tiene que ser así. React Native Testing Library (RNTL) es una excelente biblioteca para pruebas de componentes, y con el modelo mental adecuado puedes usarla para implementar pruebas de bajo costo y alto valor. En este taller de tres horas aprenderás las herramientas, técnicas y principios que necesitas para implementar pruebas que te ayudarán a lanzar tu aplicación de React Native con confianza. Saldrás con una visión clara del objetivo de tus pruebas de componentes y con técnicas que te ayudarán a superar cualquier obstáculo que se interponga en ese objetivo.aprenderás:- Los diferentes tipos de pruebas en React Native, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos de texto, imagen y código nativo para verificar e interactuar con ellos- El valor de las simulaciones y por qué no se deben evitar- Los desafíos con la asincronía en las pruebas de RNTL y cómo manejarlos- Opciones para manejar funciones y componentes nativos en tus pruebas de JavaScript
Requisitos previos:- Familiaridad con la construcción de aplicaciones con React Native- Experiencia básica en la escritura de pruebas automatizadas con Jest u otro framework de pruebas unitarias- No necesitas experiencia previa con React Native Testing Library- Configuración de la máquina: Node 16.x o 18.x, Yarn, ser capaz de crear y ejecutar con éxito una nueva aplicación Expo siguiendo las instrucciones en https://docs.expo.dev/get-started/create-a-new-app/

Sumérgete en Hydrogen, un marco de trabajo basado en React para construir tiendas en línea sin cabeza. Hydrogen está diseñado para el comercio de Shopify con todas las características que necesitas para una tienda en línea lista para producción. Proporciona un inicio rápido y un entorno de desarrollo rápido para que puedas centrarte en lo divertido: construir experiencias de comercio únicas. En este masterclass, crearemos una nueva tienda en línea y construiremos rápidamente una página de producto. Cubriremos cómo empezar, enrutamiento basado en archivos, obtener datos de la API de Storefront, los componentes integrados de Hydrogen y cómo aplicar estilos con Tailwind.Aprenderás:- Empezar con la plantilla hello-world en StackBlitz- Enrutamiento basado en archivos para crear una ruta /productos/ejemplo- Enrutamiento dinámico /productos/:handle- Consultar la API de Storefront con GraphQL- Mover la consulta dentro de la aplicación de Hydrogen- Actualizar la consulta para obtener un producto por su identificador- Mostrar título, precio, imagen y descripción.- Estilizado con Tailwind- Selector de variantes y botón de compra ahora- Bonus si hay tiempo: página de colecciones
Requisitos previos: - Un navegador basado en Chromium (StackBlitz)- Idealmente experiencia con React. Un conocimiento general de desarrollo web también es válido.

Aprende cómo construir aplicaciones web desde el diseño en Figma hasta la implementación en AWS mientras te mueves muy rápido.

En este curso intensivo, crearemos un nuevo proyecto en el CMS headless, lo llenaremos con datos y utilizaremos el contenido para construir una aplicación Next.js multilingüe. Pasaremos mucho tiempo en el código para:- Generar modelos y estructuras de tipo fuertemente tipados para el contenido- Configurar el sitio para varios idiomas- Utilizar los códigos de idioma respectivos en la obtención de contenido e incorporar fallbacks de idioma- Resolver contenido multilingüe de campos de texto enriquecido
Aprenderás:- Cómo trabajar con contenido de un CMS headless (Kontent.ai)- Cómo se puede aprovechar el modelo de contenido para generar tipos de TS y qué beneficios aporta a tu proyecto- Cómo agregar capacidades multilingües a un sitio web Next.js- Cómo utilizar fallbacks de idioma- Cuáles son los problemas típicos al trabajar con contenido multilingüe

En este masterclass, recorreremos los enfoques más efectivos para construir componentes de UI escalables que mejoren la productividad y felicidad del desarrollador :-) Esto implicará una combinación de ejercicios prácticos y presentaciones, que cubrirán los aspectos más avanzados de la popular biblioteca styled-components, incluyendo la tematización e implementación de utilidades styled-system a través de props de estilo para un desarrollo rápido de UI, y culminando en cómo puedes construir tu propia biblioteca de componentes personalizada y escalable.
Nos enfocaremos tanto en el escenario ideal, donde trabajas en un proyecto nuevo, como en tácticas para adoptar incrementalmente un sistema de diseño y enfoques modernos para el estilo en una base de código existente con algo de deuda técnica (¡que suele ser el caso!). Al final del masterclass, deberías sentir que comprendes los compromisos entre diferentes enfoques y sentirte seguro para comenzar a implementar las opciones disponibles para avanzar hacia el uso de una biblioteca de componentes basada en un sistema de diseño en la base de código en la que trabajas.
Prerrequisitos: - Familiaridad y experiencia trabajando en grandes bases de código de React- Una buena comprensión de los enfoques comunes para el estilo en React

En este masterclass, integrarás un sitio web desacoplado de Gatsby Shopify en el editor visual en tiempo real de Storyblok.1. Conecta Gatsby con Shopify y construye el catálogo2. Construye la funcionalidad del carrito de compras utilizando shopify-buy3. Conecta Gatsby con Storyblok4. Construye componentes editables para el editor visual de Storyblok, incluyendo productos y colecciones de Shopify
Requisitos previosComputadora lista para Gatsby.
Nivel del masterclassIntermedio en React y Gatsby.

En este masterclass cubriremos los conceptos básicos de GraphQL y luego utilizaremos ese conocimiento para construir un backend utilizando SDL. Una vez que hayamos creado nuestro esquema, lo ejecutaremos localmente, lo desplegaremos en producción y crearemos ramas de despliegue para cualquier cambio en nuestro esquema. Terminaremos el masterclass obteniendo datos de nuestro backend desde el frontend, así como agregando autenticación para proteger el acceso a los datos.
Configuración en Mac con Node y NPM (si deseas seguirlo localmente). De lo contrario, una cuenta en CodeSandbox servirá.

Cualquiera puede escribir código que 'funcione'. Pero lo que distingue a los mejores ingenieros es su capacidad para crear soluciones claras, concisas, testables y fáciles de entender y mantener. Únete a nosotros mientras exploramos dos de las herramientas más poderosas de React para soluciones bien estructuradas, comenzando con una base de código de juego subóptima y refactorizándola utilizando las mejores prácticas de la industria, como custom hooks, higher-order components (HOCs) y contextos.- Introducción de la implementación inicial y descripción de sus problemas.- Presentación de las herramientas disponibles para mejorar la base de código.- La mentalidad detrás de la arquitectura de soluciones limpias y la refactorización.- Pasada en alto del código y creación del plan.- Extracción del código en funciones de utilidad.- Extracción del estado y los efectos en custom hooks.- Agrupación del comportamiento en HOC.- Creación de un contexto a nivel de raíz y limpieza de los componentes secundarios.- Resumen del resultado y discusión de posibles mejoras futuras.- Cómo mantener tu código limpio, reglas a seguir y limitaciones a imponer.
PrerrequisitosUna computadora con git instalado y una cuenta de GitHub.