Enrutamiento en React 18 y más allá

Rate this content
Bookmark

React Concurrente y Componentes del Servidor están cambiando la forma en que pensamos sobre el enrutamiento, la representación y la obtención de datos en aplicaciones web. Next.js recientemente compartió parte de su visión para ayudar a los desarrolladores a adoptar estas nuevas características de React y aprovechar los beneficios que desbloquean.

En esta charla, exploraremos el pasado, presente y futuro del enrutamiento en aplicaciones front-end y discutiremos cómo las nuevas características de React y Next.js pueden ayudarnos a diseñar aplicaciones más eficientes y con más funcionalidades.

20 min
17 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

El enrutamiento en React 18 brinda una experiencia de usuario similar a la de una aplicación nativa y permite que las aplicaciones hagan la transición entre diferentes entornos. React Router y Next.js tienen enfoques diferentes para el enrutamiento, con React Router utilizando enrutamiento basado en componentes y Next.js utilizando enrutamiento basado en el sistema de archivos. Los componentes del servidor de React proporcionan las primitivas para abordar las desventajas de las aplicaciones de varias páginas mientras se mantiene la misma experiencia de usuario. Mejorar la navegación y el enrutamiento en React implica incluir una interfaz de carga, pre-renderizar partes de la pantalla y utilizar componentes del servidor para experiencias más eficientes. Next.js y Remix se están moviendo hacia una solución convergente combinando el enrutamiento basado en componentes con el enrutamiento basado en el sistema de archivos.

Available in English

1. Introducción al enrutamiento en React 18

Short description:

Hola a todos, soy Delba de Vercell. Hoy quiero hablar sobre el enrutamiento en React 18 y cómo cambiará la forma en que los desarrolladores ven las aplicaciones. El enrutamiento ha evolucionado desde las aplicaciones de varias páginas hasta las aplicaciones de una sola página. Las aplicaciones de una sola página brindan una experiencia de usuario similar a la de una aplicación nativa. El lado del cliente decide qué contenido buscar y renderizar. Las aplicaciones están haciendo la transición entre diferentes entornos, cliente o servidor.

Como algunos de ustedes sabrán, somos los creadores de Next.js, y me gustaría saber cuántos de ustedes aquí usan Next.js. Wow, eso es muchos de ustedes. Eso es increíble. Aunque creamos Next.js, también tenemos una plataforma, Vercell. Y curiosamente, Vercell admite más de, creo, algo así como 35 frameworks de front-end. Entonces, incluso si no usas Next.js, aún puedes usar Vercell.

Y hoy quiero hablarles sobre algunas cosas emocionantes en las que hemos estado trabajando, que es el enrutamiento. Y el enrutamiento en React 18. Ahora, como sabrán, hace unos meses, se lanzó React 18 con nuevas características concurrentes. Y en el blog de React, el equipo mencionó que esperan que las características concurrentes tengan un gran impacto en la forma en que los desarrolladores ven las aplicaciones. Así que hoy quiero discutir con ustedes qué podría significar este impacto y cómo cambiaremos la forma en que los desarrolladores ven las aplicaciones, especialmente con React Server components, también. Y esto no solo puede cambiar las cosas para Next.js, sino también para otros mantenedores de frameworks y bibliotecas. Y voy a centrarme específicamente en el enrutamiento, pero también mencionaré la obtención y representación de datos, o como me gusta llamar a ellos, los tres pilares de la web, porque esos términos están muy interconectados.

