React Summit 2022

En esta masterclass, aprenderás cómo construir una aplicación Next.js que utiliza Apollo Client para obtener datos de un backend de WordPress sin cabeza y usarlo para renderizar las páginas de tu aplicación. Aprenderás cuándo debes considerar una arquitectura de WordPress sin cabeza, cómo convertir un backend de WordPress en un servidor GraphQL, cómo componer consultas usando el IDE GraphiQL, cómo colocar fragmentos GraphQL con tus componentes, y más.

A diferencia de las pruebas unitarias, las pruebas de extremo a extremo buscan interactuar con su aplicación tal como lo haría un usuario real. Y como todos sabemos, puede ser bastante desafiante. Especialmente cuando hablamos de aplicaciones móviles.
Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden dar la mayor confianza de que su aplicación está funcionando. Y si se hace correctamente, puede convertirse en una herramienta increíble para aumentar la velocidad del desarrollador.
Detox es un marco de pruebas de extremo a extremo en caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y utilizado por React Native en sí como su herramienta de pruebas E2E.
Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean excelentes.
Prerrequisitos- iOS/Android: MacOS Catalina o más reciente- Solo Android: Linux- Instalar antes de la masterclass

Construir aplicaciones web modernas está lleno de complejidad. Y eso solo si te molestas en lidiar con los problemas
¿Cansado de conectar onSubmit a las API del backend y asegurarte de que tu caché del lado del cliente se mantenga actualizada? ¿No sería genial poder utilizar la naturaleza global de CSS en tu beneficio, en lugar de buscar herramientas o convenciones para evitarla o trabajar alrededor de ella? ¿Y qué te parecería tener diseños anidados con una gestión de datos inteligente y optimizada para el rendimiento que simplemente funciona™?
Remix resuelve algunos de estos problemas y elimina completamente el resto. Ni siquiera tienes que pensar en la gestión de la caché del servidor o en los conflictos del espacio de nombres global de CSS. No es que Remix tenga APIs para evitar estos problemas, simplemente no existen cuando estás usando Remix. Ah, y no necesitas ese enorme y complejo cliente graphql cuando estás usando Remix. Ellos te tienen cubierto. ¿Listo para construir aplicaciones más rápidas de manera más rápida?
Al final de esta masterclass, sabrás cómo:- Crear Rutas de Remix- Estilizar aplicaciones de Remix- Cargar datos en los cargadores de Remix- Mutar datos con formularios y acciones

Comienza con la Rejilla de Datos React de AG Grid con un tutorial práctico del equipo central que te llevará a través de los pasos para crear tu primera rejilla, incluyendo cómo configurar la rejilla con propiedades simples y componentes personalizados. La edición comunitaria de AG Grid es completamente gratuita para usar en aplicaciones comerciales, por lo que aprenderás una herramienta poderosa que puedes agregar inmediatamente a tus proyectos. También descubrirás cómo cargar datos en la rejilla y diferentes formas de agregar renderizado personalizado a la rejilla. Al final de la masterclass, habrás creado una Rejilla de Datos React de AG Grid y personalizado con componentes React funcionales.- Comenzando e instalando AG Grid- Configurando ordenación, filtrado, paginación- Cargando datos en la rejilla- La API de la rejilla- Usando hooks y componentes funcionales con AG Grid- Capacidades de la edición comunitaria gratuita de AG Grid- Personalizando la rejilla con Componentes React

Cuanto más grande se vuelve una base de código, más difícil se vuelve mantenerla. Todos los procesos informales de un equipo pequeño deben ser sistematizados y respaldados con herramientas a medida que el equipo crece. Ven y aprende cómo Nx permite a los desarrolladores centrarse más en el código de la aplicación y menos en las herramientas.
Construiremos un monorepo desde cero, creando una aplicación cliente y una aplicación de servidor que comparten una biblioteca de tipos de API. Aprenderemos cómo Nx utiliza ejecutores y generadores para hacer que la experiencia del desarrollador sea más consistente en todos los proyectos. Luego crearemos nuestros propios ejecutores y generadores para procesos que son únicos en nuestra organización. También exploraremos el creciente ecosistema de complementos que permiten la integración fluida de frameworks y bibliotecas.

