Nextra 2.0: Crea un sitio de documentación completo en 5 minutos

Rate this content
Bookmark
28 min
02 Dec, 2022

Video Summary and Transcription

Next.js y Nextra son herramientas poderosas para generar sitios web de documentación completos con facilidad. Nextra ofrece características como modo oscuro, búsqueda de texto completo e integración de código React. Next.js proporciona optimización de imágenes, SSG, SSR y otras características poderosas. Nextra es altamente personalizable y admite localización, colaboración e integración de API. La visión futura incluye combinar documentación y vistas en vivo, agregar generación de tarjetas sociales y funcionalidad de búsqueda avanzada.

Available in English

1. Introducción a Next.js y Nextra

Short description:

Hoy voy a hablar de un proyecto llamado Next.js. Es una herramienta para generar sitios web de documentación completos en minutos. Es muy fácil de usar. Y puede generar sitios de documentación muy elegantes o fáciles de usar, y también impulsa muchos de nuestros proyectos internos o de código abierto. Amamos next.js. Muchas personas ya están familiarizadas con las API de next.js, y es súper poderoso. Es una base sólida y está bien mantenido. También tenemos algunas ideas nuevas para crear documentación, y queremos validar las ideas y mejorarlas, y tratar de construir algo increíble como producto. Puede ser más que solo documentación. También puede admitir casos de uso como blogs y sitios web de cartera. Nextra es un proyecto normal de Next.js donde puedes centrarte en tu contenido, y Nextra se encarga de la arquitectura del sitio web y todo el compilador, el empaquetador, etc.

Gracias, es un placer estar aquí. Así que siguiente disparo. Bonito logo, ¿verdad? Sí.

Permítanme presentarme primero. Mi nombre es Szu-Din, y he estado trabajando en proyectos de código abierto durante casi nueve años. Pasé cuatro años en Versailles, y allí hice tanto trabajo de diseño como de ingeniería. Y actualmente estoy trabajando en Next.js, y anteriormente creé bibliotecas como SWR y Satori, y ese es mi nombre de usuario de Twitter si quieres contactarme.

Y hoy voy a hablar de un proyecto llamado Next.js. Es una herramienta para generar sitios web de documentación completos en minutos. Es muy fácil de usar. Y puede generar sitios de documentación muy elegantes o fáciles de usar, y también impulsa muchos de nuestros proyectos internos o de código abierto.

Pero, ¿por qué? ¿Por qué estamos creando un nuevo proyecto para generar documentación? Primero, tanto Vercell como yo tenemos demasiados proyectos para mantener, como cada par de meses, tenemos un nuevo proyecto en el que trabajar. Tenemos un nuevo experimento o nuevas cosas de código abierto. Y como mantenedor de código abierto, la mayor parte de mi tiempo lo he pasado manteniendo la documentación. Y es realmente importante para nuestros usuarios y para la comunidad. Pero cada vez que creamos un sitio de documentación ad hoc, se implementan de manera diferente por diferentes personas, así que necesitamos una solución única para nosotros. Y ya hay muchas soluciones disponibles. ¿Por qué estamos creando una nueva? En primer lugar, amamos next.js. Muchas personas ya están familiarizadas con las API de next.js, y es súper poderoso. Es una base sólida y está bien mantenido. Así que no queremos aprender una nueva herramienta para generar nuestros sitios, porque next.js también puede ser bueno para la documentación. ¿Por qué no usarlo? Y luego también tenemos algunas ideas nuevas para crear documentación, y queremos validar las ideas y mejorarlas, y tratar de construir algo increíble como producto. Y por último, puede ser más que documentación. También puede admitir casos de uso como blogs y sitios web de cartera.

Así que aquí tienes un vistazo rápido de Nextra. Es solo un proyecto normal de Next.js si ya estás familiarizado con él. Tienes una carpeta de páginas, y en lugar de archivos JavaScript, solo tienes una lista de archivos markdown MDX. Y puedes anidarlos en carpetas y nombrarlos, y son solo archivos markdown. Y lo bueno de Nextra es que puedes centrarte en tu contenido y no tienes que preocuparte por la arquitectura del sitio web y todo el compilador, el empaquetador, etc. Nextra se encarga de eso por ti.

2. Características del Proyecto

Short description:

Cuando utilizas este proyecto, puedes ver fácilmente la estructura de tu sitio web reflejada en tu sistema de archivos. No necesitas configurar nada, solo crear archivos y escribir tu contenido. El proyecto genera automáticamente una tabla de contenidos basada en tus archivos. También ofrece características como el modo oscuro, búsqueda de texto completo incorporada y navegación rápida. Incluso puedes escribir código React dentro de tu contenido. Con la integración de Nexus, los enlaces markdown se convierten automáticamente en enlaces de Nexus, lo que proporciona precarga de enlaces y cargas instantáneas de páginas.

Y el mismo proyecto, cuando lo tienes en funcionamiento, puedes ver el sitio web básicamente igual que la estructura de tu sistema de archivos. Y como puedes ver, tus páginas coinciden exactamente con la barra lateral de tu sitio web. Así que no necesitas configurar nada. Solo tienes que crear un nuevo archivo y escribir tu contenido. Puedes pasar la mayor parte de tu tiempo trabajando en el contenido tú mismo. Y obtienes un sitio web con un aspecto agradable.

Y hay más cosas que eso, como la tabla de contenidos. Se genera automáticamente en función de tu archivo. Y esa es la primera impresión del proyecto. Es fácil de configurar porque solo tienes que crear archivos. Y luego puedes centrarte en el contenido. Y es intuitivo gestionar las rutas porque normalmente necesitas crear alguna configuración compleja como especificar esas páginas, rutas, carpetas y directorios, y ahora solo necesitas mantener el sistema de archivos, las carpetas.

Y se ve bastante bien, pero ¿qué más? Primero que nada, el modo oscuro, ¿por qué no?, es algo que a todos les encanta. Y esto es algo más poderoso. Tiene una búsqueda de texto completo incorporada. No necesitas hacer nada. Solo escribe tu contenido y obtendrás una búsqueda lista para usar porque normalmente, necesitas configurar algún servicio y mantener un servidor y una API y hacer un montón de cosas para ponerlo en funcionamiento y aquí lo tienes automáticamente sin escribir nada. Y se ve rápido, ¿verdad? No está acelerado. Puedo mostrártelo directamente. ¿Es rápido? Es muy rápido. Y puedes ir directamente a la posición. Sí, obtienes eso de forma gratuita básicamente. Y como es MDX, puedes escribir código React dentro de tu contenido.

Y aquí hay un elemento de encabezado dos, hola MDX, y puedes simplemente poner un componente React dentro. En la versión v2 de MDX, puedes tener markdowns dentro de tus componentes, como ese clic. Puedes tener ambas sintaxis allí y también se renderiza el estilo porque anteriormente no podías hacerlo en todos los niveles. Eso es algo bueno de la versión v2 y como está impulsado por Nexus porque Nexus y extra, obtienes poder adicional de Nexus, como la conversión automática de enlaces markdown a enlaces de Nexus. Eso significa que tienes precarga de enlaces lista para usar y cuando pasas el cursor sobre un enlace, la página de destino se precarga. Así que cuando haces clic en él, es instantáneo. Y si solo estás escribiendo enlaces markdown, cada clic resultará en una carga de página completa.

3. Características y Beneficios de Next.js

Short description:

Con Next.js, las imágenes de markdown se convierten automáticamente en imágenes de Next.js, con optimización de imágenes incorporada. Esto evita cambios en el diseño y proporciona un marcador de posición borroso durante la carga inicial de la página. Next.js también ofrece muchas otras características, incluyendo SSG, SSR e ISR para contenido dinámico, soporte de i18n, optimización de CSS y la capacidad de combinar rutas JS con documentación. Incluso tiene características como el modo de vista previa, rutas de API y middleware. Next.js es un framework poderoso con mucho que ofrecer.

No obtienes una experiencia de SPA. Y también las imágenes de markdown. Eso es algo complicado. Pero con Next.js, se convierten automáticamente en imágenes de Next.js. Y Next.js tiene la optimización de imágenes incorporada, lo cual tiene dos ventajas. Una es que evita cambios en el diseño. Entonces, cuando estás cargando la página, tu contenido no se empuja hacia arriba o hacia abajo, porque la imagen no se carga inicialmente. Y luego, cuando se carga, tu contenido se moverá. Y eso es una mala experiencia. Otra cosa es que optimiza la imagen.

