Guía para desarrolladores frontend sobre Web3

Rate this content
Bookmark

Hay mucho entusiasmo e interés en adentrarse en el espacio de Web3, y puede ser difícil manejar la sobrecarga de información y el énfasis en aprender nuevos lenguajes para trabajar en contratos inteligentes. Muchos desarrolladores en el espacio frontend se preguntan: '¿Cuánta de esta nueva información necesito para pasar a web3?' La verdad es que, como desarrollador de React, las habilidades que conozco son esenciales en web3. Vamos a agregar un poco de contexto sobre cómo aprovechar esas habilidades existentes para tener éxito en este nuevo espacio.


En esta charla, vamos a explorar cómo construir el contexto correcto y las tecnologías que debes entender para ayudarte a adentrarte en web3 como desarrollador frontend. Repasaremos paquetes populares como Ethers, que se pueden utilizar en aplicaciones de React para interactuar con billeteras y contratos inteligentes existentes. También exploraremos cómo puedes aprovechar tus habilidades en JavaScript para construir dApps de pila completa utilizando servicios gestionados como Moralis y Thirdweb.


Vamos a desmitificar algunos de los conceptos en web3 y aprovechar nuestras habilidades existentes para comenzar a construir.

22 min
21 Jun, 2022

Video Summary and Transcription

Esta charla cubre una introducción a Web 3 y contratos inteligentes, incluyendo implementación y compilación de bytecode. También se discute la interacción con billeteras de blockchain, el uso de puntos finales RPC y exploradores de bloques, y el acceso a datos de contratos inteligentes. La charla enfatiza el uso de ABI y bibliotecas de JavaScript como Ethers para interactuar con contratos inteligentes. Menciona el cambio de mentalidad de las solicitudes HTTP al uso de código ABI y bibliotecas para el desarrollo frontend en Web 3. La charla concluye mencionando Web3UI y herramientas como PolygonScan y Etherscan para construir en la cadena de bloques.

Available in English

1. Introduction to Web 3 and Smart Contracts

Short description:

Bienvenidos a mi charla sobre Web 3. Cubriré contratos inteligentes, conexión a la cadena de bloques, obtención de datos y herramientas para el desarrollo de Web3. Soy Rahat, un defensor del desarrollador en Polygon, y hablaré sobre nuestra cadena de bloques con carbono negativo. Los contratos inteligentes son el código de la cadena de bloques, escritos en lenguajes como Solidity. Las cadenas EVM, como Ethereum y Polygon, son compatibles. La implementación implica la compilación de bytecode.

Bienvenidos, todos, a mi charla, una guía para desarrolladores front-end sobre Web 3. Estoy realmente emocionado de estar aquí en la React Summit, hablando un poco sobre Web 3 y dándoles una introducción a ella. Aquí hay una agenda general de lo que vamos a cubrir hoy. Vamos a hablar sobre qué son los contratos inteligentes, cómo desarrollarlos, vamos a hablar sobre cómo conectarse a la blockchain, hablar sobre cosas como billeteras y puntos finales RPC. Lo veremos en un momento. Veremos cómo obtener datos de la blockchain, y algunas herramientas realmente geniales que puedes usar para construir, adentrándote en el agujero del conejo de Web3 como yo. Un poco sobre mí. Mi nombre es Rahat. Soy un defensor del desarrollador en Polygon. Anteriormente, también he sido desarrollador front-end y un ingeniero Solidity independiente. En general, soy un hacker independiente, un entusiasta de Web3, y estos son los lugares donde puedes encontrarme, Twitter, LinkedIn, GitHub, si alguna vez quieres ver algunos ejemplos de código de algunas de las cosas de las que hablamos durante esta charla.