Next.js es un marco convincente que facilita muchas tareas al proporcionar muchas soluciones listas para usar. Pero tan pronto como nuestra aplicación necesita escalar, es esencial mantener un alto rendimiento sin comprometer el mantenimiento y los costos del servidor. En este masterclass, veremos cómo analizar el rendimiento de Next.js, el uso de recursos, cómo escalarlo y cómo tomar las decisiones correctas al escribir la arquitectura de la aplicación.

Cómo construir una aplicación GraphQL fullstack (Postgres + NestJs + React) en el menor tiempo posible.
Todos los comienzos son difíciles. Incluso más difícil que elegir la tecnología es desarrollar una arquitectura adecuada. Especialmente cuando se trata de GraphQL.
En este masterclass, obtendrás una variedad de mejores prácticas que normalmente tendrías que trabajar en varios proyectos, todo en solo tres horas.
Siempre has querido participar en un hackathon para poner algo en funcionamiento en el menor tiempo posible, entonces participa activamente en este masterclass y únete a los procesos de pensamiento del instructor.

En este masterclass, veremos cómo crear una base de conocimientos utilizando Gatsby, un Framework generador de sitios estáticos que utiliza React y GraphQL, Contentful, un CMS sin cabeza para gestionar el contenido y desplegarlo en AWS S3.

Entonces, tienes una increíble aplicación de React que has construido y quieres llevarla de tu navegador web a la App Store. Seguro, hay muchas opciones aquí, pero la mayoría requerirá que mantengas aplicaciones separadas para cada plataforma. Quieres que tu base de código sea lo más cercana posible en la Web, Android e iOS. Afortunadamente, con Capacitor, ¡puedes tomar tu aplicación web existente y crear rápidamente aplicaciones nativas para iOS y Android para distribuirlas en tu App Store favorita!
Este masterclass está dirigido a desarrolladores intermedios que tienen una aplicación de React existente o están interesados en el desarrollo móvil con React. Repasaremos:
¿Qué es Capacitor?¿Cómo se compara con otras soluciones multiplataforma?Usando Capacitor para construir una aplicación nativa utilizando tu código web existenteMejorando nuestra aplicación para su distribución en las tiendas de aplicaciones móviles con convenciones de nombres, iconos, pantallas de inicio y más.

Introducción a serverlessAntecedentes: Docker, Contenedores y KubernetesActividad: Construir una aplicación con Docker y desplegarla en un proveedor de nubeAnálisis: ¿Qué es bueno/malo de este enfoque?Por qué se necesita/mejora ServerlessActividad: Construir la misma aplicación con serverlessAnálisis: ¿Qué es bueno/malo de este enfoque?

A menudo vemos que JavaScript daña la accesibilidad de un sitio web. En esta masterclass, aprenderás cómo evitar errores comunes y cómo utilizar JS a tu favor para mejorar la accesibilidad de tus aplicaciones web.
En esta masterclass exploraremos múltiples ejemplos del mundo real con problemas de accesibilidad, y aprenderás cómo hacer que funcionen para las personas que utilizan un mouse o un teclado. También aprenderás cómo se utilizan los lectores de pantalla, ¡y te mostraré que no hay razón para tener miedo de usar uno!
Únete a mí y déjame mostrarte cómo la accesibilidad no limita tus soluciones o habilidades. ¡Al contrario, las hace más inclusivas!
Al final, serás capaz de:- Comprender los principios de WCAG y cómo están organizados- Conocer casos comunes en los que JavaScript es esencial para la accesibilidad- Crear enlaces, botones y elementos conmutables inclusivos- Utilizar regiones en vivo para errores y estados de carga- Integrar la accesibilidad en el flujo de trabajo de tu equipo de inmediato- Darte cuenta de que crear sitios web accesibles no es tan difícil como parece ;)

Sumérgete en Hydrogen, un marco basado en React impulsado por Shopify. En este masterclass, exploraremos el marco y pondremos en marcha una tienda personalizada rápidamente. Aprenderás cómo (y cuándo) aprovechar los Componentes del Servidor de React y los mecanismos de almacenamiento en caché para construir tiendas personalizadas rápidas y dinámicas.

