Construyendo Bibliotecas de Componentes Multiplataforma para Web y Nativo con React

Rate this content
Bookmark

Construir productos para múltiples plataformas como web y móvil a menudo requiere código separado a pesar de que la mayoría de los componentes tienen una apariencia y sensación idénticas. ¿Existe alguna forma en la que podamos utilizar una biblioteca de componentes compartidos de React en diferentes plataformas y ahorrar tiempo? En esta presentación, demostraré una forma de construir una biblioteca de componentes verdaderamente multiplataforma con un enfoque único utilizando React y React Native en combinación.

21 min
25 Oct, 2021

Video Summary and Transcription

Esta charla discute la construcción de bibliotecas de componentes multiplataforma para React y React Native, basada en un proyecto exitoso con una gran organización de noticias propiedad del gobierno. Cubre los requisitos para el conocimiento de React Native, la construcción de componentes multiplataforma, los componentes específicos de la plataforma, el estilo y las herramientas utilizadas. La charla también destaca los desafíos de implementar el diseño receptivo en React Native.

Available in English

1. Introducción a las bibliotecas de componentes multiplataforma

Short description:

Hoy voy a hablar sobre cómo construir bibliotecas de componentes multiplataforma para React y React Native. Discutiremos los requisitos para el conocimiento de React Native, la construcción de componentes multiplataforma, los componentes específicos de cada plataforma, el estilo y las herramientas que utilizaremos. Este enfoque se basa en un proyecto exitoso con una gran organización de noticias propiedad del gobierno.

¡Hola a todos! Mi nombre es Perttu Lähtenalahti y hoy voy a hablar sobre cómo construir bibliotecas de componentes multiplataforma para React y React Native. Antes de adentrarme en ese tema, quiero presentarme brevemente. Como mencioné, mi nombre es Perttu Lähtenalahti. No se preocupen, es realmente difícil. Incluso una vez lo escribí mal en mi pasaporte. La razón de este nombre difícil es porque soy originario de Finlandia y actualmente vivo en la hermosa Helsinki, Finlandia. Tengo un sitio web, perttu.dev. Pueden encontrar esta presentación como un artículo allí. Y muchas otras cosas también. También pueden encontrarme en GitHub y Twitter con este nombre de usuario. Y las diapositivas de esta presentación las pueden encontrar en esta dirección. También pueden encontrar este proyecto allí. Lo cual les permitirá probarlo y construir sus propios componentes utilizando la forma en que les voy a mostrar. Así que, sí. Adentrémonos en el tema de la charla de hoy. Entonces, de qué se trata esto, por supuesto, es cómo construir componentes multiplataforma para que realmente puedan usarlos tanto en proyectos de React como en proyectos de React Native. Mi idea es que los requisitos para el conocimiento de React Native sean bastante mínimos. Solo conocer los conceptos básicos de la diferencia entre React Native y React debería ser suficiente en este caso y espero que así sea. Y utilizando React Native, vamos a ver cómo usarlo para construir componentes multiplataforma que podamos utilizar tanto en la web como en las aplicaciones nativas, en este caso iOS y Android, y también cómo construir estos componentes específicos de cada plataforma para que podamos tener los mismos componentes pero con código diferente entre estas dos plataformas. La razón de esto, la vamos a discutir más adelante, pero la idea básica es que queremos tener una única base de código y compartir la mayor cantidad de código posible. Hacia el final de la charla, voy a adentrarme un poco en el estilo y los pros y contras de este enfoque que les voy a mostrar. Luego, algunos puntos adicionales. No vamos a utilizar React Native Web, que creo que mencionaré pronto, y también vamos a utilizar styled components y Storybook. Para aquellos que no han utilizado styled components, es una solución realmente increíble de CSS en JS que nos permite estilizar nuestros componentes multiplataforma de manera muy fácil en este caso. Storybook es simplemente algo que estoy utilizando ahora para mostrar los componentes en un contexto separado de la construcción de una aplicación real. Entonces, sí. Este proyecto o este enfoque que les voy a mostrar se basa en un enfoque que realicé para un cliente hace algún tiempo. Ese cliente, no puedo mencionar el nombre, pero era una gran organización de noticias propiedad del gobierno y tenían tres aplicaciones de React Native y una aplicación web que funcionaba con React. Básicamente, su sitio web principal. Y estaban sirviendo, diría, incluso más de un millón

2. Construyendo una Característica Unificada Multiplataforma

Short description:

Se nos pidió a mi equipo construir una nueva característica que permitiera contenido en vivo en su plataforma. Querían una única base de código para todas sus diferentes aplicaciones y plataformas. La característica debía funcionar en los cuatro proyectos y tener una experiencia unificada. A pesar del ajustado cronograma, logramos entregar una buena versión.

personas todos los días, por lo que la cantidad de usuarios era enorme. Y nos pidieron, a mi equipo se nos pidió construir una nueva característica que permitiera contenido en vivo en su plataforma. Esto significaría video, encuestas, chats y, por supuesto, artículos actualizados en vivo sobre diferentes temas. Y había algunos requisitos, así que a pesar de tener estas tres o cuatro plataformas diferentes, cuatro aplicaciones diferentes, en realidad querían una única base de código. Por lo tanto, esta característica que construiríamos como una biblioteca de componentes separada, debería funcionar en estos cuatro proyectos, lo cual era un requisito bastante grande. Y también debía tener una experiencia unificada para que se vea y se sienta igual a pesar de usarlo en una aplicación diferente, una aplicación nativa diferente, una aplicación web diferente, y así sucesivamente. Y el cronograma también era muy ajustado, así que creo que querían lanzar un MVP en menos de tres meses aproximadamente, lo cual para una empresa de su tamaño era una tarea bastante grande, pero logramos obtener una versión bastante buena

3. Introducción a los Componentes Multiplataforma

Short description:

Ahora, algunos de ustedes que han utilizado React Native y tal vez incluso React Native Web se preguntan en este momento que, bueno, esta parece ser una opción muy buena para usar React Native. Sin embargo, en realidad no tuvimos esa opción, por lo que la razón por la que no usamos React Native fue múltiple, pero se redujo a esto. Podíamos usar los componentes familiares como vista, texto e imagen que ya conocemos y con los que los desarrolladores de la empresa están familiarizados en sus aplicaciones de React Native. Sin embargo, en nuestro caso, ya era una aplicación de React existente y enorme, por lo que no podíamos simplemente incluir React Native allí y hacer que funcione, sino que estábamos limitados a tener código de React funcionando en el proyecto de React, y necesitábamos tener código de React Native funcionando en el proyecto de React. Y también en caso de que estuviéramos limitados por estos componentes de vista, texto e imagen porque necesitábamos texto HTML adecuado como H1, H2, H3 para obtener todos los beneficios de SEO. Así que sí, sin más preámbulos, hablemos de cómo vamos a hacer esto, cómo vamos a hacer componentes multiplataforma.

Fuera. Ahora, algunos de ustedes que han utilizado React Native y tal vez incluso React Native Web se preguntan en este momento que, bueno, esta parece ser una opción muy buena para usar React Native. Sin embargo, en realidad no tuvimos esa opción, por lo que la razón por la que no usamos React Native fue múltiple, pero se redujo a esto. Entonces, por supuesto, había cosas buenas. Podíamos usar los componentes familiares como vista, texto e imagen que ya conocemos y con los que los desarrolladores de la empresa están familiarizados en sus aplicaciones de React Native. Y esos son realmente fáciles de construir tanto para web como para nativo si tienes un proyecto completamente nuevo de React Native web. Sin embargo, en nuestro caso, ya era una aplicación de React existente y enorme, por lo que no podíamos simplemente incluir React Native allí y hacer que funcione, sino que estábamos limitados a tenerlo de manera que necesitábamos tener código de React funcionando en el proyecto de React, y necesitábamos tener código de React Native funcionando en el proyecto de React. Y también en caso de que estuviéramos limitados por estos componentes de vista, texto e imagen porque necesitábamos texto HTML adecuado como H1, H2, H3 para obtener todos los beneficios de SEO. Así que sí, sin más preámbulos, hablemos de cómo vamos a hacer esto, cómo vamos a hacer componentes multiplataforma.

4. Construcción de Componentes Multiplataforma

Short description:

React Native tiene una característica donde puedes hacer extensiones específicas de plataforma para archivos. Al usar las extensiones .ios y .android, el React Native Bundler puede empaquetar automáticamente el componente correcto para cada plataforma. Sin embargo, también existe la extensión .native, que te permite crear componentes que funcionan tanto en la web como en las plataformas nativas. Este enfoque aún requiere componentes separados para cada plataforma, así que veamos cómo construir verdaderos componentes multiplataforma.

