Lecciones aprendidas al crear un nuevo marco sobre React

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Slides
Rate this content

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.

This talk has been presented at React Advanced 2022, check out the latest edition of this React Conference.

FAQ

Shyam Swaroop es el cofundador y CTO de Atrilabs, y ha compartido sus experiencias en el desarrollo de un nuevo framework de pila completa utilizando React para construir interfaces de usuario en el evento de React Advanced London.

Un framework de pila completa en el contexto de React es una solución integrada que permite a los desarrolladores manejar tanto el frontend como el backend utilizando React y tecnologías asociadas, facilitando la creación de aplicaciones completas.

Además de las aplicaciones web y móviles tradicionales, React se ha utilizado para sintetizar música y para integrar contenido en archivos markdown, especializándose en tareas como la documentación a través de frameworks como DocuSource.

Se utilizan múltiples herramientas y configuraciones, como Webpack y archivos de declaración de TypeScript, para manejar importaciones de archivos no JavaScript, permitiendo que se traten como módulos y se integren adecuadamente en el ecosistema de desarrollo.

Shyam enfrentó desafíos como comprender el ecosistema de herramientas alrededor de React y JavaScript, así como la necesidad de adentrarse en la historia de JavaScript y su diseño para desarrollar un framework eficaz.

El framework utiliza herramientas clave como Webpack y Babel para el empaquetado y la transpilación, permitiendo una mejor integración y manejo de módulos y recursos en el desarrollo de aplicaciones.

Shyam Swaroop
Shyam Swaroop
20 min
24 Oct, 2022

Comments

Sign in or register to post your comment.
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.

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

Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Uso efectivo de useEffect
React Advanced 2022React Advanced 2022
30 min
Uso efectivo de useEffect
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Next.js para Desarrolladores de React.js
React Day Berlin 2023React Day Berlin 2023
157 min
Next.js para Desarrolladores de React.js
Top Content
Featured WorkshopFree
Adrian Hajdin
Adrian Hajdin
En esta avanzada masterclass de Next.js, profundizaremos en conceptos clave y técnicas que permiten a los desarrolladores de React.js aprovechar al máximo Next.js. Exploraremos temas avanzados y prácticas prácticas, equipándote con las habilidades necesarias para construir aplicaciones web de alto rendimiento y tomar decisiones arquitectónicas informadas.
Al final de esta masterclass, serás capaz de:1. Comprender los beneficios de los Componentes del Servidor React y su papel en la construcción de aplicaciones React interactivas, renderizadas por el servidor.2. Diferenciar entre el tiempo de ejecución de Edge y Node.js en Next.js y saber cuándo usar cada uno en función de los requisitos de tu proyecto.3. Explorar técnicas avanzadas de Renderizado del Lado del Servidor (SSR), incluyendo streaming, fetching paralelo vs. secuencial, y sincronización de datos.4. Implementar estrategias de caché para mejorar el rendimiento y reducir la carga del servidor en las aplicaciones Next.js.5. Utilizar Acciones React para manejar la mutación compleja del servidor.6. Optimizar tus aplicaciones Next.js para SEO, compartir en redes sociales, y rendimiento general para mejorar la descubrabilidad y la participación del usuario.
Aventuras de Renderizado Concurrente en React 18
React Advanced 2021React Advanced 2021
132 min
Aventuras de Renderizado Concurrente en React 18
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?

¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.

Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
Consejos sobre React Hooks que solo los profesionales conocen
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
Consejos sobre React Hooks que solo los profesionales conocen
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
Presentando FlashList: Construyamos juntos una lista performante en React Native
React Advanced 2022React Advanced 2022
81 min
Presentando FlashList: Construyamos juntos una lista performante en React Native
Top Content
Featured Workshop
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
En esta masterclass aprenderás por qué creamos FlashList en Shopify y cómo puedes usarlo en tu código hoy. Te mostraremos cómo tomar una lista que no es performante en FlatList y hacerla performante usando FlashList con mínimo esfuerzo. Usaremos herramientas como Flipper, nuestro propio código de benchmarking, y te enseñaremos cómo la API de FlashList puede cubrir casos de uso más complejos y aún así mantener un rendimiento de primera categoría.Sabrás:- Breve presentación sobre qué es FlashList, por qué lo construimos, etc.- Migrando de FlatList a FlashList- Enseñando cómo escribir una lista performante- Utilizando las herramientas proporcionadas por la biblioteca FlashList (principalmente el hook useBenchmark)- Usando los plugins de Flipper (gráfico de llamas, nuestro perfilador de listas, perfilador de UI & JS FPS, etc.)- Optimizando el rendimiento de FlashList utilizando props más avanzados como `getType`- 5-6 tareas de muestra donde descubriremos y solucionaremos problemas juntos- Preguntas y respuestas con el equipo de Shopify
React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.