Polygon, que es la empresa para la que trabajo, vamos a hablar específicamente sobre uno de nuestros productos, que es una blockchain de prueba de participación. Una de nuestras ofertas populares, esta es prácticamente nuestra oferta más popular. Es una blockchain con carbono negativo. Nos esforzamos por ser completamente positivos para el clima, utiliza aproximadamente un 99% menos de energía que Ethereum u otras cadenas de bloques. Es una excelente manera de comenzar a sumergirse en el espacio de Web3 sin tener que preocuparse tanto por el desperdicio y el consumo de energía que se produce con muchas de las otras cadenas de bloques que existen. Pero yendo al meollo de nuestra charla, los contratos inteligentes. Los contratos inteligentes son esencialmente el código de la blockchain. Es solo un archivo que contiene algo de código, algunas instrucciones sobre lo que tu aplicación o tu DApp, que es una aplicación descentralizada, debe hacer cuando se implementa en la blockchain. ¿Cómo escribimos contratos inteligentes? ¿Qué necesitamos saber sobre ellos? Los lenguajes en los que generalmente se escriben los contratos inteligentes incluyen Solidity, Rust, Viper o Go. Voy a hablar principalmente sobre las cadenas EVM durante esta charla. EVM significa Máquina Virtual Ethereum, lo que significa que todo lo que hablamos, todo el código que revisamos y repasamos, es compatible con la Ethereum blockchain. Nuestra blockchain, Polygon, también es compatible con Ethereum, por lo que todo lo que aprendas en ese aspecto es compatible uno a uno en Polygon. Aunque Solidity es generalmente el lenguaje de uso más popular, otro popular es Viper. Entonces, definitivamente, si te dedicas al desarrollo de contratos inteligentes, esos son algunos buenos lenguajes para conocer.

Ahora, supongamos que has escrito tu contrato inteligente, has escrito algo de código en Solidity, y quieres implementarlo en la blockchain. La implementación lleva algunos pasos diferentes. Primero, necesitas el bytecode. El bytecode es esencialmente código legible por máquina que es

2. Smart Contract Development and Interactions

Short description:

Solidity es un lenguaje de alto nivel compilado en bytecode para la máquina virtual Ethereum. Se pagan tarifas de gas para realizar transacciones en la cadena de bloques, con algunas monedas quemadas y otras entregadas a mineros o validadores. Los scripts de implementación y los nodos de Ethereum son esenciales para el desarrollo de contratos inteligentes. Polygon utiliza validadores en lugar de mineros, y servicios como Alchemy e Infera proporcionan acceso a los nodos de Ethereum. Las interacciones ocurren a través de billeteras como MetaMask, que pueden conectarse a diferentes cadenas de bloques.

Solidity es compilado desde Solidity. Solidity es un lenguaje de muy alto nivel, lo que significa que tiene el código, pero necesita ser compilado a algo que la máquina virtual Ethereum pueda leer. Y eso es lo que es este bytecode. Lo siguiente que necesitas saber es qué es el gas. El gas, no como el que usarías en las bombas, sino las tarifas de gas asociadas al desarrollo de la cadena de bloques, incluyen básicamente una tarifa que debes pagar para realizar transacciones con la cadena de bloques. Esta tarifa está compuesta por una tarifa base que puede quemarse, por lo que una cierta cantidad de monedas o tokens en esa cadena de bloques pueden quemarse durante esta transacción. Y luego una cierta cantidad de eso se entrega a lo que se llaman mineros o validadores. Y estos son personas que tienen nodos o computadoras que básicamente llevan un registro de la cadena de bloques, tienen copias de ella y validan transacciones para agregarlas a la cadena de bloques en general. A continuación, necesitas un script de implementación. Un script de implementación se puede obtener de entornos como HardHat y Truffle, que son herramientas para crear entornos para implementar, probar y crear tus contratos inteligentes en tu máquina local. Por último, necesitas un nodo de Ethereum. Los nodos de Ethereum son básicamente computadoras que tienen una copia de la cadena de bloques de Ethereum. Piensa en la cadena de bloques de Ethereum como esta gigantesca base de datos. El nodo alberga mucha de la información que está en esa cadena de bloques. Tienes todo en lo que se llama una red distribuida. Hay nodos y computadoras en todo el mundo que llevan un registro de las transacciones y juntos forman el consenso de cuál es la información de la cadena de bloques. Polygon funciona de manera muy similar en este caso. Tenemos varios nodos en todo el mundo y en lugar de utilizar mineros que minan estas transacciones, tenemos validadores que las validan. A continuación, hay servicios como Alchemy e Infera que pueden ayudarte a acceder a un nodo de Ethereum. No todos pueden ejecutar su propio nodo de Ethereum o nodo de Polygon en sus propias computadoras. Estos servicios te proporcionan puntos finales o puntos de llamada a procedimiento remoto, que te permiten interactuar con Ethereum y también te permiten interactuar con Polygon. Por último, hablemos de las interacciones. Las interacciones generalmente ocurren con una billetera. Las billeteras suelen estar dentro de tu navegador. Ahora mismo te voy a mostrar una billetera llamada MetaMask, que es una billetera en el navegador. Tengo un poco de Ethan aquí, pero puedo cambiar entre diferentes redes. Voy a cambiar a la red de prueba de Polygon solo para mostrar que esta es la red de Polygon. Puedes tener acceso a diferentes cadenas de bloques a través de esta billetera. Las billeteras interactúan utilizando un punto final RPC, por lo que tienen sus propios puntos finales incorporados de servicios como Inferior y Alchemy. Pero por ahora, vamos a desglosar algunas de estas interacciones. Te mostré un poco sobre las billeteras, que es MetaMask.

