¡MDX en React-Native!?

Rate this content
Bookmark

Cómo utilizar MDX en React-Native de manera efectiva y los desafíos a los que no sabías que te enfrentabas.

21 min
25 Oct, 2021

Video Summary and Transcription

Esta charla trata sobre el desarrollo de MDX, una combinación de Markdown y JSX, por un desarrollador freelance de JavaScript full stack. MDX es una tecnología poderosa que permite la creación de contenido interactivo dentro de publicaciones de blog y admite componentes de React. El orador desarrolló RnMDX, una biblioteca MDX adecuada y pulida para React Native, que se puede integrar en cualquier aplicación de React Native. RnMDX proporciona soluciones para problemas comunes con el contenido de Markdown en React Native y permite la representación del contenido de MDX en vistas nativas. Ahora es más fácil llevar MDX a aplicaciones nativas y se puede utilizar para diversos fines, como servir el diseño de la aplicación desde un CMS o crear revistas o blogs interactivos.

Available in English

1. Introducción al desarrollo Full Stack con MDX

Short description:

Hola, soy Daniel, un desarrollador freelance de JavaScript Full Stack de Finlandia. Construyo aplicaciones web desde cero hasta producción, incluyendo la interfaz de usuario, el backend, la integración de API, las bases de datos y los servidores. También construyo aplicaciones React Native. Esta charla trata sobre algo que desarrollé, los desafíos que enfrenté y la solución que publiqué en NPM. MDX es una combinación de Markdown y JSX. Markdown es una herramienta simple y estandarizada para crear texto formateado, mientras que JSX lleva HTML al siguiente nivel. Me animé y probé React.

Hola, soy Daniel, un desarrollador freelance de JavaScript Full Stack de Finlandia. Mi definición de Full Stack es que construyo aplicaciones web desde cero hasta producción, lo que significa la interfaz de usuario y su estilo, el backend con node, la integración de API, las bases de datos, los servidores, lo que sea necesario.

También construyo aplicaciones React Native y sigo sorprendiéndome de lo bien que puedo aplicar mi experiencia web existente en esa área. Es algo tan normal usar una biblioteca específica de JavaScript o React en React Native que los casos en los que no es posible destacan.

Ah, el buen y viejo NPM, la tierra sagrada de los desarrolladores de JavaScript, donde generalmente puedo encontrar un paquete para cualquier cosa que necesite hacer. NPM proporciona soluciones reutilizables para desafíos individuales para que pueda centrarme en la lógica del negocio , ya sabes, lo que realmente necesita hacer la aplicación, sin meterme en el desarrollo de administradores de estado personalizados, enrutadores o soluciones de estilo o lo que sea. Pero, ¿qué pasa si lo que necesitas no existe en NPM? Esta charla trata sobre algo que di por sentado que existía, pero que tuve la desfachatez de no existir. La solución que desarrollé y los desafíos a los que me enfrenté en el camino. Y, por supuesto, lo publiqué en NPM.

MDX está en el título de esta charla, entonces, ¿qué es MDX? Es una combinación de dos tecnologías, Markdown y JSX. Me doy cuenta de que estas dos pueden ser muy familiares para esta audiencia, pero echemos un vistazo a las fortalezas que cada una aporta y imaginemos cómo podría ser un equipo.

El contenido es el rey. Y la capacidad de crear y mostrar contenido es de suma importancia para cualquier aplicación. Si tu contenido se basa en texto, Markdown es una gran herramienta para usar, ya que proporciona todo lo que necesitas y es muy simple y fácil de aprender para cualquiera. Con Markdown, puedes escribir texto formateado en cualquier lugar que acepte entrada de teclado. Ya no necesitas un software de procesamiento de texto especializado para eso. Markdown es legible para los humanos tal como está, pero para darle formato, solo necesitas un renderizador de Markdown. Markdown está estandarizado y ha existido durante un tiempo, por lo que hay muchas bibliotecas disponibles para probablemente todos los lenguajes de programación y plataformas. Markdown es casi tan fácil de renderizar, al menos de escribir, debido a que es solo texto plano. Hoy en día, esperamos que se admita Markdown y parece que eso sucedió de la noche a la mañana. Un día teníamos tantos lenguajes de formato como aplicaciones con áreas de texto y al siguiente día, Markdown estaba en todas partes. Por supuesto, las personas han trabajado duro en esto, pero muestra lo importante que era unificar y estandarizar estas características de formato simples y lo necesario que era.

