React Day Berlin 2022

Usar una biblioteca puede parecer fácil a primera vista, pero ¿cómo eliges la biblioteca correcta? ¿Cómo actualizas una existente? ¿Y cómo te abres camino a través de la documentación para encontrar lo que quieres?
En esta masterclass, discutiremos todos estos puntos finos mientras pasamos por un ejemplo general de construcción de un editor de código usando CodeMirror en React. Todo mientras compartimos algunas de las sutilezas que nuestro equipo aprendió sobre el uso de esta biblioteca y algunos problemas que encontramos.

- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión

¿Alguna vez te has preguntado cómo funciona React?¿Cómo sería crear las líneas mágicas que componen la herramienta que todos aprendimos y amamos?Acompáñanos en nuestro viaje para implementar React desde cero, haciendo que un proyecto React simple funcione con tu propia biblioteca my-react.js.
Qué incluye- Introducción- Renderizando nuestro primer componente- Ciclo de actualización y el VDOM- Conoce los hooks
Requisitos previos- Algunos conocimientos de React.

¿Eres un desarrollador de React que intenta obtener los mayores beneficios de TypeScript? Entonces este es el masterclass para ti.
En este masterclass interactivo, comenzaremos desde lo básico y examinaremos los pros y los contras de las diferentes formas en que puedes declarar componentes de React utilizando TypeScript. Después de eso, nos moveremos 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, guards y comprobación exhaustiva. Aprenderás sobre los tipos mapeados incorporados, así como cómo crear tus propias utilidades de mapeo de tipos. Y comenzaremos a programar en el sistema de tipos de TypeScript utilizando tipos condicionales e inferencia de tipos.

Es posible que ya hayas leído sobre Jamstack. Probablemente ya hayas utilizado Next.js y recientemente hayas escuchado mucho sobre los CMS sin cabeza. Este curso rápido pondrá todas las piezas juntas y te mostrará por qué Storyblok, combinado con Next.js, es la mejor combinación para tu próximo proyecto. ¡Ven y pruébalo tú mismo!
- Conocimiento profundo de Jamstack. Cómo ha cambiado desde los tiempos antiguos hasta el mundo moderno. Aprende cómo se creó Jamstack comparando los sitios estáticos y los sitios dinámicos.- Cómo Next.js sirve contenido y cómo se sirve el contenido con la generación de sitios estáticos (SSG).- Metodología de diseño atómico y cómo se aplica al sistema de gestión de contenido.- Experiencia práctica en proyectos construyendo un proyecto Jamstack con Next.js y Storyblok.
Requisitos previos- Cualquier editor de texto. Se recomienda Visual Studio Code- Node.js LTS- NPM o Yarn- Cuenta de GitHub- Cuenta de Vercel- Familiaridad con JavaScript, React y Git. Haber trabajado con Next.js antes es una ventaja
Lo que se incluye1. Introducción y descripción general del curso2. Introducción a Jamstack3. Introducción al diseño atómico4. Descripción general de los CMS sin cabeza5. Introducción a Storyblok6. Creación de una aplicación Next.js7. Creación de un espacio Storyblok8. Conexión de Next.js y Storyblok9. Creación de componentes personalizados10. Creación de la primera página11. Introducción a Visual12. Adición de páginas dinámicas13. Creación de la sección de blogs14. Implementación en Vercel

¿Has construido aplicaciones con frameworks frontend antes? - Entonces seguramente te has encontrado con los términos "declarativo" y "reactivo". Desde que React fue lanzado en 2013, la mayoría de los frameworks o bibliotecas de UI modernos quieren ser como él, pero ¿qué significan realmente estos términos? ¿Y cuál es la diferencia entre el código "declarativo" e "imperativo"?
Me llevó mucho tiempo comprender estos conceptos, pero cuando finalmente lo hice, vi los frameworks frontend de una manera totalmente nueva. Y espero que sientas lo mismo después de esta charla.
En este taller muy interactivo, profundizaremos en muchos ejemplos de código para comprender profundamente los términos, con ejemplos utilizando JavaScript puro, React y Svelte. Pero los conocimientos serán universales. Después de esta charla, podrás unirte con confianza a discusiones sobre la naturaleza "declarativa" y "reactiva" de cualquier nuevo paquete o biblioteca.