3. Interacting with Blockchain Wallets

Short description:

Las billeteras solicitan el consentimiento del usuario para acceder y conectarse a la cadena de bloques. Se utilizan para realizar transacciones e interactuar con aplicaciones Web3. Los puntos finales RPC y los exploradores de bloques son útiles para interacciones de solo lectura y depuración. La interacción con las billeteras de la cadena de bloques implica acceder al objeto Ethereum en la ventana y recuperar la cuenta y la dirección asociadas. Un patrón común de conexión de billetera implica utilizar la función de conexión de billetera en un gancho useEffect, pero esta práctica debe evitarse debido a problemas de seguridad y una mala experiencia de usuario.

Aquí apareció una billetera. Lo que realmente hacen las billeteras es solicitar el consentimiento del usuario para acceder a su billetera y conectarse a la cadena de bloques. Muchas de las diferentes interacciones que necesitas hacer requieren a veces algún tipo de tarifa de transacción. Por lo general, esto implica alguna mutación que debe realizarse en la cadena de bloques, o a veces se requiere una firma de tu parte para demostrar tu identidad, para demostrar que eres tú quien está usando tu billetera. Todo esto se hace a través de una billetera como MetaMask o a través de billeteras de hardware como la que ves aquí de Ledger. Estas son excelentes cuando los usuarios necesitan realizar transacciones como la creación o compra de un NFT, transferir tokens, cualquier cosa que requiera interacción entre tú y la cadena de bloques o tú y otras personas que utilizan aplicaciones Web3. El otro tipo de interacción es solo de lectura, como mencionamos antes, los puntos finales RPC. Estos son puntos finales proporcionados por un proveedor de nodos. Son excelentes para dApps que solo tienen transacciones de solo lectura, como un explorador de bloques. Los exploradores de bloques te brindarán esencialmente una interfaz de usuario que actúa como un libro mayor completo para buscar transacciones, para buscar el historial de esas transacciones, para buscar cualquier transacción fallida que puedas tener. Entonces, cuando intentas averiguar qué está sucediendo, qué está pasando con ciertas llamadas en tu aplicación, puedes consultar los exploradores de bloques para ver qué sucedió durante esa llamada. ¿Por qué fue rechazada? ¿Por qué no se realizó? Estos son excelentes para depurar. Veamos un poco de código y veamos cómo interactuar realmente con la edición de la billetera de la cadena de bloques. En mi pantalla tengo una función JavaScript llamada handleWalletConnect. Esto generalmente se adjuntaría a algo como un botón. Entonces, esta es una función asíncrona, y lo que estoy haciendo aquí es sacar el objeto Ethereum de la ventana. Ahora, podrías estar pensando, Rahat, ¿a qué te refieres con objeto Ethereum en la ventana, verdad? Entonces, la razón por la que puedo sacar un objeto Ethereum de la ventana es porque estoy considerando que esta persona podría tener una billetera MetaMask como la que tengo configurada aquí. Mientras tengas una billetera inyectada en el navegador como esa, esa billetera también inyectará el objeto Ethereum en tu ventana. Y luego, solo un poco de plantilla para acceder a la cuenta asociada a esa billetera y luego acceder a la dirección y mostrarla. Si el objeto Ethereum no existe, simplemente mostraremos una alerta de que no se detectó ninguna billetera. La persona debería instalar MetaMask o algo así, y tú puedes proporcionar una alerta mejor que la que yo hice. Así que aquí tienes una demostración rápida de cómo funciona. En esta página, tengo este botón de conexión de billetera. Lo presiono y una vez que eso sucede, mi MetaMask aparece, presiono iniciar sesión y muestra mi dirección en la página. Esto es básicamente la mitad de lo que usarías para algo como iniciar sesión con Ethereum, de lo cual hablaré en un momento. Ahora voy a hablar sobre otro patrón común de conexión de billetera. Esto se hace bastante en muchas aplicaciones descentralizadas donde tomamos esa función handleWalletConnect, no me molesté en volver a escribirla aquí, y la colocamos dentro de un useEffect y la llamamos de inmediato, específicamente al montar la aplicación real. Por favor, no hagas esto si alguna vez te adentras en el espacio Web3. Lo que esto hace es, básicamente, tan pronto como llego al sitio web, el sitio web solicitará automáticamente que conecte mi billetera. Esto es algo así como la misma situación de cuando vas a un sitio web y comienza a reproducirse música o un video se reproduce automáticamente. Nadie realmente quiere que eso suceda de inmediato. Esta es una mala práctica de seguridad y es algo que simplemente conduce a una mala experiencia de usuario en general en tu