Probablemente no necesito explicar por qué React es genial, ya que estoy hablando en una conferencia llamada React Advanced, pero quiero mencionar JSX, que React introdujo y popularizó. Mientras que Markdown simplificó el formato de texto y hizo que HTML fuera innecesario para estos casos de uso, JSX lleva HTML al siguiente nivel. Cuando empecé a programar, mezclar HTML y JavaScript estaba mal visto. Era tabú, ya que eran preocupaciones separadas. Tenías tu HTML, al que decorabas con estilos y scripts. Nunca se debían mezclar. Cuando vi JSX por primera vez, fue horroroso, ya que iba en contra de todo lo que había aprendido hasta ese momento. Pero me animé y probé React.

2. JSX y sus beneficios

Short description:

JSX permite un código declarativo y una arquitectura basada en composición, lo que facilita la composición de componentes autocontenidos. HTML es estático y no es suficiente para aplicaciones modernas. JSX permite interfaces de usuario dinámicas sin necesidad de renderizado en el lado del servidor o manipulación de HTML estático con JavaScript o JQuery.

Y no he mirado hacia atrás desde entonces. JSX permite un código declarativo y una arquitectura basada en composición, donde la estructura de la aplicación está involucrada en la lógica del negocio como un ciudadano de primera clase, en lugar de algo separado y desconectado, que necesitas modificar quirúrgicamente para que refleje el estado actual de tu aplicación.

HTML es estático y por sí solo no es suficiente para aplicaciones modernas. Se han realizado intentos para hacerlo más dinámico, algunos más exitosos que otros. El renderizado de HTML en el lado del servidor funciona bastante bien, pero una vez que el marcado llega al navegador, sigue siendo estático y pedirle al servidor que haga actualizaciones que el cliente podría hacer de manera más fácil y rápida es una experiencia de usuario que huele y sabe a los años 90. Y cuando intentas manipular HTML estático con JavaScript o JQuery, rápidamente se convierte en un juego de Jenga con demasiadas personas moviendo bloques al mismo tiempo.

En cambio, JSX facilita la composición de componentes autocontenidos que incluyen la lógica, el estilo y el diseño que necesitan para cumplir su tarea. La interfaz de usuario es un producto del estado y no algo a lo que el desarrollador deba atender por separado. Las interfaces de usuario pueden ser bastante complejas sin que todo se desmorone.

3. MDX: Una Tecnología Poderosa para Contenido Interactivo

Short description:

MDX es una tecnología poderosa que combina las capacidades de CSS, JavaScript y Markdown. Permite la creación de contenido interactivo y atractivo, como demostraciones y texto destacado especial, dentro de publicaciones de blogs. MDX puede servir cualquier contenido interactivo, lo que facilita a los escritores incorporar componentes multimedia. Admite componentes de React, lo que permite la inclusión de videos, escenas en 3D y más. Si bien MDX se utiliza ampliamente en el desarrollo web, su disponibilidad para React Native es limitada.

MDX es lo que se obtiene al combinar estas tecnologías. En lugar de tener solo negrita y cursiva, y tal vez algo más, puedes tener cualquier efecto que se puede lograr con CSS y JavaScript. MDX realmente abre las compuertas de las posibilidades. Es excelente para publicaciones de blogs donde puedes agregar una demostración junto con el texto o usar texto destacado especial. El blog de Josh W. Como es un gran ejemplo. Habla sobre cómo lo construyó aquí.

De hecho, esta misma presentación está hecha con MDX. Tomé prestado un efecto de texto brillante del blog de Josh, lo inserté y simplemente funciona. Pero eso solo raspa la superficie. MDX hace posible servir cualquier contenido interactivo a través, por ejemplo, de un CMS, tan fácilmente como servir texto, lo que permite a cualquier escritor componer contenido multimedia atractivo utilizando componentes que el equipo de desarrollo produce. Se ve así. Principalmente es solo markdown, pero ¿qué es eso? Un componente de React en el markdown. Sí. Este ejemplo es bastante simple. Por supuesto, podemos hacer cualquier componente de React, como este reproductor de video. Aquí está Jay Foreman explicando los distritos de Londres. Es un gran video, pero lo veremos más tarde. Podemos hacer una escena en 3D. Esto es de los ejemplos de React 3 fiber. Nuevamente, lo inserté y simplemente funciona. Las posibilidades son infinitas. Al menos en el ámbito web.

