December 2 - 5, 2022
React Day Berlin
Berlin & Online

React Day Berlin 2022

Build apps, not walls

Take part in the exploration of the React universe! Focusing on in-depth talks, hands-on workshops, and developing new opportunities, the React Day Berlin conference provides space for everyone to make friends and collaborate on stellar apps.

Esta edición del evento ha finalizado, las últimas actualizaciones de este React Conference están disponibles en el sitio web de la marca.
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
86 min
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
Top Content
Workshop
Hussien Khayoon
Kahvi Patel
2 authors
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.
Next.js 13: Estrategias de Obtención de Datos
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
Workshop
Alice De Mauro
Alice De Mauro
- 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
Construye tu propio (Simple) React desde cero!
111 min
Construye tu propio (Simple) React desde cero!
WorkshopFree
Sean Blundell
Jean Duthon
2 authors
¿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.
Curso intensivo sobre Jamstack con Next.js y Storyblok
161 min
Curso intensivo sobre Jamstack con Next.js y Storyblok
Workshop
Arisa Fukuzaki
Chakit Arora
2 authors
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
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
158 min
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
Workshop
Maurice de Beijer
Maurice de Beijer
¿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.
Diseño de Pruebas Efectivas con React Testing Library
131 min
Diseño de Pruebas Efectivas con React Testing Library
Workshop
Josh Justice
Josh Justice
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
¿Qué demonios significan "declarativo" y "reactivo" en realidad?
69 min
¿Qué demonios significan "declarativo" y "reactivo" en realidad?
Workshop
Andre Kovac
Andre Kovac
¿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.
Seguridad de tipo de extremo a extremo con React, GraphQL y Prisma
95 min
Seguridad de tipo de extremo a extremo con React, GraphQL y Prisma
Workshop
Sabin Adams
Sabin Adams
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
Creación para Web y Móvil con Expo
155 min
Creación para Web y Móvil con Expo
Workshop
Josh Justice
Josh Justice
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/
Innovar con React
156 min
Innovar con React
Workshop
Cristobal Chao
Cristobal Chao
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
GraphQL para Desarrolladores de React
113 min
GraphQL para Desarrolladores de React
Workshop
Roy Derks
Roy Derks
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