4. Wallets and Interacting with the Blockchain

Short description:

Una de las cosas principales que hablamos sobre las billeteras es que esta es la puerta de entrada para que un usuario consienta en usar la cadena de bloques para transacciones. Ir más allá de conectar la billetera, iniciar sesión con Ethereum ofrece una verdadera experiencia de inicio de sesión único. La billetera proporciona una dirección pública y privada, lo que permite a los usuarios acceder a la cadena de bloques, aprobar transacciones y ver sus activos. La interacción con la cadena de bloques implica el uso de puntos finales RPC, que proporcionan información sobre bloques y transacciones. Estos datos se pueden utilizar para construir paneles de control y exploradores de bloques. Los datos de los contratos inteligentes se pueden acceder compilando el código de Solidity en bytecode.

, porque elimina la capacidad del usuario de dar su consentimiento. Una de las cosas principales que hablamos sobre las billeteras es que esta es la puerta de entrada para que un usuario consienta en usar la blockchain para realizar ciertas transacciones. Esto elimina esa capacidad. Y algunas personas podrían decir, que aún puedes cancelar la transacción, pero no, debes detenerte, porque si tu billetera aparece de inmediato, no tienes la oportunidad de pasar por la aplicación y comprender qué está sucediendo. Así que mencioné esto un poco, solo un par de diapositivas atrás, yendo más allá de conectar la billetera y usar algo llamado iniciar sesión con Ethereum. Una de mis cosas favoritas que han surgido en el espacio Web 3 es esta verdadera experiencia de inicio de sesión único, donde puedes tomar una billetera, conectarla, validar tu dirección, como vimos antes, y luego desde allí hacer algo como conectarte a un servidor como lo harías normalmente para autenticación, para realmente involucrar a alguien , crear un perfil de usuario para ellos en tu Dapp o aplicación. Y lo genial aquí es que ese perfil de usuario puede viajar con ellos a cualquier lugar. No necesitan crear un nuevo correo electrónico o contraseña cada vez que van a una nueva aplicación. No necesitan confiar sus credenciales a un servicio como iniciar sesión con Google o iniciar sesión con Facebook. Todo es realmente propiedad de ellos. Ese perfil de usuario les pertenece a través de esta billetera. Y la forma en que funciona esa billetera es que te brinda acceso a través de un par clave-valor, una dirección pública y una dirección privada. La dirección pública es la que mostramos en la página. Y luego hay una dirección privada a la que solo ellos tienen acceso y que les permite acceder a la blockchain y les permite aprobar transacciones, ver sus activos y acceder al espacio web tres en general . Entonces hablamos del lado de la billetera, de hacer interacciones, como interacciones reales con el usuario, pero ¿cómo interactuamos con la blockchain, RPC y Point Edition? En este caso, es posible que solo queramos realizar transacciones de solo lectura, tal vez queramos crear nuestro propio explorador de bloques, tal vez queramos simplemente mostrar algunos datos en forma de gráficos, paneles de control, lo que sea. Aquí tengo este proveedor. Y este proveedor es algo que nos brinda el paquete ethers, que es un paquete popular de JavaScript que puedes usar en tus front-end. Y todo lo que realmente tienes que hacer es usar este método e ingresar un punto final RPC. Estos puntos finales RPC son básicamente como una URL, un punto final HTTP, que te proporcionan servicios como los que mencioné anteriormente de alchemy y Azure. Y esto es como un conjunto de información que puedes obtener del punto final RPC. Entonces, aquí, lo que estoy haciendo es obtener la información sobre el último bloque en la blockchain, ¿y qué significa eso? ¿Qué es el último bloque? Entonces, los datos de la blockchain se dividen en estos bloques, todos tienen algún tipo de número asociado a ellos, una marca de tiempo, diferentes valores hash, y esto es lo que alberga todos los datos en este bloque. Entonces, en este bloque específico, hay varias transacciones. Solo se muestra una aquí, esta es una marca de tiempo y solo alguna información sobre el minero que realmente validó esto, así como información adicional como el gas que se utilizó. Y esta es la información que puedes usar para construir algunos de esos paneles de control, parte de esa información. Te mostraré una demostración rápida de algo que construí usando ese conjunto de datos. Esto es solo una lista de los últimos 10 bloques en la blockchain de Polygon , incluido su número de bloque, su marca de tiempo y el número de transacciones en cada uno de esos bloques. Puedes profundizar un poco más en esos datos JSON que se devuelven en algunas de estas llamadas, pero esto es solo una implementación muy básica de cómo podría comenzar un explorador de bloques. Muy bien. Pero, ¿cómo obtenemos realmente datos de los contratos inteligentes, verdad? Seguro, tal vez alguien escribió algún desarrollador de contratos inteligentes escribió un contrato para nosotros y eso alberga alguna información. ¿Cómo accedemos a esa información? Necesitamos un mapa. Entonces, el código de Solidity, como mencioné antes, se compila en bytecode.