Pero, ¿qué pasa con React Native? Entonces, estoy desarrollando una aplicación con mi papá, que es escritor. Y MDX es la tecnología perfecta para dar vida a su contenido. Y hacerlo interactivo para los usuarios al incorporar widgets atractivos y formato especial. Me dispuse a instalar la biblioteca de MDX para React Native desde NPM en nuestra aplicación de React Native. MDX es React. React Native es React. Entonces, seguramente existe, ¿verdad? No existía.

4. Usando MDX en React Native con el tiempo de ejecución de MDX

Short description:

La mejor manera de usar MDX en React Native es utilizar el tiempo de ejecución de MDX. Ejecuta el markdown y los componentes de React en tiempo de ejecución, pero se debe tener precaución con la entrada proporcionada por el usuario. Para mi caso de uso, solo estoy utilizando la escritura de mi papá y mis propios componentes de React.

Investigué un poco y la mejor manera de usar MDX en React Native es utilizar el tiempo de ejecución de MDX. Como su nombre lo indica, ejecuta lo que le des, como el markdown y los componentes de React en tiempo de ejecución. Teóricamente, es independiente de la plataforma, ya que necesita que se le proporcionen los componentes de markdown que debe utilizar. Viene con una advertencia importante, que ejecuta lo que le des en tiempo de ejecución. Esta cosa no debería estar cerca de la entrada proporcionada por el usuario, a menos que disfrutes ser hackeado. Para mi caso de uso, solo le voy a proporcionar la escritura de mi papá y mis propios componentes de React. A menos que mi papá realmente quiera presumir sus habilidades de hacking, el riesgo aquí es bastante bajo.

5. Desafíos en la representación de MDX en React Native

Short description:

Para hacer que MDX en React Native sea una realidad, tuve que hacer posible el markdown en React Native. Crear componentes que representaran correctamente MDX en Android e iOS fue un desafío importante. Utilicé la biblioteca de renderizado de markdown de React Native como punto de partida y construí componentes nativos para la mayoría de las características de markdown.

Entonces, para hacer que MDX en React Native sea una realidad, primero tuve que hacer que el markdown en React Native sea una realidad. MDX está diseñado principalmente para su uso en la web y representa el markdown en etiquetas como p, strong o h1. React Native no tiene idea de qué hacer con eso. Crear estos componentes fue probablemente el mayor desafío al que me enfrenté durante este esfuerzo, ya que MDX puede ser complicado con los espacios y el estilo de React Native puede ser complicado en general. Tuve que lidiar con casos en los que la línea de texto se cortaba verticalmente y un componente en línea afectaba la altura de la línea, entre muchos otros problemas, recuerdos de los cuales he reprimido. Necesitaba que los componentes se vieran iguales, además de buenos, tanto en Android como en iOS. Utilicé la biblioteca de renderizado de markdown de React Native, que incluye vistas nativas de markdown como punto de partida y ensamblé componentes nativos para la mayoría de las características de markdown.

6. MDX en React Native: Presentando RnMDX

Short description:

¡Finalmente, MDX en React Native! Después de esperar a que alguien creara una solución, ahora me doy cuenta de que esa persona era yo todo este tiempo. Presentando RnMDX, una biblioteca de MDX adecuada y pulida para React Native. Se puede integrar en cualquier aplicación de React Native y renderizar contenido interesante e interactivo creado por editores, diseñadores y redactores. RnMDX te permite centrarte en tus componentes personalizados sin preocuparte por la parte de markdown. Puedes renderizar contenido de MDX sobre la marcha con el tiempo de ejecución de MDX o precompilar MDX en JavaScript con la herramienta de línea de comandos de RnMDX. Si prefieres seguir el libro de reglas, puedes precompilar tu MDX en JavaScript y utilizarlo en tu aplicación como cualquier otro componente. El núcleo de la biblioteca RnMDX es la colección de componentes de Markdown que cumplen con la parte de MD de MDX.

¡Finalmente, MDX en React Native! Como hemos establecido, no había paquetes listos para usar, así que publiqué mi primera solución como un gist. Terminamos la primera versión de la aplicación con una solución de MDX basada en lo que publiqué en el gist, pero todavía tenemos planes mucho más ambiciosos para ella.

Después de un largo descanso en el código, continué desarrollando la aplicación y quería mejorar las características de MDX específicamente. Seguramente, después de todo este tiempo, ¿alguien más también había necesitado MDX en React Native y había creado una biblioteca más pulida? No. Después de unos años, los resultados de búsqueda para React Native MDX en Google se ven así. En DuckDuckGo. En Brave. E incluso fui a Bing. Mi gist improvisado sigue siendo la mejor manera de usar MDX en React Native.