Vamos a hacer componentes multiplataforma. Así que en realidad hay esta característica en React Native donde puedes hacer extensiones específicas de plataforma para archivos. Entonces, aquellos que han utilizado React Native ya saben que si tienes un componente para iOS o un componente para Android o Vue, simplemente puedes poner .ios antes de la extensión .js y el React Native Bundler automáticamente sabrá qué componente usar y empaquetar en el paquete de JavaScript para cada plataforma. Y funciona muy bien. Lo que la mayoría de la gente creo que se pierde la mayor parte del tiempo, porque cuando lo hicimos, no había muchas menciones de esto, es que también existe la extensión .native, que básicamente le dice a React que use este componente en la aplicación web y este otro en la nativa, úsalo en Android e iOS. La diferencia radica en que el otro está gestionado por Webpack para la web, y luego Metro Bundler, el empaquetador de React Native, para el .native. Y usando esto, puedes crear componentes que funcionen en ambas plataformas. Puedes ponerlos en un solo repositorio y usarlos. Pero eso no te permite construir componentes multiplataforma todavía. Todavía hay componentes separados en partes separadas. Pero vamos a sumergirnos en cómo hacerlo.

5. Construcción de Componentes React Native

Short description:

Este proyecto es una plantilla básica de tubería de React Native con carpetas de código fuente y utilidades. Incluye dos instancias separadas de Storybook para web y React Native. El componente para el botón básico, llamado mi botón, es utilizado tanto por el lado nativo como por el lado de React. Las etiquetas personalizadas utilizadas en este componente están definidas en el archivo utils.tags, lo que permite que React las maneje como nombres de etiquetas. Al utilizar extensiones específicas de fondo, React sabe a qué archivos pertenece cada plataforma.

Vamos a ver cómo hacer esto. Entonces, volviendo al editor, puedes ver que este proyecto que he construido es una plantilla básica de tubería de React Native. Lo único que he agregado allí es la carpeta de código fuente con los componentes y las carpetas de utilidades. Aparte de eso, también he agregado dos instancias diferentes de Storybook. Entonces, hay scripts para ejecutar Storybook en la web y luego ejecutar Storybook en React Native. Y eso es algo que acabas de ver aquí. Así que, si puedo volver atrás. Estas son las dos instancias separadas de Storybook. Puedes ver el botón básico allí y también puedes ver el botón básico en el móvil. Entonces, sí. Ahora, si volvemos al editor de código, podemos ver que abramos el componente para el botón básico. En este caso se llama mi botón. Así que vamos al archivo de mi botón. Y podemos ver ese archivo único que actualmente, si miramos el archivo .stories, podemos ver que es utilizado tanto por el lado nativo como por el lado de React. Y la forma en que esto es posible es que mi botón es un componente que consta de una opacidad de botón y un párrafo. Ahora, esos no son etiquetas tradicionales de React Native o React con las que puedas estar familiarizado. Pero en su lugar están definidos de forma personalizada. Y puedes ver que se importan desde este archivo utils.tags. Así que, veamos eso. Y probablemente podamos tener una idea de cómo funciona esto. Así que primero veamos el archivo de etiquetas. Eso es realmente simple. Solo exporta variables como heading1 es igual a string h1. Y React en realidad es bastante inteligente y puede manejar estos como los nombres de etiquetas de inmediato, lo cual es realmente genial. Y también tenemos las etiquetas nativas. Y como mencionamos antes, si tenemos estas extensiones específicas de fondo, esto significa que React Native y React saben a cuál de estos archivos pertenece cada uno. Entonces, si miramos el archivo nativo, podemos ver que primero importamos todos estos textos de imagen, táctil, resaltado y opuesto, y luego les asignamos los mismos nombres que tenemos en el lado de texto. Entonces, tenemos el heading1, que siempre es un componente de texto. Y eso nos permite construir la cosa. Entonces, exportamos estos dos componentes en

6. Estilización de Componentes React con React Native CSS

Short description:

React toma el componente y verifica la opacidad para React y React Native. Es simple, pero funciona bien. Los estilos para los botones son ligeramente diferentes, pero funcionan de la misma manera. Los componentes estilizados permiten una fácil estilización multiplataforma utilizando React Native CSS.

