Componentes de Servidor React desde Cero

Rate this content
Bookmark

Los componentes de servidor React (RSCs) son un gran cambio de paradigma para React. Incluso podrías preguntarte si NextJS y los componentes de servidor son lo mismo (spoiler: ¡no lo son!) Esta charla desmitifica cómo los RSCs *realmente* funcionan fuera del marco. Construiremos nuestro propio servidor Node, conectaremos el renderizador RSC a mano, y entenderemos la lógica de agrupación y enrutamiento para enviar un componente de servidor a tu navegador. Sí, todo con codificación en vivo. ¿Qué podría salir mal...?

29 min
13 Nov, 2023

AI Generated Video Summary

Esta charla introduce los Componentes de Servidor React y proporciona una guía paso a paso para construirlos y renderizarlos. Explora las capacidades de los componentes de servidor, incluyendo la interactividad y el streaming. La charla también cubre el proceso de incorporar la renderización del lado del cliente y los desafíos de agrupar y mapear los componentes del cliente. Además, discute la importancia de apoyar los Componentes de Servidor React y los esfuerzos en curso para integrarlos con diferentes agrupadores.

1. Introducción a los Componentes de Servidor de React

Short description:

Soy Ben. Soy un YouTuber y también una persona a tiempo completo en Astro. Lo que estamos construyendo son Componentes de Servidor de React desde cero. Vamos a tener un repositorio de ejemplo y recursos de aprendizaje. Nuestros objetivos son construir un componente de servidor desde cero, entender cómo manejar clientes, y transmitir cosas a través del cable y renderizarlas en el navegador. No perdamos tiempo. Tengo un archivo de servidor vacío y voy a darnos un servidor simple. Ahora necesitamos el componente. Voy a ir a mi carpeta de App y darnos uno llamado page.jsx. Vamos a tener un componente básico llamado página con el mensaje '¡Hola React Summit, woo!' Ahora necesitamos empaquetar esto para que funcione en node. Voy a ejecutar ES build, mi empaquetador favorito. Vamos a formatearlo como un módulo ES y ponerlo en una carpeta de construcción construida.

Soy Ben. Soy un YouTuber y también una persona a tiempo completo en Astro, que es un gran marco para construir sitios web. Sí, has leído bien. React Server Components desde cero es lo que estamos construyendo. Así que si te has estado preguntando, ¿cómo se usan los componentes de servidor fuera de Next.js, no es fácil pero lo vamos a hacer.

Así que vamos a tener un repositorio de ejemplo que puedes probar al final de la charla, y también algunos recursos de aprendizaje. Pero nuestros objetivos son construir un componente de servidor desde cero, entender cómo manejar clientes, así que vamos a hacer algo de empaquetado hoy. También vamos a averiguar cómo puedes transmitir cosas a través del cable y renderizarlas en tu navegador como un brillante componente de servidor.

Así que no perdamos tiempo. Tengo aquí un archivo de servidor vacío. Y para empezar, voy a darnos un servidor simple. Podrías usar Express o COA o lo que quieras. Voy a usar Hano, porque en mi opinión, es la forma más fácil de montar un servidor en localhost 3000. Así que sólo voy a ejecutar node-server. Te da la dirección localhost, y podemos ver Hola React Summit justo ahí. Bastante genial. Así que tenemos un servidor.

Ahora necesitamos el componente. Voy a ir a mi carpeta de App y darnos uno aquí. Lo voy a llamar page.jsx, reflejando las convenciones de nombres de Next.js, pero podrías llamarlo como quieras. Y voy a hacer un componente muy básico aquí llamado página, y vamos a tener un mensaje similar, ¡Hola React Summit, woo! Así que ahí lo tenemos. Tenemos nuestra página. Y ahora necesitamos empaquetar esto para que funcione en node. Sé que podríamos usar bun o dino o algo que tenga un renderizado elegante, pero vamos a hacerlo nosotros mismos. Vamos a decir función asíncrona construir, y dentro de aquí vamos a ejecutar ES build, que es mi bundler favorito para este tipo de cosas. Está basado en Go. Es rápido. Y también tengo un poco de configuración aquí para no estropearlo en el escenario. Tenemos bundle true. Vamos a formatearlo como un módulo ES, y vamos a tomar esa página y poner en una carpeta de construcción construida.

2. Construcción y Renderización del Componente del Servidor

Short description:

Importamos las dependencias necesarias y resolvemos las rutas de los archivos utilizando una utilidad. Luego, construimos el componente del servidor y lo convertimos en un elemento. Finalmente, renderizamos el componente a HTML y vemos la salida esperada.

Y también necesito poner un pequeño import en la parte superior para ES build. Ahí lo tenemos. Y notarás que tengo algunos resolutores de archivos aquí. Los voy a sacar de esta pequeña utilidad. Es muy simple. Solo estamos tomando nuestra carpeta de aplicación y nuestra carpeta de construcción y resolviendo la ruta a ellas, porque si hay algo que puede descarrilar una demostración en vivo, son las rutas de archivos de node, así que no estamos haciendo eso a mano.

Muy bien, e importaré node URL aquí mismo, y ahora deberíamos tener todo lo que necesitamos para construir un componente de servidor. También voy a esperar la construcción cuando iniciemos nuestro servidor, para que siempre comencemos con algo fresco. Reinicia, y deberíamos ver aparecer una carpeta de construcción en el lateral aquí con nuestra página ahora compilada a algunas funciones JSX en lugar de esa sintaxis JSX. Genial, así que ahora estamos listos para realmente colocar esto en nuestro punto final. Voy a hacer una importación básica aquí, así que nuestra página va a ser await import, y vamos a ir a buscar directamente desde la carpeta de construcción, page.js, y luego tomaremos nuestro componente y lo convertiremos en un elemento con react.createElement, use page default export, y luego vamos a tal vez solo devolver esto como HTML porque los componentes del servidor son solo renderización del servidor, ¿verdad? Seguramente, así que solo voy a ejecutar render to string, componente, y voy a importar eso en la parte superior, render to string, ahí lo tenemos, y ahora si reiniciamos nuestro servidor y renderizamos eso, deberíamos obtener hello React Summit renderizado justo allí.

3. Componentes del Servidor y Streaming

Short description:

Muy bien, eso es todo por mi charla. Los componentes del servidor pueden hacer más que solo renderizar HTML. Pueden manejar la interactividad y el streaming. Permíteme mostrarte un ejemplo con un componente de álbumes que obtiene datos de una base de datos y renderiza una lista de canciones. React Server Dom es una biblioteca central proporcionada por el equipo de React. Nos permite crear un stream y devolverlo desde nuestro servidor. Al usar streaming, podemos renderizar contenido de forma incremental y mostrar un estado de carga hasta que se obtengan los datos. Reiniciemos nuestro servidor y hagamos curl al endpoint para ver la salida.

Muy bien, eso es todo por mi charla, gracias, componentes del servidor desde cero. Gracias. Sí. Sí.

Bueno, espera. Espera, de hecho. Así que hay un par de cosas que los componentes del servidor pueden hacer que no son solo renderizar a HTML. En primer lugar, por supuesto, los componentes del cliente. Puedes renderizar HTML, pero quieres tener cierta interactividad con él. Y también, lo que creo que es la salsa secreta de los componentes del servidor, que es el streaming.

Así que permíteme mostrarte un ejemplo simple de eso aquí mismo. Digamos que tenemos un componente de álbumes que obtiene algunos álbumes de una database, literalmente solo llamando dentro de un componente y diciendo, oh espera, y luego renderizándolo a una lista de canciones y títulos. Y si quisieras renderizar eso, sabes, el stream y esperar a que se resuelva, puedes incluso hacer react suspense, tal vez poner un fallback, decir álbumes, y esto renderizaría el H1 de inmediato y mostraría la carga hasta que se complete la llamada a la database. Un sistema realmente genial que puedes hacer con los componentes del servidor, pero que no puedes hacer con un HTML plano. Necesitamos streaming.

Así que para eso voy a recurrir a una biblioteca central en React. React server Dom. Esto es algo que proporciona el equipo de React. Tiene versiones específicas para cada bundler. Webpack está lo suficientemente cerca de lo que estamos haciendo, lo creas o no, así que vamos a tomar de allí. Y vamos a crear un stream llamando a stream react server dom.render to readable stream. Y para devolver eso desde nuestro servidor, puedes hacer una respuesta estándar de la web, porque si no lo sabes, el streaming es parte de la plataforma. Si devuelves un stream, entonces el receptor sabe qué hacer con él. Así que ahora vamos a reiniciar nuestro servidor. Y esta vez, en realidad voy a hacer curl para ver qué salida obtenemos. Así que si hago curl a nuestro endpoint, deberíamos ver algo de código bajando por el cable. Primero, vimos que el h1 entraba, hola React Summit. Luego nuestro spinner de carga con una pequeña referencia L2 aquí. Ese número dos está haciendo referencia a lo que viene más tarde por el cable, que va a ser todos nuestros álbumes. Así que sabe cómo intercambiar en caliente la carga con la lista de álbumes.

4. Renderizando el Componente del Servidor y la Lógica del Cliente

Short description:

Permíteme mostrarte una vez más. Podemos ver que el encabezado aparece. Luego viene la llamada a la base de datos. Y todas tus cosas aparecen. Pero obviamente, esto no es HTML, ¿verdad? No es como nuestro viejo ejemplo. Esto es en realidad React Virtual DOM. Si no lo sabías, los componentes del servidor son algo así como una cosa de pila completa. Hemos terminado la parte uno, ahora necesitamos la parte dos, que es la lógica del cliente. Vamos a crear nuestro listener del cliente. Y ahora voy a convertir nuestra página de inicio en un documento HTML que va a cargar ese script al que estoy aludiendo. Y ahí es donde vamos a renderizar nuestro componente del servidor. Y vamos a usar este archivo del cliente para hacerlo. Así que vamos a escribir este archivo aquí, _client. En la parte superior, voy a importar algunos recursos. Primero, necesitamos createRoot, que es la forma en React de renderizar algo en un div.

Permíteme mostrarte una vez más. Podemos ver que el encabezado aparece. Luego viene la llamada a la database. Y todas tus cosas aparecen. Pero obviamente, esto no es HTML, ¿verdad? No es como nuestro viejo ejemplo. Entonces, si lo abro en mi navegador, ¿puedes ver que es una especie de muro de texto? El navegador realmente no sabe qué hacer con esto. Eso es porque no es puro HTML. Esto es en realidad React Virtual DOM. Le está diciendo a React, quiero renderizar un h1. Y luego quiero que reemplaces este spinner de carga más tarde. Como tenemos todo ese intercambio en caliente con suspense, necesitamos React en el cliente para recibir todo lo que viene del servidor y convertirlo en Virtual DOM. De hecho, he oído llamar a esto Virtual DOM por cable. Si no lo sabías, los componentes del servidor son algo así como una cosa de pila completa. El servidor envía todas las piezas del rompecabezas, y luego el cliente las junta y las ensambla en el sitio web. Hemos terminado la parte uno, ahora necesitamos la parte dos, que es la lógica del cliente. Así que permíteme borrar esta cosa de curl aquí para que no tengamos que mirarla. Vamos a crear nuestro listener del cliente. Para eso, voy a actualizar este endpoint para que sea /RSC, solo para ponerlo en un endpoint separado. Podemos llamarlo como queramos. Y ahora voy a convertir nuestra página de inicio en un documento HTML que va a cargar ese script al que estoy aludiendo. Así que vamos a crear eso. Y devolveremos algo de HTML dentro de aquí. Voy a hacer una plantilla muy básica. Así que tenemos DocType.html, un título simple, un script para algunas clases de tailwind solo para hacer que se vea bien, y luego un div con un ID root. Y ahí es donde vamos a renderizar nuestro componente del servidor. Y vamos a usar este archivo del cliente para hacerlo. Así que vamos a escribir este archivo aquí, _client. Así que lo pongo aquí, _client.jsx. Y en la parte superior, voy a importar algunos recursos. Primero, necesitamos createRoot, que es la forma en React de renderizar algo en un div.

5. Componentes del Servidor y Renderizado del Lado del Cliente

Short description:

Probablemente lo estarías usando para siempre, lo supieras o no. También tenemos el lado del cliente de la historia del DOM del servidor. Esto es createFromFetch, un asistente realmente increíble de React Core que toma una llamada fetch al componente del servidor que acabamos de hacer y lo convierte en DOM virtual para nosotros. Entonces, para hacer eso, primero voy a hacer mi root. Necesitamos actualizar nuestro servidor. Vamos a empaquetar el archivo del cliente y exponer nuestra carpeta de construcción en la red. Ahora deberíamos tener todo lo que necesitamos para al menos ver el archivo del cliente aquí. Entonces deberíamos ver en nuestra carpeta de construcción, aparece el cliente subrayado y toda esa hermosa bondad de React empaquetada.

Probablemente lo estarías usando para siempre, lo supieras o no. Y también tenemos el lado del cliente de la historia del DOM del servidor. Esto es createFromFetch, un asistente realmente increíble de React Core que toma una llamada fetch al componente del servidor que acabamos de hacer y lo convierte en DOM virtual para nosotros. Entonces, para hacer eso, primero voy a hacer mi root. Va a ser un document getElementByID root. Y también necesitamos llamar a createRoot en eso. Ahí vamos. Y vemos un pequeño error de TypeScript. Solo voy a decir que se calle. Sabemos que podría estar indefinido, pero si está indefinido, toda nuestra aplicación se bloquea. Y no podemos hacer mucho más que eso. Entonces digamos create from fetch y luego haremos fetch desde ese slash RSC. Y luego, cada vez que un componente se transmite por el cable, sin importar cuántas veces necesite resolver suspense render en ese div el componente, la transmisión actualizada. Y eso es todo lo que tienes que hacer, lo creas o no. Necesitamos actualizar nuestro servidor. Primero, para construir este archivo, voy a bajar a mi ES build y voy a agregar otra llamada para construir el archivo del cliente. Esto va a tener un conjunto ligeramente diferente de configuraciones. Entonces lo voy a ejecutar de manera diferente aquí. Configuración del cliente, esto va a tener el mismo bundler y lo convertirá en ESM que teníamos antes, excepto que ahora también vamos a empaquetar paquetes NPM. Obviamente no tienes que empaquetar NPM en Node pero en el navegador, necesitas empaquetar todas tus dependencias. Entonces eso es lo que vamos a hacer. Y vamos a empaquetar el archivo del cliente y en la parte superior aquí, vamos a... Oh, ¿qué vamos a hacer? Oh, también necesitamos exponer nuestra carpeta de construcción en la red porque en HTML, vemos que vamos a slash build slash client y nuestro servidor necesita responder con el archivo que acabamos de construir. Entonces, para eso, voy a agregar app.use y luego si intentas obtener algo de la carpeta de construcción, sírvelo como un activo estático. Y este es un asistente muy agradable que Hano nos da llamado serve static y eso va a construir todo estáticamente. Así que déjame agarrar esa importación, serve static. Y ahora deberíamos tener todo lo que necesitamos para al menos ver el archivo del cliente aquí. Entonces deberíamos ver en nuestra carpeta de construcción, aparece el cliente subrayado y toda esa hermosa bondad de React empaquetada. Son alrededor de 50 o 60k para empezar. Entonces, los componentes del servidor no son 0js.

6. Componente del Servidor como Receptor del Cliente

Short description:

El componente del servidor también puede actuar como un receptor del cliente, renderizando elementos y proporcionando interactividad. Podemos agregar estilos para hacer que la configuración se vea más agradable, como flexbox y tailwind. Además, podemos incorporar interactividad, como un botón de me gusta, utilizando la directiva use-client. Esta directiva descarga el componente por separado para evitar un renderizado accidental del servidor. Para habilitar esta funcionalidad, necesitamos crear una lógica de empaquetador y un plugin de resolve-client-imports.

Te están mintiendo si creías eso. En realidad, también es un receptor del cliente. Entonces, si subimos aquí, podemos ver que ahora está cargando todo y nuestro álbum se transmite a la vista, pero esta vez está renderizando elementos. Mira eso. Entonces, si refresco esto, puedes ver que aparece la carga y luego entra el resto. También voy a agregar algunos estilos, solo para que se vea un poco más agradable. Los escribí antes para mostrar, porque todos ustedes no tienen que verme centrar un div. Así que aquí tenemos flexbox, algunas cosas básicas de tailwind y si vuelvo a ejecutar eso, deberíamos ver una configuración más agradable aquí, llamada Spodifant, que es un falso Spotify. No lo sé. Y vemos que tenemos nuestra publicación y todas nuestras canciones renderizándose. Genial.

Entonces, usamos React para hacer lo que PHP ha hecho durante dos décadas. ¿Qué pasa con la interactividad? Eso es para lo que está destinado React. Entonces, vamos a necesitar agregar algo de interactividad. Hagamos el ejemplo básico de un botón de me gusta. Así que haremos like.jsx, y para esto estoy armando el contador básico que has visto en cada demostración anterior. Llevar un registro de los me gusta, y aquí abajo tenemos set likes y mostramos al usuario cuántos me gusta hemos incrementado desde allí. Todo parece igual, excepto en la parte superior aquí tenemos una mágica directiva use-client. Quizás hayas oído hablar de esto. Esta es la nueva bandera en React para decir que cuando llegas a un componente que comienza con esto, descárgalo por separado para que no lo rendericemos accidentalmente en el servidor en la transmisión. Así que ahora necesitamos crear alguna lógica de bundler para buscar use-client. Así que déjame volver aquí para hacer eso. Vamos a necesitar un plugin. Esta es una característica en todos los principales bundler. También voy a armar un plugin básico para nosotros. T-plugin, ahí vamos. Se va a llamar resolve-client-imports, y esta es una verificación básica para decir cada vez que intentas importar un archivo .jsx como, oh, déjame hacer eso dentro de mi servidor componente. Digamos que cada álbum es agradable. Podemos ver que like.jsx se importa aquí, y nuestro bundler dirá en cualquier momento que obtengas uno de esas importaciones elegantes, oh, parece que también necesito guardar algo. Ahí vamos.

7. Lectura y Seguimiento de Archivos del Cliente

Short description:

Deberías leer el contenido del archivo y verificar si comienza con 'use client'. Si es así, realiza un seguimiento de esos archivos del cliente y agrégalos a la lista para el empaquetado. Indica a ES Build que los trate como externos y colócalos en la carpeta de compilación para que el navegador los importe.

Deberías leer el contenido del archivo. Así que digamos contenido, oh, desearía poder hacer dno.readfile. Tengo que usar promesas de Node. Así que permíteme hacer una lectura de archivo desde allí, y luego podemos tomar el contenido y decir si el archivo comienza con. Voy a hacer comillas dobles, comillas simples, use client. También verifica las comillas dobles por cierto. Eso me ha quemado en el pasado, pero sé que estamos usando comillas simples aquí. Entonces, si comienza con use client, primero quiero hacer un seguimiento de todos esos archivos del cliente. Así que permíteme crear un pequeño mapa aquí arriba. Estos van a ser los puntos de entrada del cliente, y lo haré un conjunto. Esto es básicamente un array que elimina duplicados. Y aquí voy a decir, hey encontramos un componente del cliente, agrégalo a la lista y lo empaquetaremos más tarde. También le diremos a ES Build que haga un retorno temprano aquí, porque queremos manejar esto nosotros mismos. Así que diré, va a ser la ruta relativa, pero reemplázala con la ruta de salida construida. Así que vamos a construir nuestro JSX a JS en un momento. Así que dile a ES Build que lo encontrarás aquí. Trátalo como externo. No intentes empaquetarlo en nuestro paquete del servidor. Y luego lo vamos a poner en nuestra carpeta de compilación para que el navegador lo importe.

8. Construcción de Componentes del Cliente

Short description:

Hemos simulado los componentes del cliente y los hemos añadido a los puntos de entrada. Utilizando esmodule-lexer, rastreamos las exportaciones de cada archivo y las etiquetamos como referencias del cliente. Esto permite que React reconozca los componentes del cliente y los maneje en consecuencia.

Bien, ahora que hemos simulado eso, necesitamos construir nuestros componentes del cliente. Así que permíteme ir aquí abajo en nuestros puntos de entrada. Vamos a añadir nuestros puntos de entrada del cliente a la lista. Y vamos a desactivar los derechos de archivo, porque ahora quiero ser el dueño de los archivos.

Vamos a hacer un poco de post-procesamiento en el contenido de los archivos. Así que permíteme decir, aquí están los archivos de salida. Salen de esbuild. Y para cada uno de ellos, permíteme hacer un pequeño bucle, asíncrono, archivo. Para cada archivo en el bucle, vamos a rastrear todas las exportaciones de ese archivo. Porque en React podrías exportar cualquier número de componentes. Necesitamos etiquetar todos ellos como referencias del cliente. Oh hombre, desearía estar usando Deno, deja de recordármelo.

Así que aquí arriba, voy a importar este módulo genial llamado esmodule-lexer. Este es un compilador basado en go que es capaz de recorrer un archivo y analizar todos los nombres de exportación para que no tengamos que hacer todas las locuras de regex nosotros mismos. Así que diré, aquí están las exportaciones. Salen de analizar el contenido de los archivos, el contenido del texto, eso es. Y para cada una de las exportaciones, para ext de exportaciones, vamos a escribir en el archivo algunas etiquetas extra en esas exportaciones. Así que voy a hacer una variable mutable aquí. Nuevos contenidos, vamos a empezarlo como el contenido del archivo. Y vamos a añadir alguna información nueva. Así que nuevos contenidos, más iguales. Y luego aquí abajo vamos a decir, para cada nombre de exportación, vamos a añadir un tipo de decorador. Y esto va a tener un valor especial. Símbolo para react referencia del cliente. Esto es algo que React va a buscar mientras renderiza todos los componentos en el árbol. Si alguna vez encuentra una función de componente con la etiqueta react referencia del cliente, sabe, oh, he encontrado un componente del cliente. Dime qué hacer. Así que primero le dijimos que es un componente del cliente. Ahora tenemos que decirle, bien, cuando encuentres un componente del cliente, no intentes renderizarlo. En su lugar, simúlalo con una importación y lo importaremos desde nuestro servidor.

9. Etiquetado y Mapeo de Componentes del Cliente

Short description:

Dentro del navegador, añadimos una clave especial a cada ruta de archivo más el nombre de la exportación para crear un identificador único. Esto se escribe en un mapa global de componentes del cliente, que se pasa al servidor. El mapa de componentes del cliente se utiliza durante la renderización para generar declaraciones de importación para los componentes del cliente. Los metadatos de cada componente incluyen la ruta del archivo del servidor, el nombre, un array de chunks vacío, y async true para la importación asíncrona. La resolución de problemas está en curso.

Dentro del navegador. De esa manera podemos ejecutar use state y hacerlo interactivo. Entonces, ¿cómo lo etiquetamos? Bueno, vamos a añadir una clave especial a cada uno de estos. Y la clave puede ser cualquier identificador único. Pero un identificador que sea bastante fácil de usar. Simplemente la ruta del archivo más el nombre de la exportación. Porque eso debería ser muy único. Y vamos a escribir esto en un mapa que vamos a pasar a nuestro servidor.

Voy a hacerlo global. No uses globales en casa, pero es una demostración. Así que vamos a hacer eso. Vamos a decir mapa de componentes del cliente, objeto vacío, y aquí abajo, oh, probablemente debería hacerlo singular. Ahí vamos. Aquí abajo voy a pasar el mapa de componentes. Así que mientras está renderizando el stream, tiene este mapa de todos los componentes del cliente que existen, para que pueda convertirlo en declaraciones de importación. Aquí abajo también voy a actualizar nuestro mapa de componentes del cliente en la clave. Y necesita un poco de metadatos. Así que primero vamos a decirle dónde encontrarlo en el servidor, que va a estar dentro de slash build slash like dot js. Y necesitamos un poco de masaje para obtener ese tipo de ruta. Así que sí, resuélvelo desde la carpeta de construcción, toma la ruta del archivo. Sólo sé que esto va a convertir nuestro botón de like en slash build slash like dot js. Así que podemos importarlo desde esta carpeta de construcción en tu navegador. El resto es bastante sencillo. El nombre va a ser el nombre de la exportación en el archivo. Vamos a tener chunks como un array vacío, porque eso es una característica de webpack. Apaga eso. Y también haremos async true, lo que significa hacer una importación asíncrona. ¡Oh no! ¡Ah! Maldita sea, estábamos llegando. Vale. ¿Cable? Sí, déjame comprobar eso.

10. Resolución de Problemas y Pasos Finales

Short description:

Parece que lo tengo allí. ¿Es un problema de sobrecalentamiento? Quizás. Quizás. ¿Debería esperar? ¡Esperaré la placa! Eso es todo, gente. ¡Compartir en vivo, en tu máquina! ¡Todos unirse a la compartición en vivo! Tenemos nuestro mapa de cliente, ¿verdad? Estamos llevando un registro de todos nuestros componentes de cliente. Marcamos el tipo. Lo último que necesitamos hacer es decirle, cada vez que encuentres esta exportación, busca este ID en el mapa. Con suerte, esto debería ser todo lo que necesitamos para renderizarlo. Vemos que aparecen un par de chunks más aquí. Tenemos el botón de like, empaquetado para el navegador. Y vemos que la exportación de like fue etiquetada con nuestra referencia de cliente. Así que ahora, si visitamos esto en nuestro navegador, veremos obteniendo álbumes, y luego un error. Pero este es esperado. Así que aquí abajo, al menos espero que sea el uno. Así que si miramos aquí, vemos que webpack require no está definido.

Parece que lo tengo allí. ¿Es un problema de sobrecalentamiento? Quizás. Quizás. ¿Debería esperar? ¡Esperaré la placa! ¡Hey! Eso es todo, gente. Sí, no salgan de aquí temprano. Todos ustedes tienen buenas reacciones, está bien. Compartir en vivo, ¡en tu máquina! ¡Todos unirse a la compartición en vivo! Oh Dios, ¿hago eso? Eso parece lo menos seguro del mundo. Pero podría, podría. Vale. Bueno, podemos esperar. El problema es que no puedo seguir hablando de mis cosas. Todos ustedes necesitan ver lo que estoy haciendo. ¡Hey! ¡Muy bien! Eso es bueno, estamos casi al final.

Entonces, oh Dios, ¡vale! Mantendremos el ritmo, mantendremos el ritmo como lo teníamos antes. Entonces, vale, tenemos nuestro mapa de cliente, ¿verdad? Estamos llevando un registro de todos nuestros componentes de cliente. Marcamos el tipo. Lo último que necesitamos hacer es decirle, cada vez que encuentres esta exportación, busca este ID en el mapa. Así que tenemos nuestro mapa aquí, y podemos ver JsonStringify, la clave, simplemente poner comillas alrededor básicamente. De esa manera, cada vez que rastrea el componente, sabe buscar esta importación para resolverlo en tu navegador. Eso debería ser todo lo que necesitamos. Lo último que tengo que hacer es simplemente escribir el archivo en el sistema de archivos, porque estamos poseyendo ese proceso ahora. Y con suerte, cruzando los dedos, esto debería ser todo lo que necesitamos para renderizarlo. Así que vemos que aparecen un par de chunks más aquí. Tenemos el botón de like, empaquetado para el navegador. Y vemos que la exportación de like fue etiquetada con nuestra referencia de cliente. ¡Muy guay! Así que ahora, si visitamos esto en nuestro navegador. Veremos obteniendo álbumes, y luego un error. Pero este es esperado. Así que aquí abajo, al menos espero que sea el uno. Así que si miramos aquí, vemos que webpack require no está definido.

11. Hack de Webpack y Renderizado de Álbum

Short description:

Para hacer que webpack funcione con los estándares del navegador, podemos agregar un hack de webpack al archivo del cliente. Esto nos permite importar el archivo construido por el servidor en lugar de usar webpack require. Después de reiniciar el servidor, los álbumes aparecen con botones clickeables.

Eso es porque webpack no utiliza los standards del navegador, sorprendentemente. Entonces, si saltamos a nuestro archivo de cliente, podemos agregar esta pequeña cosa. Lo acabo de escribir, hack de webpack. Esto está diciendo que cada vez que intenta ir a la ventana y hacer un webpack require, simplemente use la plataforma y diga, haga una importación a mi servidor. Tengo el archivo construido para ti. Y el ID va a ser /build/like.js. Así que allá vamos. Ahora, si reiniciamos nuestro servidor, y nos dirigimos aquí, deberíamos ver obteniendo álbumes. Y luego nuestros álbumes aparecen con botones clickeables. Mira eso. Sí. Muy bien. Entonces, es realmente la primera ejecución en la que nada salió mal excepto el proyector.

12. Ampliando la Demo y Recursos Adicionales

Short description:

Hay mucho más que puedes hacer desde aquí, como configurar un enrutador de archivos o hacer un parámetro de consulta con un cuadro de búsqueda para obtener una nueva lista de álbumes. Discutí estos temas en un stream de invitados con Dan Abramov, que puedes encontrar en el readme en el repositorio que compartiré. El video es largo, pero está dividido en capítulos para facilitar la navegación.

Bien. Así que eso es todo lo que quería mostrarte para la demo básica, pero por supuesto hay mucho más que puedes hacer desde aquí. Por ejemplo, podrías haber estado pensando, bueno, eso es solo una ruta. ¿Cómo configuraría un enrutador de archivos? ¿Y también cómo solicitaría este componente de nuevo? Supongamos que tengo un cuadro de búsqueda y quiero hacer un parámetro de consulta con la búsqueda y obtener una nueva lista de álbumes desde el servidor. De hecho, pasé por todas esas cosas en un stream de invitados con Dan Abramov hace un tiempo atrás. Así que si quieres revisar este recurso, estará en el readme en un repositorio que compartiré al final. Es un video largo. Sí, son cuatro horas, pero hay muchos capítulos aquí para saltar a tu parte favorita. Así que si solo quieres aprender a configurar un cuadro de búsqueda o aprender a configurar un enrutador O simplemente quieres escuchar a Dan Abramov y a mí charlar sobre GraphQL. Todo eso está disponible aquí y puedes hojearlo para encontrar un recurso.

QnA

Conclusión y Preguntas y Respuestas

Short description:

Por otro lado, tengo videos de un minuto, que sabes que podrías ver. Puedes encontrar todos esos en mi canal de YouTube y también en Twitter. Estoy en bholmesdev en todas las principales plataformas. Así que si encontraste esto útil en absoluto, sígueme allí y comparto muchos recursos sobre React y también Astro. Gracias por tu tiempo. ¿Vale la pena usar RSEs fuera de Next.js? Diría que probablemente es demasiado temprano para usarlos fuera de Next.js. Trabajo en un marco llamado Astro, que está en Next.js. ¿Alguna noción de cuándo podría suceder eso realmente? No lo sé. Estoy tratando de conseguir como un enchufe, ya sabes, o algo... Mira en los próximos cinco trimestres fiscales. Tal vez, no lo sé.

Por otro lado, tengo videos de un minuto, que sabes que podrías ver. ¿Cuántos son? Sesenta veces cuatro cortos en el tiempo de ese video. Puedes encontrar todos esos en mi canal de YouTube y también en Twitter. Estoy en bholmesdev en todas las principales plataformas. Así que si encontraste esto útil en absoluto, sígueme allí y comparto muchos recursos sobre React y también Astro.

Vale. Eso es todo lo que quería mostrarles a todos. Gracias por tu tiempo. Aplaudan chicos, vamos.

Vamos con esta. ¿Vale la pena usar RSEs fuera de Next.js? ¿Vale la pena? Vale la pena... Vale. ¿Somos dignos? ¿Vale la pena usarlos fuera? ¿Vale la pena usarlos? Sí. Diría que probablemente es demasiado temprano para usarlos fuera de Next.js. La única razón por la que pasé todas las horas para averiguar eso, trabajo en un marco que está en Next.js llamado Astro. Así que tenía mucha curiosidad de cómo podemos hacer que esto funcione dentro de V popular bundle... O, digamos, Astro. O Astro. O, sí. Sí. ¿Alguna noción de cuándo podría suceder eso realmente? No lo sé. Vale. Bien. Sí. Estoy tratando de conseguir como un enchufe, ya sabes, o algo... Exactamente. ¿Sabes? Sí. Mira en los próximos cinco trimestres fiscales. Tal vez, no lo sé. No sé cómo mides las cosas, profesionalmente.

Integrando los Componentes del Servidor React con VT

Short description:

Estamos trabajando en incorporar los Componentes del Servidor React en VT, que es un empaquetador para aplicaciones React simples. Es un esfuerzo en curso con todo un equipo central involucrado. Sin embargo, las acciones del servidor presentan un problema difícil que requeriría cambios significativos. Actualmente, solo es compatible con webpack.

Algo de, ya sabes... Algo de tiempo. Pasará. Correcto. Estamos construidos sobre VT, sin embargo. Por lo tanto, es un esfuerzo en curso para incorporarlo en VT, que es un bundler para aplicaciones React sencillas. Astro, Sveltekit y Nuxt también están construidos sobre VT. Por lo tanto, es todo un equipo central de personas que están interesadas en tratar de descifrarlo. Y VT utiliza el bundler que estaba mostrando. Por lo tanto, hay mucho que podríamos hacer para descifrarlo. Pero las acciones del servidor complican las cosas, es un problema muy difícil. Eso requeriría algunos cambios importantes. Así que por ahora es algo solo compatible con webpack.

Importancia de Apoyar los Componentes del Servidor React

Short description:

Los componentes del servidor React deben ser apoyados por cualquier persona que utilice React o los principales marcos de trabajo. Dará forma al ecosistema, y muchas bibliotecas están haciendo la transición para utilizar componentes del servidor. Incluso si tu marco de trabajo no tiene usuarios que escriban componentes del servidor día a día, será necesario en el próximo año o dos. Los autores de las bibliotecas deben intentar hacer funcionar los componentes del servidor y colaborar utilizando un empaquetador compartido como VEET.

Bueno, tengo que decir, supongo que la pregunta más votada es una línea de Jurassic Park. ¿Alguna vez te has preguntado si nuestros científicos estaban tan preocupados por si podían, que nunca se detuvieron a preguntar si deberían. Pero esa es una pregunta interesante. En el contexto aquí, ahora que sabes tanto sobre los React componentes del servidor. ¿Estás como, uh, eso parece una buena idea o, uh, no sé. He mirado en el vientre de la bestia. Me asustó lo que vi. ¿Hizo esto, como, mirar hacia atrás? Sí. Sí, con errores de servidor y cliente. Oh sí. Sí. Um, así que siento que definitivamente es algo que debería ser apoyado por cualquiera que esté utilizando React o los principales frameworks porque va a dar forma al ecosistema a partir de aquí. Porque muchas bibliotecas ya están haciendo la transición para utilizar componentes del servidor y poner ese decorador de cliente para que si estás en ese contexto, todavía funciona como tú lo esperarías. Así que creo que incluso si tu marco de trabajo no tiene usuarios que escriban componentes del servidor día a día sólo para apoyar las principales bibliotecas de React, va a ser necesario en el próximo quizás como uno o dos años. Definitivamente estoy curioso por los sentimientos en el panel de componentes del servidor cuando lleguemos a eso. Absolutamente. Pero, sí, parece que estamos en los primeros días. Tenemos los patterns. Tenemos los primitivos. La gente los está probando en producción. Ahora el ecosistema necesita moverse en esa dirección y eso llevará más tiempo. Pensé que vi una pregunta, no la veo aquí, pero sobre lo que los autores de las bibliotecas deberían hacer con RSCs y ¿alguna idea sobre eso? Sí. Quiero decir que realmente depende de para qué sea tu biblioteca porque sé que hay bibliotecas como Redwood y Remix que han estado creo que probándolo en formas muy, muy tempranas para ver si esto tiene sentido con el modelo que tenemos ahora porque la gente ha hecho felizmente aplicaciones de React renderizadas por el servidor durante un tiempo y no necesitas componentes del servidor para construir aplicaciones efectivas. Son sólo esta mejora para hacerlas un poco diferente. Quizás hacerlas sólo del lado del servidor para cosas que lo necesiten. Así que creo que es algo que cada autor de marco de trabajo debería mirar, intentar hacer funcionar, y esperemos que podamos trabajar juntos utilizando un bundler compartido como VEET, para que si una persona se pone realmente curiosa y lo construye, todos podemos beneficiarnos y todos los marcos pueden probarlo. Mucho amor por VEET. Aplausos para VEET. Sí, VEET. Vamos.

Entendiendo las APIs de los Componentes del Servidor

Short description:

Nuestras APIs de componentes del servidor aún no están documentadas. El proceso para descifrarlas implica sumergirse en el código fuente y acudir a expertos como Dan Abramoff. Los autores de los marcos de trabajo son receptivos a las preguntas genuinas y a los esfuerzos por entender los componentes del servidor. Hacer preguntas y explorar el código fuente debería conducir a una mejor documentación y a una comprensión más profunda de los componentes del servidor.

VEET. Muy bien. Me encanta esta pregunta en particular. Así que nuestras APIs de componentes del servidor aún no están documentadas. ¿Cuál fue tu proceso para descifrar esto? Código fuente. Sí, claro. Quiero decir, eso es realmente importante. Como desarrollador, es una buena habilidad aprender a entrar en ello, descifrarlo. Sí. Y también enviando mensajes directos casualmente a Dan Abramoff. Sí. Bueno, OK. Eso fue muy útil. Más útil de lo que pensarías. Bueno, en realidad pensarías eso, estoy seguro. Pero creo que los autores de los marcos de trabajo estarían interesados. Quiero decir, si tienes preguntas reales y genuinas para la gente que son significativas y como, hey, hice el esfuerzo aquí. ¿Puedes ayudarme? Sí, están dispuestos a ello. Sí, el equipo meta es realmente, realmente receptivo en este momento. De hecho, recibí otro mensaje de Matt en el equipo meta que está tratando de trabajar en recursos de educación. ¿Cómo entiendes los componentes del servidor a nivel raíz? Así que creo que, como mínimo, hacer todas estas preguntas debería conducir a una mejor documentación que explique lo que está pasando bajo el capó. Eso es lo que espero. Y también, sí, quiero decir, sumergirse en el código fuente no es... Bueno, está bien, es bastante aterrador, pero no es tan aterrador como podrías pensar. Como leer una buena novela de misterio. Sí, y ya hay algunos recursos. Como el Equipo Central tiene una demo de React Flight. Flight es como su nombre interno para los componentes del servidor de hace años. Hay repositorios en los que me metí para entender cómo encajan las piezas. Así es como encontré la biblioteca de transmisión legible y create from fetch, que es la función más mágica que hace mucho por ti.

Recursos y Micro Frontends

Short description:

Así que hay recursos. Están ahí fuera. No tienes que ir totalmente por tu cuenta. ¿Podemos hacer lo mismo para los micro frontends? ¿Cómo encajan los RSCs en el modelo de micro frontends o islas? Las islas son una forma de poner un componente del lado del cliente dentro de una plantilla renderizada por el servidor. Los componentos del servidor son como la arquitectura de islas. Los componentes del servidor son una nueva forma de hacer islas. ¿Prevés algún problema de seguridad con los componentes del servidor? Siempre surge la inyección de SQL. Tenemos herramientas para eso.

Así que hay recursos. Están ahí fuera. No tienes que ir totalmente por tu cuenta.

Muy bien, ¿podemos hacer lo mismo para los micro frontends? O supongo, ¿cómo encajan los RSCs en el modelo de micro frontends o islas? Correcto, sí, islas, TM. Eso es algo que... Astro solo característica. Inventamos las islas. No, en realidad fue una publicación de blog del equipo de Preact, creo, que habló de las islas hace un tiempo. Vale, sí. Solo voy a volcar su captura de pantalla explicando las islas y la pondré en nuestra documentación. Esto existe. Está bien.

Sí. Breve introducción a lo que son las islas, es una forma de poner un componente del lado del cliente dentro de una plantilla renderizada por el servidor. Así que tienes algo de HTML, se renderiza en el lado del servidor. Y luego, en este pequeño div aquí, es como, quiero un carrusel de imágenes aquí y el resto es solo HTML. Y ese es el punto donde un bundler puede decir, oh, eso es una isla. Usaré Preact para cargar un componente en ese div. o elegir cuándo cargarlo, todas esas cosas. Así que los componentes del servidor son un poco más difíciles, porque los componentes del servidor son algo así como la arquitectura de las islas, porque cuando viste la directiva use-client, estás creando esta pequeña isla del cliente donde es como el botón Like va a cargar JavaScript, pero el resto de él no. Esa es realmente la base de lo que es una isla. Así que parece que los componentes del servidor son una nueva forma de hacer islas. Y podrías tener una isla de componentes del servidor dentro de HTML que también renderiza más cosas. Podrías volverte loco, pero es solo otra forma de hacerlo, en comparación con lo que está haciendo Astra.

¿Prevés algún problema de security con los componentes del servidor? Siempre surge la inyección de SQL. No sé por qué. Tenemos herramientas para eso. Correcto, en esa demo de Versal que mostraron, que no era – Clásico. – inyección de SQL. Me recuerdo a mí mismo de ello.

Desafíos de seguridad y salvaguardas

Short description:

La seguridad para las acciones del servidor es un desafío difícil. La agrupación de acciones del servidor puede llevar a exponer accidentalmente información sensible al cliente. Se han implementado salvaguardas, como restringir las acciones del servidor dentro de la directiva use client. Las bibliotecas como la referencia taint proporcionan protección adicional al marcar el código potencialmente inseguro. Las características de seguridad como estas son valiosas para prevenir la exposición no intencionada de datos sensibles.

Lo fue. Sí, creo que – No, no lo fue. ¿No lo fue? Oh, no lo fue. No, porque ellos manejan eso – Correcto, correcto, correcto, ellos usan la cosa de la plantilla. Correcto, sí, ellos usan el – Si no sabes de qué estamos hablando, no te preocupes, no es algo. Pero sí, creo que la security para las acciones del servidor es realmente difícil.

No pudimos demostrar eso porque agrupar las acciones del servidor es todo un desafío, pero la parte extraña de ellas es que puedes escribir una función de servidor, y puedes escribirla de alguna manera dentro del componente. Así que podrías escribir un manejador que diga, escribe en la database, y puedes pasarlo a un formulario, y podrías tener un cierre allí donde escribiste tu backend dentro de un componente, así que si tuvieras estas variables que se están pasando a esa función, podrías por error agrupar esas variables para el cliente, y ahora hay muchas más salvaguardas alrededor de eso. Como, si tienes use client, no puedes poner una acción de servidor allí, tienes que ponerla un poco más arriba, y hay muchas bibliotecas divertidas, como la referencia taint donde puedes – Sí, sé cómo mancharlo. Como, sí, puedes marcar algo como, si esto alguna vez llega al cliente, explota la construcción, lo cual es – es una característica de seguridad agradable, honestamente – Característica de seguridad. Característica de seguridad, la habría usado regularmente. Sí.

Muy bien, un gran aplauso para Ben, muchas gracias. Gracias, lo aprecio.

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 2023React Advanced Conference 2023
27 min
Simplifying Server Components
Server Components are arguably the biggest change to React since its initial release but many of us in the community have struggled to get a handle on them. In this talk we'll try to break down the different moving parts so that you have a good understanding of what's going on under the hood, and explore the line between React and the frameworks that are built upon it.
React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
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
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 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
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
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.

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
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
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
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
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