Gráficos, como una Función del Estado / Gráfico = fn(estado)

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
Rate this content

Aplicando el principio de React de "UI es una función del estado" a SVGs y Diseño Gráfico. Hablaremos sobre el uso de sistemas de componentización y gestión de estado para crear y gestionar SVGs. Los espectadores saldrán de la sesión con una comprensión sólida de las prácticas de codificación creativa y una nueva perspectiva para construir sistemas en JavaScript.

This talk has been presented at React Summit Remote Edition 2021, check out the latest edition of this React Conference.

FAQ

Anil Durman es un ingeniero de software senior en el New York Times, donde su equipo trabaja en ayudar a las personas a comprender las noticias mediante nuevos formatos y páginas.

Anil ha trabajado en varios proyectos en el New York Times, incluyendo la página de blog en vivo que muestra publicaciones y actualizaciones en tiempo real, y el Centro COVID, que proporciona información actualizada sobre la pandemia.

Es una charla dada por Anil Durman que explora cómo se pueden utilizar los principios de React, como las funciones y el estado, para construir interfaces y sistemas gráficos dinámicos y reactivos mediante el uso de SVGs.

Anil explica que los SVGs, siendo un lenguaje basado en XML para describir gráficos 2D, se integran bien con JSX y React, permitiendo describir y manipular gráficos como componentes de React, lo que facilita la construcción de interfaces gráficas dinámicas.

El principio fundamental de React mencionado por Anil es que la UI, o interfaz de usuario, puede ser renderizada como una función del estado que se le proporciona, permitiendo que la interfaz se actualice automáticamente al cambiar el estado.

Anil describe un componente llamado 'ColorBar' que cambia de color según la propiedad de color que recibe, demostrando cómo puede utilizarse React para renderizar gráficos de forma declarativa y dinámica.

El equipo de Anil está buscando no solo desarrolladores, sino también diseñadores, gerentes de producto y cualquier persona que trabaje en tecnología.

El usuario de Twitter de Anil Durman es MeloGood, donde publica muchos de sus experimentos, especialmente cuadernos observables.

Romello Goodman
Romello Goodman
15 min
14 May, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Anil Durman, ingeniero en el New York Times, habla sobre el papel de los gráficos en el contexto del estado. Destaca el trabajo realizado por su equipo para ayudar a las personas a comprender las noticias a través de nuevos formatos y páginas. El equipo está contratando para varios roles técnicos. Por la noche, Anil es un codificador creativo que explora la intersección entre la creatividad y el código, y su último proyecto, Good Graphics, se centra en la UI como una función del estado, componentes de React y SVGs. Demuestra cómo los componentes pueden actualizarse en función del estado, lo que permite gráficos declarativos. Anil también muestra cómo se pueden utilizar círculos y cuadrículas anidados para crear sistemas complejos en React, lo que permite diseños gráficos dinámicos y reactivos.

1. Introducción a los Gráficos como una Función del Estado

Short description:

Anil Durman, ingeniero en el New York Times, habla sobre el papel de los gráficos en el contexto del estado. Destaca el trabajo realizado por su equipo para ayudar a las personas a comprender las noticias a través de nuevos formatos y páginas. El equipo está contratando para varios roles técnicos.

Mi nombre es Anil Durman. Soy ingeniero en el New York Times y esta es mi charla titulada Gráficos como una Función del Estado. Como dije, durante el día soy un ingeniero de software senior en el New York Times. En el Times, mi equipo ayuda a las personas a comprender las noticias con nuevos formatos y páginas. Es posible que hayas visto nuestra página de blog en vivo donde se muestra una secuencia de publicaciones y actualizaciones en tiempo real a medida que se desarrollan, o páginas con mucha información, como nuestro Centro COVID, donde las personas pueden actualizar información sobre la pandemia. Trabajo con muchas personas excelentes que están haciendo un trabajo altamente impactante y gratificante. Y como siempre, estamos contratando y buscando no solo desarrolladores, sino también diseñadores, gerentes de producto y cualquier persona que trabaje en tecnología.

2. Explorando UI, Componentes de React y SVGs

Short description:

Por la noche, soy un codificador creativo que explora la intersección de la creatividad y el código. Mi último proyecto, Good Graphics, surge de mis experimentos. Cubriremos la UI como una función del estado, los componentes de React y los SVGs. Los SVGs son más que activos de diseño; describen gráficos 2D utilizando un lenguaje basado en XML. JSX admite SVGs y su marcado se asemeja a los componentes de React. Podemos construir y agregar lógica a los SVGs, trabajando con gráficos en el mismo contexto que las UIs.

Por la noche, soy un codificador creativo. Amo la web, y gran parte de mi trabajo tiene que ver con explorar cómo se intersectan e interactúan la creatividad y el código entre sí. Mi nombre de usuario en Twitter es MeloGood. Allí puedes ver donde publico muchos experimentos, especialmente cuadernos observables. Y mi último proyecto se llama Good Graphics, donde he estado haciendo muchos experimentos. Y esta charla surgió naturalmente a partir de algunos de mis hallazgos. Así que, esta es una breve descripción de hacia dónde nos dirigimos. Hablaremos sobre el principio de la UI, las funciones, el estado, hablaremos un poco sobre los SVGs, los abordaremos en el contexto de los componentes de React, y luego hablaremos sobre los sistemas gráficos que se pueden construir con ellos una vez que se tenga esta comprensión.

Entonces, cuando decimos UI, la función, el estado, es un principio fundamental de React. Puedes renderizar toda tu aplicación o sitio web como una función del estado que le proporcionas. Entonces, cuando le das el nombre y apellido, renderizará el mundo. Y a medida que cambia esa entrada, tu UI se vuelve a renderizar de forma natural y siempre está actualizada con el estado que se le proporciona. Y esto realmente significa que JSX nos permite escribir de forma declarativa en marcado, especialmente en el contexto de las actualizaciones. Así que este es un componente muy simple de React. Se llama click-text. Y realmente lo que hace es asumir que le darás un contador y a medida que se actualice el contador, se actualizará el texto. Entonces, cuando tenemos la propiedad de click igual a uno, simplemente dirá haz clic una vez. Cuando tiene la propiedad de dos, haz clic dos veces, y así sucesivamente. Pero esto realmente ilustra que React nos permite incorporar realmente el estado de los datos que se te proporcionaron y renderizarlo en la pantalla sin tener que hacer demasiado extra.

Hablemos de los SVGs. Si eres como yo antes de comenzar a aprender más sobre ellos, son simplemente un activo de diseño que mi diseñador me daría y que yo simplemente agregaría a un componente de React y usaría, pero nunca volvería a tocar. Pero resulta que son mucho más que eso. Es un lenguaje basado en XML, que describe gráficos 2D, lo que básicamente significa que hay un montón de primitivas que te permiten describir cosas como un círculo o un rectángulo en la pantalla. Esto debe ser compatible con JSX de forma nativa y el marcado se ve muy similar a los componentes de React, solo con props especiales. Entonces, en acción, esto es un SVG. Puedes ver que envolvemos los componentes de nivel superior SVG con una lista para la altura, algunos detalles sobre cómo dibujar líneas con un trazo y un relleno, y luego puedes ver que el componente de círculo tiene algunas props. El círculo tiene una coordenada x, el círculo tiene una coordenada y, y luego r que es el radio del círculo. Esto es simplemente la especificación de cómo dibujar un círculo usando SVGs, y ya se parece y se ve como un componente de React, por lo que se presta muy bien a pensar en React. Entonces, podemos comenzar a construir estos SVGs y componentizarlos. Podemos agregar más lógica a ellos y realmente comenzar a trabajar con gráficos en el mismo contexto de una manera en la que ya estamos

3. Explorando Componentes y Gráficos

Short description:

Nuestros componentes pueden actualizarse en función de un estado, lo que nos permite escribir gráficos de manera declarativa. Por ejemplo, el componente ColorBar renderiza un rectángulo que actualiza su color en función de la propiedad pasada. También podemos crear gráficos complejos utilizando HTML básico y descomponer la lógica en componentes. El componente Grid, por ejemplo, utiliza un bucle for anidado para crear una cuadrícula de componentes secundarios, lo que nos permite construir sistemas complejos combinando lógica de una manera compatible con React.

Saber cómo trabajar con nuestras interfaces de usuario. Nuestros componentes pueden actualizarse en función de un estado, y realmente el poder que esto desbloquea es que JS establece un SVG que nos permite escribir gráficos de manera declarativa. Así que hablemos a través de un ejemplo de lo que quiero decir. Este componente se llama ColorBar. Recibe una propiedad de color de stock y luego renderiza un rectángulo que tiene 20 píxeles de altura y el ancho completo. Si llamamos al componente ColorBar con el color negro, puedes ver en la parte inferior que tenemos una barra negra. Pero porque, como dije, JSX nos permite renderizar nuestros componentes y gráficos de una manera muy declarativa, podemos pasar una propiedad de color rojo y ver nuestra barra actualizarse automáticamente y volver a renderizarse de la misma manera que lo haría una interfaz de usuario. O podemos pasarle el color verde y lo mismo con el color azul. Entonces, esta es otra forma de pensar en trabajar con el estado y trabajar con React y pensar de manera muy declarativa en cómo escribimos nuestros componentes, siendo la salida un gráfico en lugar de una interfaz de usuario completamente funcional, pero permitiéndonos usar los mismos principios. Podemos comenzar a pensar y agregar una gran cantidad de lógica complicada a estos componentes porque, como dije, son componentes completamente funcionales y tienen todo lo que un componente regular de React haría y tendría. Entonces, en este ejemplo tenemos props.colors y también este se llama multibar o barra multicolor para retroceder un poco. Recibe la propiedad props.colors, que es simplemente una matriz de colores, y luego traza esos colores dentro de un degradado. El componente degradado lineal es una etiqueta SVG compatible nativamente y simplemente permite declarar un degradado y luego en nuestro rectángulo podemos aplicar ese degradado como el relleno. Entonces, el color del rectángulo coincidirá con el degradado. Entonces, en este ejemplo lo llamamos negro por lo que renderiza una barra completamente negra todo el tiempo porque no tienes que espaciar los colores son todos de un solo color, pero usando el mismo componente puedes actualizar un estado para que sea rojo verde azul y obtienes una barra de colores completamente degradados de rojo verde azul. Entonces, siguiendo nuevamente esa misma idea de que el estado que pasas a tu gráfico se actualiza automáticamente y nuestros gráficos pueden volverse super complejos para manejar todos estos estados diferentes.

Entonces, cuando digo gráfico como una función del estado, realmente estoy tratando de transmitir que podemos usar HTML básico para construir estos sistemas gráficos realmente complejos y nuestra lógica se puede descomponer en componentes de manera similar a cómo ya trabajamos con interfaces de usuario y nuestros diseños gráficos pueden ser ricos y reactivos e intuitivos para el usuario final como lo son nuestras interfaces de usuario. Entonces, trabajemos y recorramos juntos la construcción de un gráfico. Entonces, este gráfico, nuevamente, es solo un gráfico de círculo muy simple. Abstraí el marcado de SVG del círculo en un componente que recibe las mismas propiedades que acabo de pasarle. Obtenemos una salida muy similar de un solo círculo. Pero si agregamos un poco de lógica y nos apoyamos en algunas de las funcionalidades que React puede brindarnos, podemos hacer cosas realmente geniales. Este componente se llama Grid. Y lo que hace Grid es básicamente un bucle for anidado de columnas y filas. Y si le das la entrada de cinco columnas, cinco filas, toma cualquier componente secundario que le des y lo traza varias veces en cada posición de esa cuadrícula. Entonces, en la práctica, al usarlo, hace algo como esto, donde le damos a esa cuadrícula un componente de círculo como hijo. Y va y crea una cuadrícula de cinco por cinco componentes de círculo usando mucha de la funcionalidad nativa de React en torno a los hijos y acoplando eso con el funcionalidad de grupo admitida que nos brindan los SVG. Entonces, como dije, podemos tomar nuestra lógica, descomponerla en componentes. Realmente comenzamos a combinar la lógica entre sí de una manera compatible con React para construir sistemas complejos. Entonces, ahora que tenemos este sistema en su lugar, puedes hacer cosas realmente geniales de inmediato con él. Incluso podrías reemplazar el círculo por un componente de rectángulo y realmente aprovechar lo que ya hemos escrito, similar a cómo podrías reutilizar la lógica de un componente que ya has escrito.

4. Sistemas Complejos con Círculos Anidados

Short description:

Puedes crear sistemas complejos con círculos anidados, lo que permite una multiplicidad de resultados. Al combinar círculos anidados con otros códigos, como una cuadrícula, puedes crear diferentes resultados. React permite que tu interfaz de usuario represente tu estado, y los SVGs permiten diseños gráficos dinámicos y reactivos.

O podrías crear diseños realmente geniales y tener un montón de círculos anidados entre sí para no tener que hacer solo una cosa, puedes hacer muchas cosas diferentes. Pero aún reutiliza mucha de la misma lógica que teníamos antes, pero nos permite experimentar un poco más intercambiando cosas y ver cuánto puede soportar nuestro gráfico en términos de posibilidades. Pero creo que también hay un paso adelante que podemos dar, si observamos la capacidad de componentización. Entonces, este es un componente llamado círculos anidados. Y si volvemos al último ejemplo, es simplemente tomar esa lógica de tener cinco círculos anidados entre sí y realmente desarrollarla para que sea un poco más robusta y un poco más determinable y reutilizable. Entonces, lo que hace círculos anidados es esa misma lógica de bucle for con una matriz vacía, y simplemente traza la cantidad de círculos congruentes al primer círculo ocupando todo el espacio. Y luego, si hay dos círculos, el segundo círculo ocupa la mitad del espacio. Y si hay 10 círculos, se distribuye ese espacio aún más entre esos 10 círculos. Entonces, con un componente como este, puedes construir un sistema que no solo tiene una única salida, sino que puede tener una multiplicidad de salidas. Por lo tanto, usando nuestros componentes, en la esquina superior izquierda puedes ver un círculo anidado con un cierto número de círculos, la propiedad es igual a uno, mientras que en la esquina inferior derecha, con un número de círculos, la propiedad es igual a 10 o 15. Así que puedes ver cómo nuestros sistemas pueden ser más complejos una vez que dominamos esta componentización, y una vez que podemos comenzar a construir sobre ella y jugar un poco más con nuestro estado. Como dije en ejemplos anteriores, incluso podemos tomar círculos anidados y combinarlos con otras piezas de código en nuestra base de código para hacer algo realmente genial. Entonces, esto es un bucle de cuadrícula de círculos anidados, y se parece mucho al primer ejemplo de cuadrícula que te mostré, pero debido a que tenemos círculos anidados y ese componente puede manejar tantas opciones estatales diferentes, puedes ver cómo este sistema, este mismo sistema, dependiendo de las propiedades y el estado que le des, podría renderizar un solo círculo o renderizar estas dos salidas de manera alternativa al jugar con el número de círculos que el círculo anidado debe renderizar. Incluso si quisieras jugar con el número de cuadrículas también, podrías incluso renderizar un montón de círculos masivos, pero en una cuadrícula de dos por dos. Y eso realmente destaca el hecho de que este sistema no se trata realmente de combinar nuestros gráficos, sino que se trata más de crear un sistema que pueda contener una variedad de salidas diferentes y una multiplicidad de resultados. Entonces, para resumir, en React, tu interfaz de usuario es una representación de tu estado. Puedes usar SVGs para aplicar los principios de React al diseño gráfico. Cuando pensamos en nuestro estado, podemos contener infinitas posibilidades y no hay un solo diseño para el que puedas diseñar. Puedes diseñar para una amplia variedad de cosas y resultados. Y nuestros diseños gráficos pueden ser dinámicos y reactivos. ¡Gracias por venir!

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.
Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.

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.