Y cuando estás cargando la página inicialmente, ves un marcador de posición borroso allí. Y luego el contenido completo se carga más tarde. Lo cual es agradable. Y hay mucho más que esto. Porque Next.js es un framework con muchas características diferentes, algunas son poderosas, algunas son cosas pequeñas y agradables.

Entonces, una cosa importante aquí es SSG, SSR e ISR. Porque normalmente no escribes todo como archivos estáticos. A veces quieres que el contenido sea un poco dinámico. Digamos que tengo una página que muestra cuántas estrellas tiene mi proyecto en GitHub. Y no quieres que eso se renderice en el servidor cada vez porque es lento. No quieres que sea completamente estático, porque entonces el contenido no se actualiza. Y es complicado implementarlo por ti mismo porque es complicado. Tienes caché, revalidación, entre otras cosas. Next.js lo tiene incorporado, ¿por qué no usarlo? También puedes tener eso en Next.js. Y luego i18n y otras características de Next.js, optimización de CSS, fuentes. Y también puedes tener rutas JS normales mezcladas con tu documentación. Es útil cuando estás agregando documentación a tu proyecto de sitio web existente. Y tiene más características como el modo de vista previa, rutas de API, middleware, lo que necesites. Y este es un ejemplo de cómo hacer ISR, regeneración estática incremental, en MDX con Next.js. Así que parece un archivo JavaScript, pero en realidad es un archivo MDX.

4. Generación Estática y Características de Next.js

Short description:

Puedes definir una función getStaticProps para obtener datos de la API y renderizarlos en un componente. El hook useSSG garantiza cargas rápidas de páginas estáticas con regeneración regular. Next.js permite combinar características de Next.js y el tema es ampliable. Ejemplos como Minion.js y Turbo demuestran la flexibilidad de Next.js, con características como integración de código React, búsqueda y arquitectura de múltiples zonas.

Entonces puedes definir una función getStaticProps aquí, que obtiene la API de GitHub para saber cuántas estrellas tienen tus proyectos. Y luego defines un componente que renderiza los data. Hay un hook useSSG que pasa las props a tu componente como un contexto. Y luego puedes renderizarlo allí. Y puedes notar que hay un Revalidate16. Si estás familiarizado con Next.js, eso significa que tu caché se invalidará cada minuto. Y luego se regenerará estáticamente y se almacenará en caché en el servidor. Así que cada carga de página es rápida, es instantánea, porque es estática. Y cada 60 segundos se regenera. Así que el número siempre está actualizado, siempre es fresco.

Y tengo un ejemplo. Así se ve, es una página estática. Y cada vez que el número se actualiza... Nadie lo ha iniciado aún. Sí. Pero, ¿ves? Se actualiza. Y esas son solo algunas características generales, pero hay muchas más. Básicamente puedes combinar todas las características de Next.js con Next.jar. El tema y el diseño de la documentación en sí mismo también son muy ampliables.

Así que tengo algunos ejemplos, donde nosotros y nuestra comunidad, hemos creado muchos sitios web de documentación elegantes basados en Next.jar. Uno de ellos es Minion.js. Se ve bien, ¿verdad? Porque básicamente puedes escribir cualquier código React allí, pero es un sitio Next.jar, y obtienes búsqueda, y es muy rápido. Obtienes muchas características allí. Y también el modo oscuro se ve bien. Y Turbo, el sitio web de Turbo es un poco más complicado. Tiene proyectos Turbo Repo y Turbo Pack. Así que puedes tener múltiples documentaciones en un solo proyecto. Obtienes algún tipo de arquitectura de múltiples zonas allí. Están en el mismo proyecto Next.js, impulsado por Next.js. Y también puedes tener construcción de bloques.

5. Introducción a Nextra y el Lanzamiento de la Versión V2

Short description:

Y lo que escribes son básicamente solo archivos markdown, lo cual es increíble. The Good es un miembro de la comunidad que hace algo aún más sofisticado. Son un ecosistema de proyectos de código abierto, convirtiendo cada proyecto en un sitio de documentación dentro del sitio web principal. La arquitectura es altamente personalizable y fácil de comenzar. La versión V2 de Nextra se está lanzando con muchas características nuevas. La visión es mejorar la experiencia del usuario de los sitios web de documentación sin complejidad. Si ya estás satisfecho con Nextras, prueba Nextra para tus necesidades de documentación.

Y lo que escribes son básicamente solo archivos markdown, lo cual es increíble. Y tenemos un miembro de la comunidad, The Good. Están haciendo algo aún más sofisticado. Son un ecosistema de muchos proyectos de código abierto. Y muchas empresas hacen eso. Tienes muchos proyectos, muchas cosas que mantener. Y hacen que cada uno de los proyectos sea un sitio de documentación dentro del sitio web principal. Y todos son proyectos de Nextra. Todos están anidados en la organización principal. Como puedes ver, la arquitectura puede ser muy, muy personalizable. Y puedes hacer muchas cosas con ella. Y lo más importante es que es muy fácil comenzar. Y hoy estamos lanzando la versión V2 de Nextra, que tiene muchas cosas buenas incorporadas. Y sí, esa es una de nuestras regiones. Nuestra visión es traer más ideas para mejorar la experiencia del usuario de tu documentación sitio web sin que el proceso sea aburrido y complejo. Y si ya estás satisfecho con Nextras, es posible que desees probar Nextra para construir tus documentaciones.

QnA

Q&A sobre Extra y Nextra

Short description:

Sí, esa es mi charla. Puedes probarlo. Tenemos algunas preguntas sobre Extra. ¿Puede reemplazar a Storybook para la documentación de la biblioteca de componentes? Se puede configurar para otros casos de uso como un generador de sitios de blogs. Los componentes de React no aparecen en la búsqueda incorporada. Nextra está considerando el soporte para la nueva carpeta de aplicaciones y los componentes del servidor de React.

Sí, y esa es básicamente mi charla. Y puedes probarlo. ¡Woo! ¡Woo! ¡Woo! ¡Woo! ¡Woo! ¡Woo! ¡Woo! ¡Woo! ¡Woo! Sí. ¿Quieres unirte a mí? Sí. Sí. Siéntate en el asiento caliente. Gracias por esa charla. Fue genial. Siento que aprendí mucho. Ahora quiero ir a escribir cosas.

Ya tenemos algunas preguntas para ti, así que eso es genial. Algunas son sobre hipotéticos, uso, etc. Por ejemplo, ¿Extra puede reemplazar a Storybook para la documentación de la biblioteca de componentes, tal vez? Sí, proporcionamos algunos componentes integrados, como pestañas y algunos componentes de contenedor básicos. Pero definitivamente podemos crear una vista previa de componentes y un editor, sí. Y de manera similar, en la misma línea, ¿se puede configurar para otros casos de uso? Por ejemplo, parece que tiene todas las características para ser un increíble generador de sitios de blogs. Sí, mi blog personal también es probablemente un Extra. Así que sí, es un buen caso de uso.

¿Dónde pueden encontrarlo las personas? Puedes encontrarlo en el enlace de mi Twitter. Lo escuchaste aquí primero, amigos. ¿Cómo interactúan los componentes de React con la búsqueda incorporada? ¿Aparece su contenido? Entonces, la búsqueda solo indexa el contenido de markdown. Por lo tanto, los componentes de React no se indexarán porque utilizan código. Sí. Genial. ¿Nextra va a admitir la nueva carpeta de aplicaciones y los componentes del servidor de React? Estamos pensando en ello. Pero es un cambio importante. Y de alguna manera se siente diferente a mantener un directorio de contenido. Es más como una cosa de aplicación anidada. Pero lo bueno es que puedes usar páginas y aplicaciones al mismo tiempo. No entran en conflicto entre sí. Así que sí.

Localization, Collaboration, and Customization

Short description:

Me encanta el futuro de cómo todas las cosas se mezclan. Nextra admite la localización con varios archivos para diferentes idiomas. La colaboración en las fuentes de documentación se facilita con funciones incorporadas como el enlace de proporcionar comentarios y la capacidad de crear problemas de GitHub directamente desde la documentación. La simplicidad de usar archivos markdown y la naturaleza amigable de GitHub de Nextra han fomentado más contribuciones a los documentos. Es posible personalizar la interfaz de usuario de los documentos configurando el color principal o proporcionando CSS para anular los componentes existentes.