5. Interacting with Smart Contracts

Short description:

Para interactuar con contratos inteligentes, utilizamos una ABI, un objeto JSON con instrucciones sobre las funciones disponibles y sus entradas y salidas. Las bibliotecas de JavaScript como ethers nos permiten interactuar con la cadena de bloques utilizando la ABI. Importamos las dependencias necesarias, incluida la ABI y la dirección del contrato desplegado. Esto nos da acceso a las funciones definidas en la ABI. Las mutaciones, como atacar a un Pokémon, requieren una pequeña cantidad de gas para completarse en la cadena de bloques. El desarrollo front-end en web 3 sigue siendo similar al desarrollo tradicional, con un cambio de mentalidad de las solicitudes HTTP al uso de código ABI y bibliotecas. Las mutaciones tienen costos, mientras que las transacciones de solo lectura son gratuitas. Algunas herramientas populares de desarrollo front-end en web 3 incluyen ethers, la biblioteca web 3 y la biblioteca WAGMI.

Necesitamos instrucciones sobre cómo recorrer realmente ese bytecode. Entonces, lo que necesitamos es una ABI, o una Interfaz Binaria de Aplicación. Esto generalmente es exportado por un desarrollador de Solidity y pasado a un desarrollador de front-end. Y esto es solo un objeto JSON con instrucciones sobre los diferentes tipos de funciones que están disponibles en un contrato inteligente, qué entrada necesitan algunas de esas funciones y los tipos de salidas que te proporcionan. Esto permitirá que JavaScript use ciertas bibliotecas para recorrer la cadena de bloques y obtener la información adecuada que necesita. En lugar de hacer una solicitud HTTP, se utiliza esta ABI, junto con una función proporcionada por un paquete como ethers, para interactuar realmente con la cadena de bloques en sí. ¿Cómo funciona esto? Primero, importarías las dependencias. Esto se hace asumiendo que estás trabajando en una aplicación React. Entonces importarías ethers de la biblioteca ethers y una ABI que algún desarrollador de contratos inteligentes te haya proporcionado. Este es un ejemplo de un contrato que escribí, donde se muestra una pequeña batalla de Pokémon entre dos Pokémon. Lo siguiente que necesitas es la dirección del contrato desplegado. Entonces, cada contrato desplegado, al igual que tu billetera, tiene su propia dirección. Así que necesitamos obtener la dirección para ver dónde en la cadena de bloques vive ese contrato. Suministramos la ABI, la dirección del contrato, así como el objeto Ethereum a este método de contrato proporcionado por ethers. Una vez que suministramos todo eso, luego obtenemos acceso a las funciones reales enumeradas dentro del archivo ABI. Una de esas funciones aquí es esta funcionalidad de ataque, donde nuestro Pokémon va a atacar a los demás, y luego se restarán ciertas cantidades de puntos de golpe o HP. Veamos eso en acción. Entonces, lo que está sucediendo aquí es que decidí, okay, necesito atacar a este Pokémon. Presioné usar lanzallamas. Mi MetaMask va a aparecer. Voy a pagar una pequeña cantidad de gas para asegurarme de que esta transacción se realice en la cadena de bloques, y una vez que se complete, todos los puntos de golpe de los dos Pokémon disminuirán, y todo esto se registra en la cadena de bloques en sí. Entonces, las cosas principales que debes entender aquí son que el desarrollo front-end en web 3 sigue siendo el mismo. La interfaz de usuario todavía se construye utilizando todas las mismas prácticas. Como desarrollador front-end, no necesitas conocer las complejidades profundas de cómo construir tus propios contratos inteligentes. Solo necesitas saber cómo interactuar con ellos, como hemos hablado. Pasas de un cambio de mentalidad de hacer solicitudes HTTP a usar código ABI y bibliotecas para llamar al contrato inteligente, y la otra cosa principal a recordar es que las mutaciones tienen un costo. Las transacciones de solo lectura son gratuitas. Las mutaciones siempre tendrán un costo. Algunas herramientas de desarrollo front-end en web 3 en las que definitivamente puedes profundizar y aprender más son ethers y la biblioteca web 3, así como la biblioteca WAGMI. La biblioteca WAGMI proporciona una