Ahora, para dar a todos aquí un poco de contexto y también a las personas que podrían estar viendo en línea, creo que es importante dar un paso atrás y ver cómo ha evolucionado el enrutamiento en aplicaciones de frontend. Ahora, tenga en cuenta que voy a condensar años de historia de enrutamiento en como cinco minutos, así que hay muchos más matices. Y una forma en que podemos ver el enrutamiento es a través del tipo de aplicaciones que podemos construir, aplicaciones de varias páginas, aplicaciones de una sola página y, más recientemente, aplicaciones híbridas. Entonces, en los primeros días de la web, el enrutamiento era muy sencillo porque, si lo piensas, cada URL se asignaba a un archivo específico en un servidor. Y luego, utilizando lenguajes dinámicos del lado del servidor, pudimos generar una respuesta desde el servidor para una ruta específica. En una aplicación de varias páginas tradicional, el enrutamiento se realiza en el servidor, y navegar entre páginas provoca la recarga completa de la página a la que todos estamos muy acostumbrados. Ahora, cuando llegaron las aplicaciones nativas para dispositivos móviles, trajeron transiciones más suaves y nuevos patrones de IU. Y las aplicaciones de una sola página, podríamos decir, fueron la respuesta de la web a las aplicaciones nativas. Queríamos que nuestros sitios web se sintieran como aplicaciones nativas. Es decir, queríamos que tuvieran la misma experiencia de usuario que las aplicaciones nativas. En una aplicación de una sola página tradicional, el enrutamiento se realiza en el lado del cliente. Entonces, en la carga inicial, es posible que veas una pantalla en blanco mientras el lado del cliente busca y renderiza el contenido. Ahora, cuando navegas en una aplicación de una sola página, el cliente reescribirá dinámicamente el nuevo contenido. Y para una ruta determinada, el cliente decide qué contenido buscar y renderizar. Y el año pasado, Rich Harris, el creador de Svelte, dio una charla increíble sobre el debate entre MPA y SPA, donde discutió algunos de los pros y los contras de cada uno. Es una charla realmente genial y recomiendo verla si aún no has tenido la oportunidad. Pero una conclusión de esa charla que quiero que recuerden es que reconoció que hay un patrón emergente en nuestra industria, donde las aplicaciones están haciendo la transición entre diferentes entornos, cliente o servidor.

2. Descripción general del enrutamiento en React

Short description:

Y él llamó a ese tipo de aplicaciones aplicaciones de transición. El enfoque de React Router para el enrutamiento es lo que me gusta llamar enrutamiento basado en componentes. Next.js adoptó un enfoque diferente para el enrutamiento utilizando el enrutamiento basado en el sistema de archivos. El equipo de React nos dio un regalo de Navidad anticipado que nos permitirá avanzar hacia soluciones más híbridas.

Y él llamó a ese tipo de aplicaciones aplicaciones de transición. Y las aplicaciones de transición intentan combinar los beneficios tanto del cliente como del servidor, porque si lo piensas, ¿por qué no ambos? Así que esa es una descripción general del enrutamiento en la web. Ahora vamos a enfocarnos en React.

Si bien React no inventó las aplicaciones de una sola página, se podría argumentar que contribuyó a su popularidad. El hecho de que React se haya centrado principalmente en la interfaz de usuario y el renderizado significa que la comunidad ha desarrollado algunas soluciones diferentes para el enrutamiento. Y una solución del lado del cliente que rápidamente se hizo popular fue React Router. Ahora, ¿cuántos de ustedes han usado React Router antes? Sí.

El enfoque de React Router para el enrutamiento es lo que me gusta llamar enrutamiento basado en componentes, donde utilizas código para asignar componentes específicos en tu aplicación a la ruta de URL. Y si lo combinas con una herramienta como create React app, entonces puedes crear fácilmente aplicaciones de una sola página. Y esto lleva, creo, no solo a la adopción de React, sino también a aplicaciones que se renderizaban completamente en el lado del cliente.

Ahora, en 2016, unos años después, Vessel presentó Next.js. Y Next.js se creó como un marco para ayudar a los desarrolladores a construir aplicaciones renderizadas en el lado del servidor. Y Next.js adoptó un enfoque diferente para el enrutamiento. Utilizó lo que me gusta llamar enrutamiento basado en el sistema de archivos, donde los archivos en tu aplicación se asignan a tu URL. Y aunque Next.js se sentía muy similar a una aplicación de varias páginas, en realidad utilizaba la precarga y la navegación del lado del cliente para dar a las aplicaciones una sensación similar a la de una aplicación nativa, si se puede decir así.

Otro paso incremental hacia las aplicaciones híbridas fueron los métodos de obtención de datos de Next.js, como getInitialProps. Y lo que estos métodos de obtención de datos hicieron fue mover la obtención de datos fuera de tu código de renderizado o fuera de tu componente para que puedas obtener datos tanto desde el cliente como desde el servidor. Ahora, hoy me estoy centrando en Next.js. Pero sería un error no mencionar algunos proyectos que también están trabajando en soluciones de enrutamiento para React, incluyendo Hydrogen de Shopify, Remix y también Redwood. Así que avanzamos rápidamente unos años a principios de 2020, y los miembros del equipo de React estaban discutiendo públicamente mover más trabajo de renderizado al servidor.

