Lecciones aprendidas al crear un nuevo marco sobre React

Rate this content
Bookmark
Slides

React es tan poderoso que se puede utilizar para más que el desarrollo frontend. Por ejemplo, crear una interfaz de usuario de forma programática en el backend utilizando un sistema basado en reglas o aprendizaje automático es otro caso de uso en el que React puede ser la mejor opción. De manera similar, la documentación solía tener solo archivos .md pero ahora también incluye archivos .mdx que contienen código de React. Para cumplir con estos casos de uso, los desarrolladores necesitan comprender los aspectos internos de React y las herramientas que lo rodean. Algunas fuentes excelentes son bases de código populares como create-react-app, Next.js, etc. En esta charla, compartiré las lecciones que aprendimos al crear un marco que logra más que el desarrollo web utilizando React. En primer lugar, cubriré cómo la base de código de create-react-app es la mejor base de código para comprender cómo se pueden utilizar webpack, babel, eslint, typescript, etc. junto con React. En segundo lugar, compartiré cómo Next.js nos enseña a crear un marco de JavaScript donde podemos escribir el backend y el frontend en el mismo archivo y aún así poder separar los dos durante las llamadas. En tercer lugar, compartiré cómo nuestro marco admite complementos, es decir, el código de React reside en múltiples repositorios pero todo este código puede compartir un solo tiempo de ejecución de React dentro del navegador. Este es un uso muy avanzado de React que no se puede lograr mediante la división de código utilizando React.lazy. Esta charla permitirá a los desarrolladores utilizar React para más que el desarrollo frontend.

20 min
24 Oct, 2022

Video Summary and Transcription

React es una herramienta versátil que va más allá del desarrollo frontend y se puede utilizar para sintetizar música. Crear un marco especializado con React requiere comprender el ecosistema de herramientas y la filosofía de diseño de React. Examinar bases de código sólidas como create-react-app puede acelerar el desarrollo. El manejo de efectos secundarios y la sustitución de módulos se pueden lograr mediante técnicas como la eliminación de código muerto y la sustitución de módulos en caliente. Mantener el estado del componente e implementar la sustitución de módulos en caliente son consideraciones importantes para una aplicación de React.

Available in English

1. Introducción a React y sus aplicaciones

Short description:

Hola a todos, estoy agradecido con el equipo de React Advanced London por invitarme a compartir lo que he aprendido al crear un nuevo framework de pila completa. Un poco sobre mí, mi nombre es Shyam Swaroop y soy el cofundador y CTO de Atrilabs. He estado usando React durante más de un año y se ha convertido en una de las opciones principales para generar HTML. React va más allá del desarrollo front-end. Estamos mezclando contenido simple en archivos markdown con código de React para escribir contenido. React Native se utilizó para crear aplicaciones móviles nativas para Android e iOS. React Reconciler se puede adaptar para renderizar la interfaz de usuario en cualquier dispositivo. Recientemente me encontré con un caso de uso muy interesante que no implica renderizar la interfaz de usuario, sino sintetizar música mediante la escritura de código de React.

Hola a todos, estoy agradecido con el equipo de React Advanced London por invitarme a compartir lo que he aprendido al crear un nuevo framework de pila completa que permite a los desarrolladores escribir código de React para construir interfaces de usuario. Un poco sobre mí, mi nombre es Shyam Swaroop y soy el cofundador y CTO de Atrilabs, una empresa que está construyendo un emocionante nuevo framework de pila completa. Estaba estudiando una maestría en la Universidad de Columbia, luego abandoné y comencé a trabajar en mi propia startup. He estado usando React durante más de un año, antes era más de una persona de Angular. Podemos encontrar el uso de JSX más allá del desarrollo web. Se ha convertido en una de las opciones principales para generar HTML, un caso de uso muy similar a SSG, SSR, o se puede decir un reemplazo para los motores de plantillas. Algunos proyectos han extendido la gramática de lenguajes como Go y Python para incluir JSX.

React va más allá del desarrollo front-end. Estamos mezclando contenido simple en archivos markdown con código de React para escribir contenido. Esto ha dado lugar a frameworks que se especializan en tareas específicas como la documentación. Un ejemplo popular sería DocuSource. React Native se utilizó para crear aplicaciones móviles nativas para Android e iOS. Hay algunos frameworks que se pueden utilizar para crear aplicaciones nativas de Windows o MacOS utilizando React. React Reconciler se puede adaptar para renderizar la interfaz de usuario en cualquier dispositivo. Recientemente me encontré con un caso de uso muy interesante que no implica renderizar la interfaz de usuario, sino sintetizar música mediante la escritura de código de React. Recuerdo el poder que sentí cuando aprendí React o Bison, donde solo escribes una gramática libre de contexto y genera el analizador. Desde entonces

2. Creando un Framework Especializado con React

Short description:

Ahora que conozco React y las herramientas para manejar una base de código de React, puedo crear fácilmente un framework especializado para mejorar la productividad del desarrollador. Comprender el ecosistema de herramientas y la filosofía de diseño de React fue crucial para definir las filosofías del framework. Herramientas como compiladores, transpiladores, empaquetadores y linters permiten manejar diferentes sintaxis de JavaScript e importar archivos de typescript que no son de JavaScript. Soportar React tanto en navegadores como en Node.js requiere comprender la diferencia entre los tipos de módulos. Elegir el empaquetador y las herramientas de construcción adecuadas depende de tus requisitos, como los code mods. Utilizamos Webpack y Babel juntos, aprovechando la función de consulta de recursos de Webpack para obtener una mejor intellisense y comprobaciones en tiempo de construcción.

Ahora que conozco React y las herramientas para manejar una base de código de React, puedo crear fácilmente un framework especializado para mejorar la productividad del equipo de desarrolladores web. Hemos visto varios frameworks basados en React y todos ellos innovan y se diferencian en sus ofertas para los desarrolladores. No fue fácil alcanzar este nivel de comodidad. Cuando decidí crear un framework de pila completa, me llevó más de un mes comprender el ecosistema de herramientas alrededor de React o JavaScript en general. Esto fue aún más difícil porque tuve que adentrarme un poco en la historia de JavaScript y cómo surgieron. Me encontré con la filosofía de diseño de React, lo que me motivó a escribir filosofías para el framework. Realmente me ayudó a decidir dos categorías principales de herramientas que nuestro framework debería utilizar. Esas son el empaquetador y el transpilador. Más sobre esto más adelante. Una vez que los tuvimos definidos, solo entonces pudimos pasar al desarrollo del framework.

Cuando pensamos en un framework, rápidamente comenzamos a pensar en que proporcionan abstracción, funciones auxiliares, componentes, renderizado en el lado del servidor, generación en el lado del servidor, etc. Damos muchas otras cosas por sentado. Por ejemplo, ¿cómo manejamos diferentes sintaxis de JavaScript y typescript en una sola base de código? ¿Cómo podemos importar archivos de typescript que no son de JavaScript en archivos de JavaScript o typescript? Por ejemplo, importamos archivos de imagen como URL de cadena y VG como componentes de React, etc. Estos se han convertido en los estándares de facto para una buena experiencia de desarrollo en cualquier framework. Esto es posible gracias a herramientas como compiladores, transpiladores, empaquetadores, formateadores y linters. El renderizado en el lado del servidor es un requisito común para la mayoría de los frameworks, si no todos. Por lo tanto, nuestro framework debe admitir React tanto en navegadores como en Node.js. En otras palabras, es crucial comprender la diferencia entre los diferentes tipos de módulos, especialmente ECMAScript y CommonJS. Cuando pensamos en qué empaquetador y herramientas de construcción utilizar, principalmente pensamos en cuán rápido se ejecutan. Pero como creador de un framework, es posible que debas pensar más en tus requisitos. Por ejemplo, si la experiencia del desarrollador implica code mods, es posible que prefieras algo como Babel en lugar de ESBuild porque Babel expone el AST para cargar como complementos, mientras que ESBuild no lo hace. Estamos utilizando Webpack y Babel juntos en un framework. Un framework permite a los desarrolladores escribir complementos, etc., donde los módulos de JavaScript se tratan como recursos diferentes. Necesitábamos una forma para que un recurso pueda apuntar a otro recurso. Una forma podría haber sido que escribas la ruta al módulo al que deseas apuntar, como en la primera declaración que ves aquí. Tiene varias desventajas. Mientras el desarrollador está escribiendo o escribiendo el código, el desarrollador no obtendrá ninguna intellisense y no habrá comprobaciones en tiempo de construcción. Para evitar esto, estamos utilizando una función de consulta de recursos llamada resource query de Webpack que podemos agregar al final de la ruta de importación, como puedes ver en el segundo ejemplo. En el segundo ejemplo, podemos ofrecer

3. Comprendiendo la Base de Código de Create React App

Short description:

Revisar buenas bases de código o frameworks aceleró nuestro desarrollo. Los repositorios createreactapp y NextGIS fueron puntos de partida útiles. Clasificar los paquetes en createreactapp en tres categorías: construir una aplicación CRE, configurar herramientas y generar andamiaje inicial. Configurar múltiples herramientas para insertar módulos no JavaScript como CSS, SVG, PNG. Manejar las importaciones en el empaquetador, webpack. Comprender el archivo webpack.config.js y los cargadores utilizados por create-react-app. La importancia de agregar un cargador para manejar las declaraciones de importación en CSS, como el cargador de Sass.

una buena intellisense y comprobaciones en tiempo de construcción. Una vez que tenemos una idea sobre las herramientas y el ecosistema, revisar algunas buenas bases de código o frameworks nos ayudó mucho. Aceleró nuestro desarrollo donde podemos enfocarnos más en nuestras ofertas únicas que en las mundanas. El mejor punto de partida fue revisar el repositorio de createreactapp, y eso es lo que vamos a ver en detalle a continuación. Mirar el repositorio de NextGIS también es una buena idea. Antes de ver el código de createreactapp, me gustaría clasificar los paquetes en createreactapp en tres categorías. Paquetes que se utilizan para construir una aplicación CRE. Estos son los paquetes más importantes para revisar. Hay algunos paquetes para configurar las herramientas como transpiladores, por ejemplo, Babel y el linter como ESLint. Finalmente, los paquetes para generar el andamiaje inicial cuando ejecutamos algo como NPX Create React App.

Una pregunta importante es ¿cómo podemos insertar módulos no JavaScript como CSS, SVG, PNG, etc.? Necesitamos configurar múltiples herramientas para poder lograr esto en nuestro Necesitamos agregar tipos para archivos no JavaScript y necesitamos agregar tipos para el espacio de nombres de Node.js. Podemos hacer esto creando un archivo de declaración de tipo TypeScript e incluyéndolo en nuestro archivo tsconfig.json. Aquí vemos que estamos declarando tipos de modelos para informes obtenidos y coincidencia de diferentes patrones globales. Veamos la parte resaltada. Esto informa a las herramientas como eslint en nuestros editores de código que cuando la cadena de origen termina con svg, trate el módulo de origen como que exporta un valor de cadena predeterminado que contendrá la URL del recurso y un componente React exportado con nombre que será de tipo componente funcional react. También necesitamos manejar estas importaciones en nuestro empaquetador en nuestro caso webpack. Más sobre cómo configurar webpack para lograr esto en una sección posterior. Como se mencionó antes, utilizamos la función de consulta de recursos de webpack.export para apuntar a un módulo. Por lo tanto, tuvimos que agregar una definición de módulo más aquí. Siempre que una ruta de origen de importación termine con un signo de interrogación id. Se tratará como un módulo que exporta por defecto una cadena. El punto de entrada para comprender los entresijos de todo lo que sucede cuando realmente se realiza una compilación durante el desarrollo o la producción es el archivo webpack.config.js. Se puede encontrar en el paquete de scripts de React en la base de código de create-react-app. El create-react-app utiliza muchos cargadores que se ejecutan uno tras otro para procesar CSS, como podemos ver aquí. El webpack comenzará desde un cargador post CSS que proporciona soporte para mixins, transpila la próxima sintaxis de CSS e imágenes en línea. Tiene algunos complementos que ayudan a insertar prefijos de proveedores en tu CSS. Webpack puede manejar las importaciones de JavaScript de forma predeterminada, pero no puede manejar las declaraciones de importación en CSS. Por ejemplo, cuando usamos la directiva de importación en CSS o la función URL en CSS, utiliza el cargador de CSS para resolverlos. Si decides usar Sass o CSS, es posible que debas agregar un cargador para preprocesarlo. El create react app utiliza el cargador de Sass. Como puedes ver aquí, entramos en el cargador de Sass.

4. Manejo de Efectos Secundarios y Reemplazo de Módulos

Short description:

Las aplicaciones CID manejan SVGs utilizando una biblioteca de terceros llamada SVGR. La eliminación de código muerto o pre-shaking elimina las funciones no utilizadas de todo el mundo comenzando desde el punto de entrada e incluyendo solo las funciones que pueden ser ejecutadas. Para evitar que Webpack siga explorando las dependencias, debemos indicarle que ningún módulo en este paquete tiene efectos secundarios estableciendo el campo de efectos secundarios en el archivo package.json como falso. La sustitución de módulos en caliente o HMR permite reemplazar el módulo que contiene el componente de cuadro de diálogo durante el tiempo de ejecución y el complemento Fast Refresh de React se encarga de reaplicar el estado de la aplicación una vez que el módulo se ha recargado.

Las aplicaciones CID manejan SVGs utilizando una biblioteca de terceros llamada SVGR. Esto es diferente al manejo de otros activos que son manejados directamente por webpack como se muestra aquí. Aquí podemos ver efectos secundarios. ¿Qué significa esto? ¿Cómo afecta al paquete final?

Esto nos lleva al siguiente tema, la eliminación de código muerto o pre-shaking. Las técnicas de optimización del paquete, como la eliminación de código muerto y el ofuscado, se activan de forma predeterminada en el modo de producción. Si no estamos en modo de producción pero aún queremos obtener alguno de estos beneficios de optimización, entonces tendremos que importar los complementos de optimización por nuestra cuenta. La eliminación de código muerto o pre-shaking elimina las funciones no utilizadas de todo el mundo comenzando desde el punto de entrada e incluyendo solo las funciones que pueden ser ejecutadas. Los componentes de orden superior de React dificultan la eliminación de código muerto por parte de Tercer. Para que la eliminación de código muerto funcione, debemos utilizar la sintaxis de módulo ES2015 o ES6, es decir, import y export. Debemos asegurarnos de que ningún compilador, cargador o complemento transforme nuestro código de sintaxis ES6 y superior en un módulo CommonJS. Como precaución, si estás utilizando Babel y usas el preset env de Babel, es posible que debas configurarlo para que no convierta los módulos ES6 a CommonJS, que es su comportamiento predeterminado. Volviendo al código, Tercive detectará las importaciones de CSS como no utilizadas, por lo tanto, intentará eliminarlas. Para evitarlo, debemos establecer el campo de efectos secundarios en Webpack como verdadero. Veamos cómo funciona Tree Seeking en Webpack con un ejemplo. En este ejemplo, el archivo de índice importa wrap-button, pero no lo utiliza. El complemento Tercer de Webpack intenta determinar si puede eliminar algún código de este archivo. Pero es posible que no pueda determinarlo si la llamada a la función button-wrapper tiene algunos efectos secundarios o no. Un efecto secundario podría ser algo como cambiar un valor en el objeto window u otra variable global. El código resaltado será eliminado una vez que hayamos agregado un comentario como este, que dice Puro. Pero todavía hay preguntas con las importaciones que deben incluirse o evaluarse porque podrían contener efectos secundarios. En otras palabras, Webpack recorrerá las dependencias en este módulo y determinará si los módulos importados tienen algún efecto secundario. Esto afectará el tiempo de generación del paquete y el tamaño del paquete. Una forma de evitar esto es indicarle a Webpack que ningún módulo en este paquete tiene efectos secundarios estableciendo el campo de efectos secundarios en el archivo package.json como falso. Imagina que estamos desarrollando un cuadro de diálogo que se abre después de hacer clic en algunos botones. Tenemos que cambiar el estado de la aplicación para finalmente abrir ese cuadro de diálogo. Esto se vuelve lento y molesto para los desarrolladores frontend abrir el cuadro de diálogo después de cada cambio que realizan en ese componente de cuadro de diálogo. La solución es reemplazar de alguna manera el módulo que contiene el componente de cuadro de diálogo durante el tiempo de ejecución, y esto se conoce comúnmente como reemplazo de módulo en caliente o HMR. En el contexto de React, surge una pregunta.

5. Mantener el Estado del Componente e Implementar HMR

Short description:

El complemento Fast Refresh de React se encarga de reaplicar el estado de la aplicación una vez que el módulo se ha recargado. Utilizamos el complemento Babel React Refresh para manejar esto. Para decidir si reemplazar en caliente el módulo o recargar la página completa, podemos implementar comprobaciones como requerir que todas las importaciones del módulo sean un componente de React. Implementar HMR para React es fácil con herramientas de empaquetado como Webpack. Agregar un cargador de Babel e incluir el complemento Webpack React Refresh son los pasos para habilitar HMR. Se puede lograr HMR para archivos CSS reemplazándolos con módulos de JavaScript utilizando un complemento como tile loader en Webpack.

¿Cómo mantenemos el estado del componente después de que se haya reemplazado el módulo que contiene este componente? El complemento Fast Refresh de React se encarga de reaplicar el estado de la aplicación una vez que el módulo se ha recargado. Para lograr esto, necesita inyectar algo de código en cada módulo. Utilizamos el complemento Babel React Refresh para manejar esto por nosotros.

¿Cómo decidimos si los cambios realizados en el módulo deben provocar una recarga de página completa o un reemplazo en caliente del módulo? Para decidir si reemplazar en caliente el módulo o recargar la página completa, podemos implementar algunas comprobaciones en el módulo, como que todas las importaciones del módulo deben ser un componente de React para que el módulo sea elegible para HMR. Afortunadamente, implementar HMR para React es bastante fácil con herramientas de empaquetado como Webpack. Los empaquetadores de módulos como Webpack y Ruler han expuesto una API de HMR que se puede implementar en un módulo. Veamos el código.

Aquí estamos agregando un cargador de Babel que se ejecutará para todos los módulos de JavaScript y TypeScript fuera de los módulos de Node. Y el segundo y último paso es incluir el complemento React Refresh de Webpack en la configuración de Webpack. ¿Cómo hacemos HMR para archivos CSS y otros archivos similares? Durante el desarrollo, un complemento puede reemplazar los archivos CSS con módulos de JavaScript. Esto hace posible recargar en caliente los módulos de JavaScript para emular HMR para los archivos CSS. En Webpack, podemos usar tile loader para lograr esto. Si estás interesado en crear un marco de trabajo completo, puedes consultar nuestro repositorio de código abierto aquí. Puedes encontrarme en las redes sociales con este nombre de usuario. Gracias por escuchar.

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 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.

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