Después de esperar a que alguien creara una solución, ahora me doy cuenta de que esa persona era yo todo este tiempo. Y el mundo está listo para una biblioteca de MDX adecuada y pulida para React Native. Presentando RnMDX. Después de un poco de esfuerzo, es real. Se puede integrar en cualquier aplicación de React Native, incluidas las aplicaciones de Expo, y renderizar contenido interesante e interactivo creado por editores, diseñadores y redactores. El objetivo de RnMDX es ofrecer componentes de markdown listos para usar para React Native y permitir que el desarrollador se centre en sus componentes personalizados, que desea utilizar en MDX, sin tener que preocuparse por la parte de markdown. Luego, se puede renderizar el contenido de MDX sobre la marcha con el tiempo de ejecución de MDX o precompilar MDX en JavaScript con la herramienta de línea de comandos de RnMDX. Renderizar MDX con el tiempo de ejecución de MDX es la forma más fácil de implementar MDX en React Native, y RnMDX lo hace aún más fácil al proporcionar componentes de markdown funcionales y sensatos integrados con MDX. No necesitas nada más, solo obtén el contenido de MDX como una cadena de algún lugar y pásalo al tiempo de ejecución. Por supuesto, esto conlleva una sobrecarga adicional y es muy inseguro. El tiempo de ejecución ejecutará la cadena que le des, montando y ejecutando los componentes de React dentro de ella. Por lo tanto, debes asegurarte de que sea confiable y no se dedique a ninguna actividad sospechosa. No puedo recomendar de buena fe el uso del tiempo de ejecución, pero si puedes estar seguro de la confiabilidad del contenido y no te importa la sobrecarga adicional, definitivamente es la forma más fácil de hacerlo. Por otro lado, si prefieres seguir el libro de reglas, puedes precompilar tu MDX en JavaScript y utilizarlo en tu aplicación como cualquier otro componente. Esto, por supuesto, es más complicado, pero funciona de manera muy similar a un generador de sitios estáticos basado en React como Gatsby. El núcleo de la biblioteca RnMDX es la colección de componentes de Markdown que necesitas para cumplir con la parte de MD de MDX. Continuando desde los componentes que publiqué en el gist y utilicé en la aplicación que lo inició todo, dediqué más tiempo a ellos para asegurarme de que cubran todas las características de Markdown y sean bloques de construcción sólidos para cualquier caso de uso. También es posible anular cualquiera de los componentes de Markdown proporcionando tu propia implementación y asignándola a la clave de la característica de MDX que necesita un cuidado especial en tu aplicación en particular. En cuanto al estilo, los componentes de Markdown se pueden estilizar con los buenos y viejos objetos de hoja de estilo de React Native o cualquier biblioteca que los extienda. Y los estilos también pueden ser anulados por el usuario, al igual que los componentes. El estilo de los componentes de Markdown fue uno de los desafíos con los que me encontré.

7. Usando RnMDX para Markdown en React Native

Short description:

React Native puede ser caprichoso en ocasiones, por lo que hay algunos problemas comunes con el contenido de Markdown a los que quiero que esta biblioteca brinde soluciones de manera predeterminada. Lograr que todos los componentes de Markdown se vean lo mejor posible en ambas plataformas desde el principio es un área que requiere ajustes continuos. RnMDX proporciona la herramienta de línea de comandos y las facilidades para precompilar MDX en componentes de React Native. El flujo de trabajo de precompilación requiere un archivo de configuración que especifique la ubicación del contenido y dónde deben terminar los componentes compilados. RnMDX permite renderizar contenido de MDX en vistas nativas, lo que lo hace simple y versátil. MDX ahora existe en React Native y se puede utilizar para diversos fines, como servir el diseño de la aplicación desde un CMS o crear revistas o blogs en línea interactivos con artículos de MDX y componentes de React.

React Native puede ser caprichoso en ocasiones, por lo que hay algunos problemas comunes con el contenido de Markdown a los que quiero que esta biblioteca brinde soluciones de manera predeterminada. El espaciado, la altura de línea y el tamaño de fuente, donde el tamaño en píxeles se ve diferente entre Android e iOS, son solo algunos de los desafíos. Ahora, soy bastante bueno con CSS, pero esto es lo que se sintió. Lograr que todos los componentes de Markdown se vean lo mejor posible en ambas plataformas desde el principio es un área que ha requerido y probablemente seguirá requiriendo ajustes continuos.