La idea era que si ya estamos obteniendo datos en el servidor, ¿podríamos mover parte del trabajo de renderizado al servidor y, por lo tanto, reducir la cantidad de código que se envía al cliente? Ahora, probablemente puedas imaginar las reacciones que siguieron a ese tweet. Creo que se puede resumir mejor como, esto se parece mucho al enrutamiento del lado del servidor. ¿Estamos volviendo a las aplicaciones de varias páginas? Pero para citar un meme no tan serio de una de mis personas favoritas en Twitter, esto es menos un balanceo de péndulo y más una espiral de mejora incremental. Así que cambios de dirección. No solo SPA, no solo MPA, sino un tipo de convergencia hacia lo híbrido. Que se beneficia tanto del servidor como del cliente. Y cada vez que se planteaba esta conversación, el equipo de React se aseguraba de enfatizar que estaban buscando una solución híbrida. Y una cosa importante a tener en cuenta aquí es que esta solución híbrida no crearía solicitudes adicionales al servidor. Aprovecharía una solicitud que ya debe existir de todos modos. Así que, en diciembre de 2020, el equipo de React nos dio un regalo de Navidad anticipado que nos permitirá avanzar hacia soluciones más híbridas.

3. Enrutamiento con componentes de servidor de React

Short description:

Eso fueron los componentes de servidor de React. Ahora tenemos los elementos básicos para abordar las desventajas de las aplicaciones de varias páginas manteniendo la misma experiencia de usuario. Propusimos un nuevo enrutador para Next.js que permite el enrutamiento, el renderizado y la obtención de datos en el servidor. Con los componentes de servidor de React, podemos entrelazar componentes del cliente y del servidor. Dividir las rutas en fragmentos independientes tiene tres beneficios principales: crear diseños, reducir el renderizado y tener un control más granular sobre la obtención de datos. Al construir una nueva ruta con componentes de servidor de React, reducimos el código enviado al cliente, la carga de trabajo del servidor y el tiempo de carga. Combinado con las características concurrentes, simplifica los estados de carga y mejora la experiencia de navegación.

Eso fueron los componentes de servidor de React. Cuando combinas los componentes de servidor de React con suspense y el streaming, ahora tenemos los elementos básicos o los bloques de construcción para abordar algunas desventajas de las aplicaciones de varias páginas o aplicaciones renderizadas en el lado del servidor mientras mantenemos la misma experiencia de usuario que nos encanta de las aplicaciones de una sola página o aplicaciones del lado del cliente.

Pero hay una última pieza del rompecabezas. Y en los últimos meses, el equipo de Next.js ha estado considerando esto. Si necesitamos ir al servidor para obtener datos y ahora vamos al servidor para hacer el renderizado con los componentes de servidor de React, ¿podríamos posiblemente también hacer el enrutamiento en el servidor? ¿Podríamos permitir a los desarrolladores construir aplicaciones donde el enrutamiento, el renderizado y la obtención de datos ocurran donde tenga más sentido? ¿Podríamos darles convenciones que sean fáciles de entender pero que también les permitan mover partes de su aplicación ya sea al cliente o al servidor?

Así que hace unas semanas, compartimos un RFC. Y en este RFC, propusimos un nuevo enrutador para Next.js. Y este nuevo enrutador se basa en componentes de React y en las características de React 18. Hay muchos más detalles en el RFC y no entraré demasiado en los detalles de implementación. Si tienes curiosidad por saber más al respecto, te recomiendo que lo leas. Pero por ahora, déjame compartir contigo algo que me emociona mucho y en lo que hemos estado trabajando.

Entonces, si lo piensas, con los componentes de servidor de React, podemos entrelazar componentes del cliente y del servidor en un árbol. Esto significa que en una página o una ruta, potencialmente podrías tener tanto componentes del cliente como del servidor. Con este nuevo modelo, se vuelve cada vez más importante dividir nuestras rutas en fragmentos independientes a los que llamamos segmentos de ruta. Estos segmentos de ruta se asignan a un término que ya existe, segmentos de URL. Aunque estamos dividiendo las rutas, queremos mantener el enrutamiento basado en el sistema de archivos porque generalmente tiende a ser una forma más intuitiva para que los desarrolladores definan sus rutas. Y al dividir las rutas de esta manera, o como lo llamamos, hacer enrutamiento anidado, tiene tres beneficios principales.

El primero es que podemos crear diseños, y los diseños han sido una solicitud muy antigua de la comunidad. Y la forma en que queremos definir los diseños es que un diseño es una interfaz de usuario que se comparte en varias rutas, y estos diseños no deben volver a renderizarse ni perder estado al navegar. También significa que los componentes que no cambian dentro de una ruta, como un diseño, también queremos asegurarnos de que sigan siendo interactivos a medida que el usuario navega entre las rutas. En segundo lugar, si lo combinamos con componentes de servidor, eso significa que al navegar, el servidor solo tiene que obtener y renderizar los segmentos que han cambiado, y no tenemos que volver a renderizar todo el subárbol de esa ruta. Y en tercer lugar, podemos tener un control más granular sobre la obtención de datos. En Next.js, como sabrás, actualmente obtenemos datos a nivel de página, y con este nuevo modelo podemos obtener datos a nivel de segmento. Y dado que ya movimos la obtención de datos fuera del código de renderizado o fuera de los componentes, ahora podemos iniciar esas solicitudes de manera anticipada en paralelo. Y esto reduce lo que algunos de ustedes pueden estar familiarizados, que son los waterfalls. Y en general, también se reduce la cantidad de tiempo que lleva cargar el contenido de una ruta.

Al construir una nueva ruta con componentes de servidor de React, logramos tres cosas. Reducir la cantidad de código que enviamos al cliente, reducir la cantidad de trabajo que el servidor tiene que hacer y también reducir la cantidad de tiempo que lleva hacer ese trabajo. Ahora, si lo combinamos con características concurrentes, como la transición, el suspense y la característica de componente fuera de pantalla, podemos simplificar la creación de estados de carga y mejorar la experiencia de navegación. Por ejemplo, si quieres usar el enrutamiento del lado del cliente y estás obteniendo datos mientras renderizas, es posible que tengas demasiados estados de carga o spinners escalonados. Entonces, realmente, lo que quieres hacer como desarrollador es consolidarlos en menos indicadores de carga más significativos.

4. Mejorando la Navegación y el Enrutamiento en React

Short description:

Cuando se utiliza el renderizado en el lado del servidor, es importante incluir una interfaz de usuario de carga para indicar el trabajo en segundo plano. El pre-renderizado de una pequeña parte de la pantalla mejora la navegación al proporcionar una respuesta inmediata. El almacenamiento de rutas permite restaurar el estado al navegar. Los componentes de servidor de React permiten experiencias más eficientes y fluidas. Crear experiencias compartibles sin romper las URL requiere convenciones simples para patrones de enrutamiento complejos. El equipo de React proporciona los elementos básicos para construir aplicaciones híbridas.

Por otro lado, si estás utilizando el renderizado en el lado del servidor, debes obtener y renderizar el contenido antes de que comience la navegación. Por lo tanto, tu aplicación parecerá no responder mientras se realiza el trabajo en el servidor. En ese caso, es importante incluir una interfaz de usuario de carga para indicar que se está realizando trabajo en segundo plano.

En otros casos, creemos que el framework debería proporcionar una convención sencilla que permita a los desarrolladores crear estados de carga. Además, podemos mejorar aún más la experiencia de navegación al pre-renderizar una parte muy pequeña pero mínima de la pantalla. Esto significa que cuando navegues entre pantallas, la navegación será inmediata y el usuario podrá ver algo como una foto de portada o un título antes de que se cargue el resto del contenido.

De manera similar, y este es uno de mis favoritos, podremos almacenar rutas. Esto significa que podemos detener las rutas anteriores y luego pre-renderizar las rutas futuras para que cuando el usuario navegue entre las rutas, restauremos el estado. Ahora, me estoy quedando sin tiempo, así que voy a omitir estas dos diapositivas, pero... Si quieres obtener más información, tenemos más información en el IRC. Lo que quería destacar aquí hoy es que hay muchas formas de pensar en el enrutamiento en React, y hemos estado pensando mucho en cómo hacer el enrutamiento en XJS. No se trata solo del enrutamiento en sí, sino de lo que el enrutamiento nos permitirá hacer. Podremos crear experiencias más eficientes con los componentes de servidor de React y también experiencias más fluidas al mejorar la navegación. También queremos asegurarnos de crear experiencias que sean compartibles y que no rompan la URL. Y para hacer eso, necesitamos crear convenciones simples que permitan a los desarrolladores implementar patrones de enrutamiento más complejos. Por último, pero no menos importante, antes de que se acabe mi tiempo, quiero tomarme un momento para agradecer al equipo de React, porque son ellos quienes nos brindan los elementos básicos y los bloques de construcción para poder construir la próxima generación de aplicaciones híbridas. Muchas gracias. APLAUSOS. Gracias. ¿Quieres ir? Sí. APLAUSOS. Estuvo genial. No sé exactamente qué nueva característica de React fue, pero hubo un momento en el que hubo una nueva característica que se lanzó y actualizamos nuestra aplicación, y se sintió tan rápida que no lo creía. Parece que todas las aplicaciones van a ser así ahora, ¿verdad? Y de vez en cuando obtenemos una nueva característica en React que es simplemente... Sí. Sí. Es demasiado rápido. No puedes creer lo rápido que es. Eso se convierte en lo normal y dices, maldición, esto lleva mucho tiempo. Sí.

5. Next.js y Remix: Soluciones Convergentes

Short description:

Next.js no está adoptando la visión de Remix, sino que se está moviendo hacia una solución convergente. Remix combina el enrutamiento basado en componentes con el enrutamiento basado en el sistema de archivos para crear rutas anidadas. Este enfoque también se ve fuera del ecosistema de React. La industria se está moviendo hacia la combinación del enrutamiento basado en componentes con el enrutamiento basado en el sistema de archivos, tomando ideas prestadas entre sí para mejoras incrementales.

Gracias por tu charla. Gran información, por cierto. Vamos a pasar a las preguntas de la audiencia. La primera pregunta es de Martin. ¿Next.js está adoptando la versión de Remix sobre el enrutamiento basado en componentes aquí? ¿Es lo mismo? Sí, esa es una pregunta interesante. Cuando pienso en Remix y el trabajo que han realizado en React con el enrutamiento, han hecho un trabajo increíble. No hay duda al respecto. Y si lo piensas, la mayoría de las aplicaciones utilizan React Router, que proviene de los creadores de Remix, como su base. Ahora, cuando pienso en Remix en sí, no lo veo realmente como una adaptación de la visión de Remix, sino más bien como un movimiento hacia una solución mejor o convergente. Lo que Remix ha hecho muy bien es combinar la idea del enrutamiento basado en componentes con el enrutamiento basado en el sistema de archivos y crear rutas anidadas. Lo cual tiene sentido porque el enrutamiento basado en el sistema de archivos es más fácil de implementar, pero luego con el enrutamiento basado en componentes, puedes asignar tus componentes a la ruta de URL. Creo que ese es un gran enfoque, pero también lo veo fuera del ecosistema de React, como por ejemplo con StealthKit. Entonces, en general, como industria, nos estamos moviendo hacia esa solución de combinar el enrutamiento basado en componentes con el enrutamiento basado en el sistema de archivos. Y estamos tomando ideas prestadas, ¿verdad? Lo siento, ¿qué? Todos estamos tomando ideas prestadas entre nosotros y tratando de mejorar todo el ecosistema. Mejoras incrementales. Siguiente pregunta de Anónimo. ¿Necesitas un enrutador de React conectado en un monorepo o puedes hacer todo con un enrutador de React? En realidad, nunca he utilizado un enrutador de React conectado, así que me disculpo. Yo tampoco. No puedo responder a esa pregunta. Muchas gracias. Si alguien quiere continuar la conversación con Delba, pueden ir al stand del orador en este momento y ahora es el momento de un gran aplauso para Delba.

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 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!
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar

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