React Testing Library es un gran marco de trabajo para pruebas de componentes de React porque responde a muchas preguntas por ti, por lo que no tienes que preocuparte por esas preguntas. Pero eso no significa que las pruebas sean fáciles. Aún hay muchas preguntas que debes resolver por ti mismo: ¿Cuántas pruebas de componentes debes escribir en comparación con pruebas de extremo a extremo o pruebas de unidad de nivel inferior? ¿Cómo puedes probar una línea de código específica que es difícil de probar? ¿Y qué diablos debes hacer con esa advertencia persistente de act()?
En este masterclass de tres horas, presentaremos React Testing Library junto con un modelo mental sobre cómo pensar en el diseño de tus pruebas de componentes. Este modelo mental te ayudará a ver cómo probar cada parte de la lógica, si debes o no simular dependencias, y mejorará el diseño de tus componentes. Saldrás con las herramientas, técnicas y principios que necesitas para implementar pruebas de componentes de bajo costo y alto valor.
Prerrequisitos:- Familiaridad con la construcción de aplicaciones con React- Experiencia básica en la escritura de pruebas automatizadas con Jest u otro marco de pruebas unitarias- No necesitas experiencia previa con React Testing Library- Configuración de la máquina: Node LTS, Yarn

En este masterclass, obtendrás una visión de primera mano de qué 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.
Qué se incluye:1. Bienvenida y presentación2. Configuración de Prisma (lección 1)3. Configuración de un servidor de GraphQL (lección 2)4. Construcción del esquema de GraphQL (lección 3)5. GraphQL en el cliente (lección 4)6. Cerrar la brecha (lección 5)7. Conclusión
Prerrequisitos- Node.js instalado en tu máquina (12.2.X / 14.X)- Se recomienda (pero no es obligatorio) usar 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

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!
Qué se incluye1. Configuración de navegadores de cajón y de pila con React Navigation, incluyendo la capacidad de respuesta2. Configuración de React Navigation con URLs3. Configuración de React Native Paper, incluyendo el estilo del cajón y los encabezados de React Navigation4. Configuración de un tema de color personalizado que admita el modo oscuro5. Configuración de favicons/iconos de aplicaciones y metadatos6. Qué hacer cuando no puedes o no quieres proporcionar la misma funcionalidad en la web y en el móvil
Requisitos previos- 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/

En este masterclass, aprenderás cómo crear un Sistema de Componentes Personalizado desde cero en React, y llevarlo al siguiente nivel.Aprenderás las mejores prácticas al construir un Sistema de Componentes, así como las herramientas que puedes utilizar para ser un colaborador más efectivo con otros equipos multifuncionales.
Qué se incluye1. Introducción2. Aprender los fundamentos de un Sistema de Componentes3. Configuración del entorno de desarrollo4. Importar fuentes5. Elegir una biblioteca base de Componentes React6. Escribir nuestros primeros componentes7. Configurar un tema centralizado8. Escribir estilos personalizados para inyectar en nuestros componentes9. Inyectar iconos en nuestros componentes10. Agregar hooks11. Hacer que los componentes sean responsivos12. Agregar modo oscuro13. Desplegar tu Sistema de Componentes14. Exportar tu Sistema de Componentes a una herramienta de diseño15. Prototipar con tus componentes de producción

Hay muchas ventajas de usar GraphQL como fuente de datos para el desarrollo frontend, en comparación con las API REST. Nosotros, los desarrolladores, por ejemplo, necesitamos escribir mucho código imperativo para recuperar datos y mostrarlos en nuestras aplicaciones y manejar el estado. Con GraphQL, no solo puedes reducir la cantidad de código necesario para la recuperación de datos y la gestión del estado, sino que también obtendrás mayor flexibilidad, mejor rendimiento y, sobre todo, una mejor experiencia de desarrollo. En este masterclass aprenderás cómo GraphQL puede mejorar tu trabajo como desarrollador frontend y cómo manejar GraphQL en tu aplicación frontend de React.
Qué se incluye:1. Introducción a GraphQL2. Consultas en GraphQL3. Mutación de datos4. GraphQL en React5. Uso de un cliente GraphQL