Y como se mencionó anteriormente, la forma correcta de usar MDX es precompilarlo en componentes de React Native, y RnMDX proporciona la herramienta de línea de comandos y todas las demás facilidades que necesitas para este flujo de trabajo. La precompilación de contenido remoto de CMS también es posible, después de todo, es crucial para cualquier tipo de aplicación de contenido. Dado que estamos trabajando con aplicaciones nativas, este tipo de flujo de trabajo de precompilación estática no es tan fluido como en el mundo web con, por ejemplo, Netlify, pero es viable utilizando CodePush o Expo. Entonces, lo que necesitas para el flujo de trabajo de precompilación es un archivo de configuración que indique a la herramienta RnMDX dónde se puede encontrar el contenido y dónde deben terminar los componentes compilados. Aún estoy trabajando en este flujo de trabajo y cualquier aporte sobre el tema es bienvenido.

Entonces, ¿cómo se ve RnMDX en la práctica? Me alegra haberlo preguntado. Aquí hay una aplicación simple que utiliza el método de tiempo de ejecución. Veamos la demostración. Aquí tenemos una aplicación muy simple. Es una aplicación de Expo y he importado RnMDX. El componente de renderización de MDX aquí toma los componentes personalizados que deseas usar en tu MDX y el contenido de MDX como una cadena. Luego, simplemente los renderiza en vistas nativas. A la derecha, tenemos el contenido de MDX que estamos renderizando. Hay un texto de color, que es un componente en línea que envuelve texto. Y luego, tenemos un cuadro de color, que es un componente de nivel de bloque. Podemos darles props como lo haríamos con los componentes de React normales, y el resultado está aquí. ¡Ta-da! Muy simple. El texto rojo según el valor de la prop, que es rojo, y luego cajas de diferentes colores según sus tipos de prop. Es muy simple, versátil y se puede usar para casi cualquier cosa. No impone muchas restricciones que MDX o React Native no impongan.

Entonces, sin más preámbulos, volvamos a la presentación. Ahora MDX existe en React Native. ¡Genial! Ahora, ¿para qué deberías usar realmente esta cosa? La respuesta corta es, para lo que quieras. Es otra herramienta en tu caja de herramientas. Podrías servir todo el diseño de la aplicación desde un CMS como archivos MDX si quieres, pero el primer caso de uso sensato que se me ocurre es una revista en línea interactiva o un blog donde la versión web se ejecuta en Next o Gatsby y ya tienes un montón de artículos de MDX con

8. Integrando MDX en aplicaciones nativas

Short description:

Integrar MDX en aplicaciones nativas ahora es más fácil. Se requiere compatibilidad con React Native, pero después de eso, simplemente apunta tus aplicaciones nativas a tu CMS para mostrar artículos en una aplicación móvil. MDX se puede utilizar fuera de las aplicaciones de revistas, como en interfaces de chat bot. Donde haya texto, hay una oportunidad para agregar estilos originales. Las bibliotecas de npm son recursos valiosos y agradezco sinceramente a los colaboradores. RNMDX es mi paquete npm más ambicioso. Si no puedes encontrar lo que necesitas, considera contribuir con tu solución. Gracias por ver y espero que encuentres útil RNMDX.

componentes React geniales. Si quieres integrarlos en tu aplicación nativa, ahora es mucho más fácil. Por supuesto, necesitarías hacer que los componentes sean compatibles con React Native, pero después de eso, solo es cuestión de apuntar tus aplicaciones nativas hacia tu CMS y mostrar los artículos en todo su esplendor en una aplicación móvil. Las aplicaciones móviles no son realmente el mejor medio para textos largos, pero eso no significa que no haya oportunidades para usar MDX fuera de las aplicaciones de revistas. Si tienes una interfaz tipo chat bot, la conversación ahora puede incluir cualquier componente React que implementes. Donde haya texto, siempre hay al menos una oportunidad para agregar algunos estilos originales.

Es fácil dar por sentadas las bibliotecas de npm. ¿Cuántas veces no has encontrado algo que necesitabas? Es un recurso realmente notable y quiero agradecer sinceramente a todos los que contribuyen con código y, lo que es más importante, tiempo, por el bien de toda la comunidad extremadamente grande. Este no es mi primer paquete de npm, pero es el más ambicioso hasta ahora. De hecho, estoy bastante sorprendido de que no existiera. Así que la próxima vez que no encuentres algo que necesitas, considera contribuir con tu solución. Resulta que tú eras el indicado para hacerlo desde el principio. Eso es todo por mi parte. Gracias por ver y espero que encuentres útil RNMDX. Yo sé que lo será.

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
27 min
(Easier) Interactive Data Visualization in React
Top Content
If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick & easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data & use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time & effort!

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