Genial. Me encanta el futuro de cómo todas las cosas se mezclan. Estoy seguro de que algún día todo será muy interdependiente. ¿Recomiendas algo para el soporte de localización con Nextra, o es la forma incorporada un poco más fácil?

Ya está soportado. Puedes colocar varios archivos con diferentes extensiones para los idiomas. Así, tendrás el cambio de idioma automáticamente. Recomendaría esa forma. Está en la documentación.

Genial. Increíble.

¿Qué forma recomiendas para trabajar en las fuentes de documentación de manera colaborativa?

Esa es una buena pregunta. Porque cuando estábamos diseñando inicialmente Nextra, queríamos que fuera un proyecto orientado a sitios web de código abierto. Tenemos muchas funciones incorporadas, como en cada página, tienes el enlace de proporcionar comentarios. Y cuando haces clic en ese enlace, se abre la página de problemas de GitHub y automáticamente se rellena la página y etiqueta el problema con la etiqueta de comentarios. Entonces, incluso si no tienes una API o base de datos para almacenar esos comentarios de los usuarios, todas tus, todas tus secciones de documentación tendrán el enlace de Crear Problema. Así que es muy fácil trabajar en eso en público. Y como cada página es solo un archivo markdown simple. Es muy fácil para que las personas contribuyan.

Sí. Creo que es muy amigable con GitHub. Sí. De hecho, tenemos un amigo de la comunidad que dijo que después de cambiar a Nexra y hacer que los archivos markdown sean más limpios porque antes era algo mezclado con una configuración de encabezados y ahora son solo archivos markdown simples, muy limpios y bien estructurados. En realidad, recibieron más solicitudes de extracción para contribuir a los documentos, lo cual es muy agradable. Sí. Me encanta eso. Las contribuciones a la documentación son muy importantes.

Oh, esto es interesante. ¿Qué tan fácil es ahora, o será en el futuro, personalizar la interfaz de usuario de los documentos? ¿Qué tan personalizable?

Esa es una pregunta complicada. De hecho, tenemos una forma de permitirte configurar el color principal, el color del tema del sitio web. Pero sí, siempre puedes proporcionar el CSS para anular todos los componentes existentes.

Customización, Integración de API y Implementación

Short description:

Pero dado que es un marco o tema con opiniones, no recomendamos que lo cambies. Siguiendo la misma línea de la interfaz de usuario, puedes personalizar la barra de navegación y la barra lateral utilizando un archivo meta.json. Nextra se puede combinar con la generación de documentación de API sobre Next.js, brindando capacidades de SSR y SSG. Nextra admite RTL y accesibilidad, lo que permite configurar todo el tema para idiomas RTL. Puede ser autohospedado.

Pero dado que es un marco o tema con opiniones, no recomendamos que lo cambies. Así que solo muy ligeramente. Sí. Pero será muy reconocible, supongo. Sí. Genial. Gracias por eso.

Siguiendo la misma línea de la interfaz de usuario, mostraste muchos sitios geniales en tu demostración. ¿Cómo configuras la barra de navegación o barra superior de la documentación y las cosas que la rodean? Sí. Entonces, cuando tienes todos los archivos en el directorio, si quieres personalizar qué se debe colocar en la barra de navegación o la barra lateral, puedes tener un archivo meta.json en todas partes en la carpeta de páginas. Y luego simplemente puedes especificar, okay, este archivo debe usarse como una página en lugar de una sección en la documentación. Es un pequeño archivo json. Correcto. Amamos json. Gracias por eso.

Oh, genial. ¿Cuál es tu recomendación, y no sé si esto es posible, para combinar Nextra con la generación de documentación de API? Sí, esa es una buena pregunta. Esto se basa en Next.js, por lo que puedes tener SSR, SSG en todas partes. Entonces puedes obtener datos de tu fuente CMS en la función SSG, y sí, proporcionaremos más ejemplos al respecto, pero es posible. Sí. ¿Eso significa que no está indexado en la investigación? Estamos trabajando en la documentación, pero tenemos algunos proyectos que funcionan de esa manera, pero aún no lo documentamos bien. Bueno, tengo una gran herramienta que puedes usar para eso. ¿Admite RTL, que supongo que es la biblioteca de pruebas de React y no de derecha a izquierda? No uses acrónimos. La respuesta es sí. Nos tomamos muy en serio el RTL y la accesibilidad, así que dedicamos mucho tiempo a eso. Se puede configurar todo el tema para mostrar el idioma RTL y todo se volteará. Me encanta eso. ¿Debería implementarse en Vercel, o podemos autohospedarnos? Puedes autohospedarte. Es Next. Puedes autohospedarte.

Combining Documentation and Live View

Short description:

¿Se podría utilizar Nexture para combinar la documentación y la vista en vivo de componentes para proyectos no-React? Queremos que Next.js esté por encima de Next.js, agregando pequeñas innovaciones a la parte de documentación. Las características planificadas incluyen la generación de tarjetas sociales para cada página de Docs y una potente funcionalidad de búsqueda. La integración con Storybook u otras API de backend aún no está planificada, pero podría considerarse en el futuro. Los mantenedores de proyectos de código abierto a menudo trabajan en múltiples proyectos para evitar el agotamiento y obtener perspectivas frescas. Xu estará disponible para más preguntas en la sala de preguntas y respuestas del orador.

¡Poder para la gente! ¿Se podría utilizar Nexture para combinar la documentación y la vista en vivo de componentes para proyectos no-React? ¿Proyecto no-React? No creo que eso sea posible. Tal vez puedas usar una caja de cosignación o algo así, y luego puedes usar cualquier cosa. Eso podría ser bueno.

Hay un par de preguntas en la cola que son como, ¿cómo lo ves diferente de algunas de las alternativas, como DocuSource o un sitio de documentación personalizado de Gatsby? ¿Hay algo que quieras compartir? Sé que estas preguntas siempre son difíciles.

Sí, creo que estas son herramientas geniales, pero cuando estamos diseñando Next.js, nos gusta evitar el trabajo duplicado. Queremos que esté por encima de Next.js, por lo que todas las características de Next.js estarán en Next.js automáticamente, y luego podemos agregar algunas pequeñas innovaciones a la parte de documentación en lugar de un servidor de desarrollo o un compilador o cosas de bundler. Por ejemplo, cosas que planeamos agregar, una es la generación de tarjetas sociales para cada página de Docs, para que cuando las compartas en las redes sociales, obtengas tarjetas agradables. Y cosas como la búsqueda, es algo que, hasta donde sé, el otro generador de Docs no tiene. Necesitas configurarlo tú mismo, al menos. Sí. Parte opinión, parte se integra bien con el ecosistema, parte podemos hacer lo que queramos, lo cual nos encanta. Sí. Genial.

Déjame ver si nos queda alguna de estas. Hablamos sobre la autohospedaje. ¿Hay alguna integración planificada con Storybook u otra cosa? Aún no, pero sí, podemos considerarlo. El primer hito es que sea estable y tenga todas las funciones y luego integrarlo con más API de backend. Ahora es posible, pero queremos brindar la mejor experiencia de usuario para poder optimizar para otros casos. Genial.

Ya estoy lleno, déjame decirte. Ojalá tuviera más documentación para escribir. Esta es buena. ¿Continuar trabajando en otros proyectos de código abierto más pequeños mientras trabajas en otros o en Next.js? Vale. Ese es un problema común para los mantenedores de proyectos de código abierto. La forma en que trabajo en las cosas es que, por lo general, cuando trabajas en un proyecto durante mucho tiempo, te agotas muy fácilmente. Entonces, la forma en que trabajo en las cosas es que cuando siento que estoy atascado en algo durante mucho tiempo, me gusta tener un proyecto diferente, completamente diferente, para pensar en cosas diferentes y tal vez después pueda tener mejores ideas sobre el proyecto anterior y luego puedo volver a cambiar. Sí. Eso es genial. Así se inspiran mutuamente de alguna manera. Sí, y puedo descansar un poco para pensar en cosas diferentes. Sí. Fresco en la mente. Sí. Muy bien. Bueno, ese es todo el tiempo que tenemos para preguntas aquí, pero Xu estará en la sala de preguntas y respuestas del orador cerca de la recepción si tienes más preguntas sobre Nextra. Muchas gracias por unirte y compartir. Gracias. Gracias. Gracias.

Check out more articles and videos

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Advanced Conference 2021React Advanced Conference 2021
27 min
(Easier) Interactive Data Visualization in React
Top Content
If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick & easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data & use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time & effort!

Workshops on related topic

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

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

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

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

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