6. Web3UI and Building on the Blockchain

Short description:

Web3UI es una biblioteca con componentes de React y exploradores de bloques como PolygonScan y Etherscan. Cubriré estas herramientas en mi masterclass en React Summit. Si quieres aprender más sobre cómo construir en la cadena de bloques, visita academy.polygon technology.

Hay muchos hooks de React para conectarse y realizar transacciones fácilmente con la cadena de bloques. Web3UI es una biblioteca impresionante que te proporciona un montón de componentes de React que también puedes utilizar, así como diferentes exploradores de bloques como PolygonScan si estás interactuando con un contrato inteligente en la red Polygon o Etherscan si estás interactuando con un contrato inteligente en la red Ethereum. Estas son todas herramientas de las que también hablaré durante mi masterclass aquí en React Summit. Así que si quieres aprender más sobre eso, profundizaremos en mayor detalle. En general, si quieres aprender más y descubrir cómo construir en la cadena de bloques, cómo construir en Polygon, tenemos muchos recursos en academy.polygon technology. Hay enfoques gamificados para aprender y construir tus propias Dapps. También quiero mencionar rápidamente Polygon Village. Si decides aprender sobre Web3, aprender cómo desarrollar en él y comenzar a desarrollar tus propios proyectos, ofrecemos subvenciones sin restricciones. Subvenciones para desarrollar tus proyectos. Y si en algún momento quieres ingresar al ecosistema de Web3, también tenemos un tablero de empleo para el ecosistema. Esto no solo se aplica a trabajos en Polygon, sino a todas las personas en el ecosistema de Polygon. Para concluir, soy Rahat. Nuevamente, soy un defensor del desarrollador en Polygon. Estos son solo algunos lugares donde puedes encontrarme. Es genial que todos se sumerjan un poco en Web3 conmigo. Y estoy muy emocionado de verlos posiblemente en mi masterclass también. 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