Existen muchos caminos que podemos tomar para convertirnos en desarrolladores de web3. No todos los caminos requieren aprender un lenguaje completamente nuevo y convertirse en desarrollador de contratos inteligentes. En este masterclass aprenderemos cómo construir nuestra propia interfaz de usuario React sobre cualquier contrato inteligente existente en la blockchain de Prueba de Participación de Polygon. Exploraremos una visión general básica de las blockchains y aprenderemos sobre las ventajas de construir en Polygon. También obtendremos una comprensión de qué son los contratos inteligentes, aprenderemos cómo encontrar los existentes y conoceremos herramientas que nos ayudarán a interactuar con ellos desde una aplicación React.

El masterclass está diseñado para ayudar a los desarrolladores Web2 a comenzar a construir para Web3 utilizando el Hyperverse. El Hyperverse es un mercado abierto de módulos inteligentes construidos por la comunidad, auditados y fáciles de descubrir. Nuestro objetivo es hacer que sea fácil para los desarrolladores de React construir aplicaciones Web3 sin escribir una sola línea de código de contrato inteligente. Piensa en 'npm para contratos inteligentes'.
Aprende más sobre el Hyperverse aquí.
Repasaremos todos los conceptos básicos de blockchain/crypto que necesitas saber para comenzar a construir en el Hyperverse, por lo que no necesitas tener ningún conocimiento previo sobre el espacio Web3. Solo necesitas tener experiencia en React.

¿Listo para comenzar tu carrera como freelance o recién estás comenzando en tu viaje freelance? Estás en el lugar correcto. Aprende de la fuerza laboral totalmente distribuida más grande del mundo.
El movimiento de talento independiente es el futuro del trabajo. Si estás considerando dejar el empleo a tiempo completo para una carrera como freelancer, ahora es el momento de encontrar tu espacio exitoso en la fuerza laboral de talento independiente. Más personas están trabajando como freelance hoy que nunca antes, y el mercado freelance ahora contribuye con $1.2 billones a la economía de los Estados Unidos. Algunos de los roles más demandados para freelancers en este momento son desarrolladores senior con experiencia profesional en React, Python, Blockchain, QA y Node.js.
Este masterclass te ayudará a diseñar una carrera de freelance/contratación sostenible y rentable a tiempo completo (o parcial). Te proporcionaremos herramientas, consejos, mejores prácticas y te ayudaremos a evitar errores comunes.
Al final del masterclass habrá una sesión de preguntas y respuestas con un Desarrollador Freelance que puede responder tus preguntas y brindar información y consejos sobre su propio éxito.
¡Durante el descanso del masterclass, realizaremos un desafío de codificación rápida! Al final del masterclass, otorgaremos un premio al ganador y mostraremos la tabla de clasificación.
Te haremos iniciar sesión en nuestro portal y completar el desafío lo más rápido posible para ganar puntos. Los puntos se asignan en función de la dificultad y la velocidad con la que resuelvas las tareas. En caso de que completes todas las tareas, obtendrás puntos extra por el tiempo restante. Verás tu puntaje, clasificación y la tabla de clasificación una vez que completes el desafío.
Estaremos regalando tres Tarjetas de Regalo de Amazon ($200, $100, $75) para los tres primeros ganadores.

En este masterclass, primero te mostraré cómo crear un nuevo proyecto en un CMS sin cabeza, llenarlo con datos y usar el contenido en tu proyecto. Luego, pasaremos el resto del tiempo en código, haremos lo siguiente:- Generar modelos y estructuras de tipo fuertemente tipados para el contenido obtenido.- Usar el contenido en componentes- Resolver contenido de campos de texto enriquecido en componentes de React- Tocar los pipelines de implementación y las posibilidades de descubrir problemas relacionados con el contenido antes de llegar a producción
Aprenderás:- Cómo trabajar con contenido de un CMS sin cabeza- Cómo se puede aprovechar el modelo de contenido para generar tipos en TypeScript y qué beneficios aporta a tu proyecto- Cómo dejar de usar literales de cadena para el contenido en el código- Cómo resolver texto enriquecido en componentes de React- Cómo minimizar o evitar problemas relacionados con el contenido antes de llegar a producción