Cuando React toma este componente, verifica cuál es la opacidad para React y cuál es para React Native. Y eso funciona. Esto es casi estúpidamente simple. Pero funciona realmente bien. Como mencioné, hemos estado utilizando esto en producción para millones de personas. Bien. A continuación, es posible que te preguntes, ¿cómo lo hago realmente? Así que, si retrocedemos, veamos los componentes. Entonces, abramos el botón estilizado. Y en el lado de React Native, podemos ver que hay un botón azul. En el lado de React, también podemos ver que hay un botón azul. Los estilos son un poco diferentes. React Native tiene un flex de uno por defecto. Entonces, ocupa todo el espacio disponible. Pero aún funcionan de la misma manera. Entonces, no hacen nada. Pero se pueden hacer clic. Entonces, veamos el código detrás de eso. Y aquí es donde entran en juego los componentes estilizados. Abramos mi botón estilizado. Podemos ver que el botón estilizado está bien. Es muy similar a mi botón anteriormente. Tiene el elemento de botón y el texto del botón. Pero en realidad, esos componentes no son los mismos que importamos del texto. Sino que están aquí abajo. Y utilizando el constructor estilizado, pasamos la opacidad del botón y el elemento de párrafo, el constructor estilizado, y luego agregamos estilos. Y eso estiliza el componente. De esta manera, puedes estilizar fácilmente de manera multiplataforma. Funciona en ambos. Los componentes estilizados utilizan CSS de React Native, si recuerdo bien, para aplicar los mismos estilos CSS para las diferentes plataformas.

7. Manejo de clics de botones en React Native

Short description:

Tenemos una base de código similar para dos plataformas diferentes. Para hacer que un botón sea clickable en React Native, usamos el evento 'onPress' en lugar de 'onClick'. Hacemos una verificación de plataforma y aplicamos la propiedad correcta, 'onPress' para React Native y 'onClick' para React. El manejo de nombres de propiedades incompatibles entre React y React Native se puede hacer con funciones auxiliares o hackeo de TypeScript.

Y creo que eso es bastante genial. Todavía tenemos una base de código similar, pero en dos plataformas diferentes. Ahora, ¿qué pasa si realmente queremos hacer algo con el botón? Queremos que sea clickable. Si volvemos a la storybook, podemos ver que hay un botón funcional en ambos. Y lo que realmente hace es funcionar, pero no hace mucho. Cuando haces clic en él, se registra en la consola que se ha presionado. Así que veamos el código detrás de esto. Porque aquí es donde realmente comenzaremos a ver dónde tienes que hacer ciertas cosas para seguir trabajando con un componente único. Así que abramos el botón funcional y podemos ver que hay un evento 'onPress' que luego hace el bloque de consola 'pressed'. Y realmente se está llamando. No tengo la línea de comandos abierta o disponible para mirar, pero puedo verificar que se muestra el texto 'press'. Y esto es lo que lo habilita. Entonces, lo que está sucediendo aquí es que, en el lado de React, cuando estamos usando elementos DOM normales, cada elemento es clickable porque los usas principalmente a través del mouse. Pero en React Native, como siempre es, bueno, diría que casi siempre es una pantalla táctil, se llama evento 'onPress' allí. Y si simplemente ponemos 'onPress' aquí, se quejará porque esperará que el botón sea un elemento HTML 'button'. Y si ponemos 'onClick', es posible que se queje de que no existe el evento 'onPress' y el evento 'onClick' no existe en React Native. Así que en realidad tenemos que hacer este tipo de verificación de plataforma, ok, plataforma, eso se exporta desde la plataforma de YouTube. Básicamente, exporta una variable constante en qué plataforma se encuentra. Es 'Native' para Native y 'web' para web. Y hacemos una verificación aquí, ok, cuál es. Y aplicamos la propiedad correcta, ya sea 'onClick' o 'onPress' para React y React Native. Estas cosas pueden complicarse un poco si tienes, por ejemplo, incompatibilidad entre los nombres de las propiedades entre React y React Native. Podrías hacer fácilmente un controlador para esto o, como, una función auxiliar que te permita construir esto más fácilmente. En este caso, o podrías simplemente hacer un hackeo de TypeScript. Eso probablemente también ayudaría. En este caso, solo quería saber cómo, quería mostrarte cómo funciona, como, bajo el capó. Así que no es lo más limpio, pero aún estás trabajando en un solo archivo, es bastante fácil mantener el control, entender incluso este código condicional y

8. Implementación del componente Web View

Short description:

Ahora exploremos un caso en el que los detalles de implementación entre plataformas varían significativamente. Nos centraremos en el componente Web View, que abre React Advanced en un pequeño iframe para la versión web y utiliza un componente Web View de React Native para la versión de React Native. A pesar de ser dos componentes diferentes, el archivo web view.stories determina automáticamente cuál importar según la plataforma. Este enfoque es simple, fácil y más mantenible que tener bases de código separadas o agregar React Native web a un proyecto de React.

Props condicionales. Vale. Ahora hemos mostrado cómo hacer componentes funcionales y cómo darles estilo para que sigan siendo el mismo archivo pero se sirvan desde dos plataformas completamente diferentes. ¿Qué pasa en un caso en el que tenemos un componente cuya implementación varía mucho entre las plataformas? Bueno, vamos a echar un vistazo, volvamos a la storybook y podemos ver aquí que tenemos el componente Web View y al abrirlo, abre React Advanced en un pequeño iframe y lo mismo ocurre en la aplicación de React Native. Pero esto no es un iframe, porque React Native no tiene soporte para iframes. En realidad, este es un componente llamado React Native Web View que luego envolvemos y asignamos la URL como una propiedad. Veamos un poco más de código. Abramos el componente Web View aquí y podemos ver de inmediato que webview.native y webview.dsx son dos archivos separados. Esto nos dice que hay una diferencia en la implementación entre las dos plataformas. En el lado nativo, podemos ver que en realidad es un contenedor, solo es un envoltorio que importamos de tax. Y luego tenemos webview, que vemos que es en realidad un webview importado como un webview de la biblioteca React Native WebView. Esto nos permite usar un webview en nuestra aplicación de React Native. Sin embargo, debido a que React Native WebView es, como indica el nombre, solo funciona en React Native, debemos tener un tipo de implementación separada para la versión web. Así que ahí puedes ver que el componente Web View es un iframe. Y a pesar de ser dos componentes diferentes, el archivo webview.stories sabe automáticamente cuál importar. Y esto también funcionaría si lo usas en una versión real de React o React Native. Sabría automáticamente qué componente deberíamos usar. Y espero que finalmente estés entendiendo cómo funciona esto en realidad. Es realmente simple. Muy fácil. Y en mi opinión, mucho más mantenible que tener dos

9. Desafíos con el Diseño Responsivo en React Native

Short description:

React Native no admite etiquetas de diseño responsivo como viewport, por lo que debes monitorear manualmente el tamaño del viewport y cambiar los estilos en consecuencia. Puedes usar una función auxiliar para aplicar etiquetas de diseño responsivo según el contexto o separar los componentes en diferentes archivos.

bases de código separadas o agregar React Native web a un proyecto de React. Entonces, sí. Luego hablemos un poco sobre por qué esta no es la solución perfecta. Es posible que ya hayas notado que no había elementos de diseño responsivo. El iframe, por ejemplo, en la web no ocupaba toda la página ni se ajustaba. Lo mismo ocurre con los botones. Simplemente tenían automáticamente ese ancho. Esto se debe en parte a que hacer un diseño responsivo en con styled-components es realmente fácil. El problema es que React Native no admite las mismas etiquetas de diseño responsivo como viewport, etc. En su lugar, debes monitorear manualmente el tamaño del viewport a través del puente de JavaScript. Y luego cambiar los estilos en función de eso. Entonces, generalmente, en esos casos, tienes dos opciones. Puedes crear una función auxiliar para detectar en los estilos si el componente se está utilizando en ese contexto o contexto nativo y aplicar las etiquetas de diseño responsivo en función de eso. O puedes hacer una solución completa basada en JavaScript. O, en tercer lugar, puedes separar esos dos componentes en dos archivos diferentes. Eso también funciona. Otra cosa muy similar son las animaciones. Entonces, React Native no admite animaciones y React no admite bien la biblioteca animada de React. Puedes solucionar esto usando React Spring. Lo hicimos en un proyecto. Funcionó relativamente bien. Es posible. No tuve tiempo de mostrártelo. Pero puedes encontrarlo en el repositorio. Y luego, por supuesto, el último problema es el ajuste. En algunos casos, tienes la misma propiedad exacta, básicamente, pero tienen nombres diferentes. Debes hacer esta detección específica de la plataforma. En qué plataforma estamos ahora y a cuál deberíamos asignar esta función, por ejemplo. Pero en mi opinión, esas cosas malas, por así decirlo, no son tan malas. Este tipo de enfoque podría ser algo que te recomendaría encarecidamente que pruebes en tu proyecto si necesitas admitir tanto plataformas de React como React Native. Una cosa que quiero mencionar sobre la biblioteca de componentes, en los archivos del proyecto, puedes encontrar un script sobre cómo empaquetar esto en un paquete npm, para eliminar el código específico de la plataforma de las diferentes distribuciones de la biblioteca, para que no termines usando accidentalmente código de React Native o empaquetándolo junto con tu aplicación web de React. Pero, bueno, sí, eso es todo lo que tengo. Espero que hayas aprendido algo nuevo y, con suerte, te haya interesado probar este enfoque de código específico de la plataforma. Eso es todo lo que tengo. ¡Gracias!

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn