Construyendo Dapps con React

Rate this content
Bookmark

Las aplicaciones descentralizadas (dApps) continúan ganando impulso en la industria. Estos desarrolladores también son algunos de los mejor pagados en todo el sector. Construir aplicaciones descentralizadas es un cambio de paradigma que requiere una forma diferente de pensar que las aplicaciones construidas con infraestructura, herramientas y servicios centralizados tradicionales, teniendo en cuenta cosas como la teoría de juegos, la infraestructura descentralizada sin servidor y la criptoeconomía. Como desarrollador de React, inicialmente tuve dificultades para entender este ecosistema completamente nuevo (para mí), cómo todo encaja y el modelo mental necesario para entender y ser un desarrollador full stack productivo en este espacio (y por qué lo consideraría en primer lugar). En esta charla, daré una visión general completa del espacio, cómo puedes comenzar a construir este tipo de aplicaciones y toda la pila tecnológica desglosada y luego reensamblada para mostrar cómo funciona todo.

30 min
22 Oct, 2021

Video Summary and Transcription

La charla discute la construcción de aplicaciones descentralizadas (DApps) con React y explora los beneficios de la tecnología de contratos inteligentes. Destaca las características y la infraestructura de las aplicaciones Web 3, incluyendo la indexación descentralizada, el almacenamiento de datos fuera de la cadena y el almacenamiento de archivos descentralizado. La charla también aborda la identidad en la Web 3, con un enfoque en la identidad soberana y el uso de la cadena de bloques para la verificación de identidad. Se explica el proceso de construcción de una DApp con React y Hard Hat, junto con la implementación de contratos y la interacción con ellos. En general, la charla proporciona información sobre el mundo de las DApps y las tecnologías involucradas.

Available in English

1. Introducción a la construcción de DApps con React

Short description:

Estoy muy emocionado de estar aquí y feliz de hablar sobre algo que me interesa mucho. Quiero compartir algunas de las ideas que he aprendido aquí contigo y mostrarte cómo empezar a trabajar con una pila que puede ser completamente nueva para ti si nunca has explorado el espacio de la cadena de bloques. Mi charla se llama Construyendo DApps con React. Vamos a construir una DApp. Una aplicación descentralizada es una aplicación que se ejecuta en la web descentralizada. Estas aplicaciones descentralizadas presentan casos de uso que nunca antes habíamos visto.

Gracias por esa increíble introducción. Estoy muy emocionado de estar aquí en persona en Londres. Hace unos años tuvimos un taller avanzado de React. Y, por supuesto, ha pasado un tiempo desde que tuvimos eventos en persona. Especialmente aquí. Pero realmente, tal vez en el último mes más o menos, hemos empezado a ver que vuelven. Así que estoy muy emocionado de estar aquí y feliz de hablar sobre algo que me interesa mucho.

Así que sí, espero que aprendas algo aquí. Mi nombre es Nader. Soy un ingeniero de relaciones con desarrolladores en Edge and Node. Edge and Node es una empresa que se encuentra en las categorías de blockchain, cripto y web tres. Y fue creada recién en febrero. Así que es una startup muy nueva. Pero durante los últimos seis meses más o menos desde que me uní, viniendo de un trasfondo más tradicional, he aprendido mucho. Y quiero compartir algunas de las ideas que he aprendido aquí contigo y espero hacerlas lo más concisas posible y mostrarte cómo empezar a trabajar con una pila que puede ser completamente nueva para ti si nunca has explorado el espacio de la cadena de bloques.

Así que mi charla se llama Construyendo DApps con React. Y vamos a construir una DApp. DApp es un acrónimo de aplicación descentralizada. Y una aplicación descentralizada es una aplicación que se ejecuta en la web descentralizada. Y cuando hablamos de muchos de estos términos de los que voy a hablar en un momento, probablemente has escuchado mucho alboroto recientemente sobre Web3, aplicaciones descentralizadas, descentralización, cripto y todas estas cosas. Bueno, como desarrollador, he estado especulando en cripto desde aproximadamente 2015, comprando y vendiendo tokens y cosas así. Pero nunca lo vi como algo más que una herramienta financiera o algo en lo que apostar, básicamente. Nunca entendí realmente que la gente estuviera construyendo software con ello. Así que he estado, diría, escribiendo código durante unos 10 años. ¿Cómo es posible que no haya investigado más sobre esto hasta hace unos meses? Realmente no lo sé. Pero una vez que empecé a sumergirme en algunas de estas plataformas y protocolos, me di cuenta de que la mayoría de estos equipos están tratando de construir nuevas formas para que nosotros construyamos aplicaciones que impulsen la web. Y los cambios que están tratando de hacer realidad o algunas de las cosas que están sucediendo son bastante diferentes a todo lo que hemos visto antes. A menudo escuchas a la gente agrupar estas ideas en algo que llaman web tres, cuando en realidad estamos construyendo aplicaciones descentralizadas. Pero las aplicaciones que estamos construyendo nuevamente son muy diferentes a las que hemos hecho en el pasado. Así que presentan casos de uso que realmente nunca antes habíamos visto en el pasado.

2. Understanding Web 3 and Decentralized Applications

Short description:

Web 3 es el conjunto de protocolos que permiten que las aplicaciones sean completamente descentralizadas, o permiten a los desarrolladores construir aplicaciones completamente descentralizadas. Es más bien un espectro al que estamos tratando de llegar. Así que profundicemos en esto y luego comenzaremos a escribir algo de código.

Entonces, creo que tiene sentido intentar categorizar este tipo de aplicaciones como algo diferente. Muchos de los objetivos que las personas persiguen son muy diferentes a algunas de las cosas que hemos visto en el pasado. Creo que una de las principales preocupaciones que tienen las personas se refiere a cosas como la recolección de datos y cómo funcionan las redes sociales hoy en día, y cómo la atención es una moneda que se utiliza en contra de los usuarios. Y tenemos cosas como, ya sabes, la vigilancia básicamente, como cuando interactuamos con aplicaciones, nos rastrean y todas esas cosas. Entonces, ¿cómo podemos construir aplicaciones que permitan a los desarrolladores recibir pago, que permitan a las empresas ganar dinero, pero que eliminen algunas de estas restricciones negativas? Web 3 está tratando de lograr eso, podrías pensar, podrías decir. Y realmente, si quieres simplificarlo a algo extremadamente básico, podrías decir que Web 3 es el conjunto de protocolos que permiten que las aplicaciones sean completamente descentralizadas, o permiten a los desarrolladores construir aplicaciones completamente descentralizadas. Ahora, cuando escuchas sobre aplicaciones descentralizadas, es como el objetivo final. No creo que todo pueda construirse de esta manera o deba construirse de esta manera. Es más bien un espectro al que estamos tratando de llegar. Así que profundicemos en esto y luego comenzaremos a escribir algo de código.

3. Benefits of Smart Contract Technology

Short description:

Internet ha prosperado debido a los protocolos comunes que podemos usar a nivel mundial. Sin embargo, faltaban funcionalidades nativas de pago y estado hasta la implementación de la tecnología de contratos inteligentes en blockchains. La construcción de infraestructuras centralizadas complejas fue la solución para superar estas limitaciones. Con la tecnología de contratos inteligentes, los desarrolladores pueden habilitar programáticamente la escasez digital y el intercambio de activos. Además, la construcción de bases de datos tradicionalmente requiere un esfuerzo significativo y tiene desventajas como puntos únicos de falla. Soluciones como Amplify y SuperBase proporcionan formas más sencillas de construir bases de datos.

Entonces, cuando piensas en Internet y en la forma en que construimos aplicaciones hoy en día, gran parte de la razón por la que Internet ha prosperado y se ha vuelto tan exitoso es que tenemos protocolos comunes que todos podemos usar en todo el mundo, y podemos esperar que funcionen. Conocemos FTP, conocemos SSH, hemos interactuado con todos estos diferentes protocolos, si subimos nuestra aplicación, podemos garantizar que nuestros usuarios puedan acceder a ella desde cualquier parte del mundo con HTTP, y no necesitamos ningún intermediario centralizado para que eso suceda. Simplemente funciona. Estos protocolos son ampliamente adoptados. No están sujetos a cambios y los desarrolladores los comprenden muy bien, y simplemente los damos por sentado en este momento.

Pero había un par de funcionalidades que faltaban, o a las que simplemente no teníamos acceso hasta la implementación y la evolución de la tecnología de contratos inteligentes en blockchains, y eso era el pago nativo y el estado nativo. Entonces, ¿qué hacemos para solucionar esto? Bueno, construimos infraestructuras centralizadas masivamente complejas para solucionar esto. Cuando piensas en los pagos, ¿cómo funcionan los pagos? Si una persona en Estados Unidos decide que quiere despertarse un día y enviar dinero a alguien en otra parte del mundo, ¿qué se necesita para hacer eso, para que eso suceda? Bueno, si esta persona no tiene una cuenta bancaria o una identificación, primero tiene que obtener documentos, ir a alguna autoridad, recibir una identificación. Luego, deben ir a un banco, deben tomar dinero de otro lugar, deben abrir una cuenta, deben proporcionar toda esta información a este banco, poner el dinero allí, y luego pueden o no obtener una cuenta bancaria, dependiendo de dónde vivan, porque todavía hay más de 70 países que no permiten que las mujeres de ciertas categorías o comunidades incluso abran una cuenta bancaria por ley. Pero digamos que viven en un lugar que les permite abrir una cuenta bancaria. Abren esa cuenta bancaria, luego van a su computadora, crean una dirección de correo electrónico, luego van a PayPal o Stripe o lo que sea, luego crean una cuenta, luego vinculan su cuenta. Tal vez intenten vincular su cuenta, pero son bloqueados por alguna razón. Entonces, todas estas cosas tienen que pasar para que esta persona lo haga, y luego la otra persona tiene que hacer lo mismo en el otro lado del mundo. Y luego, tal vez las dos cosas que decidieron usar no son compatibles porque PayPal no funciona en su país. Entonces, para solucionar esto, construimos cada vez más complejidad. Entonces tenemos más personas, más empresas tratando de resolver este problema. Bueno, con la tecnología de contratos inteligentes y blockchains, puedes habilitar programáticamente la escasez digital, lo que resulta en activos que las personas están dispuestas a intercambiar por otras cosas, también conocidos como tokens o moneda. Entonces, ahora tenemos la capacidad de construir esto como desarrolladores. Y podemos hacerlo en un par de líneas de código. Podemos enviar transacciones entre partes en solo un par de líneas de código. Por eso esto es revolucionario. Por eso están sucediendo cosas aquí. Ahora, ¿qué pasa con el pago? Quiero decir, ¿qué pasa con el estado? Bueno, en este momento, si queremos construir una base de datos, ¿cómo sucede esto? Bueno, típicamente, configuraremos una base de datos en nuestra sala de estar, nuestro garaje, o tal vez en AWS. Esto es genial porque permite que cualquiera construya una base de datos sin mucho trabajo. Pero también hay desventajas aquí. En primer lugar, esta base de datos es un único punto central de falla. Entonces, si algo le sucede a nuestra base de datos, nuestra aplicación se cae. Además, cuando piensas en cómo se acceden las aplicaciones desde todo el mundo, si quieres tener almacenamiento en caché o algo así configurado, típicamente tienes que tener redes de borde y todas estas cosas funcionando. Entonces, nuevamente, estoy pasando por alto todos los detalles de una implementación, pero si alguna vez has usado algo como AWS y has configurado una base de datos, sabes lo complejo que es construir todo esto desde cero. Por lo tanto, ahora tienes soluciones realmente excelentes, como Amplify, como SuperBase.

4. Characteristics of New Types of Applications

Short description:

La tecnología blockchain y los contratos inteligentes te permiten tener programáticamente un estado global distribuido que cualquiera puede leer, y eso es confiable. Entonces, ¿cuáles son los tipos de características que podrías esperar de estos nuevos tipos de aplicaciones?

Están abstrayendo mucho de esto, y Firebase. Ayer tuvimos una charla con SuperBase, y dijeron que mucha de la razón por la que la gente estaba usando Firebase es no porque realmente les gustara la implementación, sino porque es muy fácil de configurar. Porque es complejo configurar todas estas cosas. Básicamente, todos estos están tratando de llenar el vacío que no tenemos un estado nativo en Internet. La tecnología blockchain y los contratos inteligentes te permiten tener programáticamente un estado global distribuido que cualquiera puede leer, y eso es confiable. Podemos asumir que si está ahí, es realmente los datos correctos y cualquiera puede acceder a ellos desde cualquier parte del mundo, y cualquiera puede verificarlo. Entonces, dicho esto, ¿cuáles son los tipos de características que podrías esperar de estos nuevos tipos de aplicaciones? Ahora, no creo que las aplicaciones descentralizadas vayan a conquistar el mundo.

5. Building with Web3 and Decentralized Applications

Short description:

Ahora tenemos una nueva forma de construir cosas con web tres y aplicaciones descentralizadas. La descentralización es una característica clave que garantiza una infraestructura distribuida, confiable y sin confianza. Los back-ends abiertos y públicos permiten la colaboración y el intercambio de infraestructura. Esto ya está sucediendo, con aplicaciones que se construyen en intercambios descentralizados, DeFi y NFT. Las categorías de aplicaciones incluyen DeFi y monedas estables, protocolos de infraestructura web descentralizada y juegos para ganar dinero.

Creo que es más como si ahora tuviéramos una nueva forma de construir cosas nuevamente. Tenemos cosas que han evolucionado con el tiempo, dándonos cada vez más herramientas para lograr el trabajo que estamos tratando de realizar. Entonces, no estoy diciendo que debas usar web tres o aplicaciones descentralizadas para construir todo, pero ahora tienes un nuevo tipo de aplicación que puedes construir, y también podemos mejorar algunas de las antiguas, pero algunas de las formas antiguas de hacer las cosas están perfectamente bien y no deberíamos recurrir a estas herramientas.

Pero cuando piensas en una aplicación descentralizada, la descentralización está en la discusión porque a menudo tiene que ver con cada parte de lo que estamos haciendo. Estamos descentralizando la infraestructura web, pero también estamos descentralizando la propiedad. Estamos descentralizando los datos. Estamos haciendo todo más equitativo y más distribuido, y muchas de las cosas que surgen de eso son estas otras características. Entonces, una de ellas que es muy importante es esta idea de una infraestructura distribuida, sin confianza y robusta que simplemente no se cae. Entonces, si tienes un solo servidor ejecutándose en algún lugar y se cae, tu aplicación no se puede construir. Pero si tienes esta aplicación replicada en cientos o miles o decenas de miles de nodos, si un nodo o si el 25% de la red se cae, tu aplicación sigue funcionando. No hay un solo punto de falla. Es por eso que cuando piensas en nosotros como desarrolladores de software, esto es lo que destaca más para mí. Si puedo construir en un back-end que nunca se cae realmente, no tengo que preocuparme por muchas de las cosas por las que tengo que preocuparme hoy en día.

Otra cosa que me emociona como desarrollador es esta idea de back-ends abiertos y públicos. Básicamente, tienes código de código abierto hoy. ¿Qué pasaría si tuviéramos infraestructura de código abierto en la que cualquiera pudiera construir? Entonces construyo una aplicación, la despliego en la red. Cualquiera que pueda escribir código front-end ahora puede construir una interfaz encima de eso y todos podemos competir ahora y podemos compartir infraestructura y podemos usar esta infraestructura como bloques de construcción para hacer proyectos cada vez mejores. Y esto ya está sucediendo. Esto no es teórico. Ya estamos viendo que esto comienza a tomar forma. Se están construyendo docenas de aplicaciones en diferentes intercambios descentralizados, DeFi. Estamos empezando a ver, por supuesto, que los NFT han estado en las noticias y cosas así. Creo que es más bien la evolución de esta idea y creo que comenzaremos a ver mejores y más casos de uso del mundo real en el futuro y eso es algo que me emociona. Entonces, ¿cuáles son las categorías reales de aplicaciones? Bueno, DeFi y monedas estables son interesantes porque permiten a cualquier persona que pueda escribir código construir aplicaciones financieras. Protocolos de infraestructura web descentralizada. Trabajo en un protocolo llamado el protocolo Graph que permite a los desarrolladores construir APIs de GraphQL sobre datos de blockchain. Voy a cubrir eso en un momento, en un momento. Juegos para ganar dinero. Entonces, Axie Infinity es un juego Web3. Han realizado más de $750 millones en un solo mes en transacciones.

6. Building DApps and Web Infrastructure

Short description:

Han realizado más de $750 millones en transacciones. Organizaciones autónomas descentralizadas, arte digital, tokenización de activos físicos, propiedad de contenido transferible. Web3ificación de aplicaciones Web2. Mirror.xyz y Audius son ejemplos de plataformas que permiten a los usuarios monetizar su contenido. El enfoque se centra en la construcción de aplicaciones descentralizadas e infraestructura web. El protocolo Graph se utiliza para indexar y guardar datos en blockchains.

Han realizado más de $750 millones en un solo mes en transacciones. Es como Fortnite, excepto que el 100% del dinero va a la plataforma, el 95% del dinero se queda con los usuarios. Entonces, si invierto $1,000 en la plataforma, o $100, puedo esperar que cuando decida dejar de jugar ese juego, pueda recuperar parte de ese dinero. Y, de nuevo, eso tiene mucho más sentido para mí.

Organizaciones autónomas descentralizadas, arte digital, tokenización de activos físicos como bienes raíces, abriendo el mercado para que más personas participen, reduciendo la barrera de entrada para que las personas puedan invertir en mercados financieros de los que antes estaban excluidas. Y creo que esta idea de propiedad de contenido transferible, aplicando Web3ificación a Web2 es realmente interesante. Entonces, en este momento en YouTube, si subo un video, no tengo control sobre eso. Puedo perder mi contraseña o alguien puede hackear mi cuenta y todo puede desaparecer. Esto sucede muchas veces. Además, si quiero construir mi propio front-end sobre esto, tengo que usar sus APIs, y si las uso mal, puedo tener limitaciones, o incluso pueden no proporcionar la API que quiero. ¿Y si todos nuestros data estuvieran allí para que los usemos para siempre? No tenemos que pedirle a nadie. Y otras personas también pueden construir front-ends sobre esto, y cosas interesantes como esa. Entonces, creo que veremos, y ya hemos comenzado a ver la Web3ificación de aplicaciones Web2. Entonces, Mirror.xyz es una plataforma de blogs que permite a los usuarios hacer todo tipo de cosas financieras dentro de sus publicaciones de blog. Entonces, has visto a personas recaudar fondos, has visto a personas lanzar NFT dentro de sus publicaciones de blog. Recientemente, alguien hizo una publicación de blog donde querían crear una película. Recaudaron más de $3 millones directamente dentro de su publicación de blog. También dan tokens a los escritores. Entonces, si escribes, realmente ganas dinero. Eso es bastante interesante. Música, hay un programa llamado Audius, o una aplicación llamada Audius que es un Spotify descentralizado que permite no solo a los creadores de contenido ganar más dinero, sino también a ti como usuario, si creas una lista de reproducción que a la gente le gusta mucho, entonces realmente ganas dinero por eso. En lugar de que la plataforma, como Spotify, se quede con todo ese dinero, realmente participas y te pagan por ello, y eso me gusta. Entonces, dicho esto, queremos centrarnos en la construcción y en la infraestructura web. Echemos un vistazo a algunas de las piezas para construir una aplicación descentralizada. Entonces, el protocolo Graph es con lo que trabajo en Edge and Node. Cuando piensas en una database típica, está optimizada para indexar y consultar. Las blockchains no están optimizadas para consultas. Solo están optimizadas para indexar. Ni siquiera están realmente optimizadas para indexar. Solo están optimizadas para transacciones, para guardar data.

7. Infrastructure and Identity in Web 3

Short description:

Los datos de la cadena de bloques se guardan en bloques con un enfoque en alta velocidad de transacción, baja latencia y bajos costos. El Protocolo Graph permite la indexación descentralizada con incentivos para la precisión de los datos. Ceramic Network es una red descentralizada para datos fuera de la cadena. Livepeer es una exitosa plataforma de transmisión en vivo descentralizada. IPFS y RWEV proporcionan almacenamiento de archivos descentralizado. Radical es una versión descentralizada de Git. Las aplicaciones Web 3 desafían las nociones tradicionales de identidad.

Entonces, los datos de la cadena de bloques se guardan en estos bloques a lo largo de días, semanas, meses, años, lo que sea. Y realmente, el enfoque es tener la mayor cantidad de transacciones por segundo, la latencia más baja, y los costos de transacción más bajos. Sin embargo, para consultar estos datos, típicamente solo puedes leer piezas individuales de información en un momento determinado. Si quieres obtener todos estos datos y realizar consultas, como las relacionales, y todas estas otras cosas que típicamente necesitas para una aplicación eficiente, debes indexar esos datos en la base de datos, y luego construir tu propio punto de conexión de API, rompiendo así los principios importantes de seguridad de la descentralización en primer lugar.

El Protocolo Graph es una red descentralizada que permite a los desarrolladores construir API de GraphQL que realizan esta indexación, pero la replican en toda la red, y también proporcionan incentivos para que tus datos sean correctos. Por lo tanto, si proporcionas datos incorrectos, te penalizan en forma de una penalización monetaria, por lo que estás perdiendo dinero. Esa es una pieza de infraestructura.

Ceramic Network es interesante. Es una red descentralizada, pero es para datos fuera de la cadena. Por lo tanto, no quieres almacenar todo, probablemente, en una cadena de bloques. Es posible que desees tener información que esté, por supuesto, disponible para guardar y leer de forma gratuita. Entonces, si quieres guardar algo y no quieres que se escriba con un costo de transacción, puedes usar algo como Ceramic Network.

Tienes transmisión de video. Livepeer es una plataforma de transmisión en vivo descentralizada muy exitosa. Es entre 10 y 50 veces o más menos costoso que usar algo como AWS. La razón por la que es menos costoso es que utiliza las computadoras de las personas que ya están en funcionamiento, haciendo otras cosas para descargar el procesamiento de videos a una red descentralizada de personas que deciden participar, y las personas que ejecutan estos nodos reciben un pago por su procesamiento. Pero es más eficiente porque hay más participación y utiliza la capacidad de cálculo, diría yo, de manera más eficiente de lo que podrías ver en una red centralizada.

Para el almacenamiento de archivos, como videos, imágenes, y cosas así, tienes IPFS y RWEV. También hay algunos otros. RWEV me parece extremadamente interesante porque te permite almacenar un archivo para siempre. Entonces, si quieres almacenar una imagen y quieres leerla dentro de 10 años y no quieres pagar ningún tipo de tarifa de alojamiento o algo así, entonces RWEV es un gran lugar para hacerlo. Actualmente estoy experimentando escribiendo una plataforma de blogs que guarda el texto en RWEV y almacena el ancla del ID para recuperar ese texto en una cadena de bloques como Solana, creando así un blog a prueba de censura para siempre del que nunca tengo que pagar alojamiento. Simplemente vive para siempre.

En cuanto a Git, Git en sí es descentralizado, pero GitHub no lo es. Entonces, Radical es un intento de construir una versión descentralizada de Git. Y de hecho, ya está ahí y funciona. Definitivamente deberías echarle un vistazo.

Entonces, creo que una de las diferencias más interesantes entre las aplicaciones web 2 y las aplicaciones web 3 es cómo pensamos en la identidad. La identidad para nosotros es en realidad nuestro, ya sabes, nombre, dirección de correo electrónico y número de teléfono y todas estas cosas que realmente no deberíamos estar entregando a todas estas personas. Las entregamos cientos y miles de veces a lo largo de nuestras vidas.

8. Identity and Blockchain for Web-3

Short description:

Cuando trabajas con web-3, te identificas mediante una dirección y billeteras. Las billeteras te permiten crear una billetera utilizando una frase de recuperación, derivar claves privadas y públicas, y luego derivar tu dirección. Esto te permite transferir tu billetera a cualquier parte del mundo y firmar transacciones utilizando cifrado de clave pública. Iniciar sesión con Ethereum e IDX ofrece identidad soberana, lo que te permite controlar y atestar información en tu dirección. Para construir una aplicación, necesitas una cadena de bloques, y la Máquina Virtual Ethereum es una opción popular que se puede aplicar a múltiples cadenas de bloques.

¿Por qué no hay una mejor manera de identificarnos que sea anónima para la mayoría de los casos de uso? Y a veces todavía queremos darle a las personas nuestra dirección, ¿verdad? Porque pueden querer enviarnos algo de comercio electrónico. Así que, vamos a tener más control sobre eso.

Bueno, cuando trabajas con web-3, típicamente te identificarás mediante algo llamado dirección. Y tu identidad típicamente se deriva de esa dirección de varias formas diferentes. Y la forma en que haces eso es a través de, en este momento, algo llamado billeteras. Las billeteras tienen algunas cosas diferentes que puedes hacer con ellas, pero básicamente puedes crear una billetera ya sea obteniendo una frase de recuperación de uno de los proveedores de billeteras, ya sea directamente a través de la billetera o haciéndolo tú mismo utilizando un marco como web3.js o ethers.js.

Pero la idea con la billetera es esta. Se te proporciona una frase de recuperación. Luego puedes derivar matemáticamente una clave privada a partir de esa frase de recuperación. Luego puedes derivar matemáticamente una clave pública a partir de la clave privada. Y luego puedes derivar matemáticamente tu dirección a partir de esa clave pública, lo que significa que puedes transferir tu billetera a cualquier parte del mundo. Todo lo que necesitas es esa frase de recuperación. Así que cada vez que quieras iniciar sesión en cualquier parte del mundo, realmente no tienes que transferir información de inicio de sesión. Si tienes esa frase de recuperación, puedes ingresar y obtener tu información. Y, por lo tanto, puedes firmar transacciones e interpretar esas transacciones utilizando cifrado de clave pública. Y te permite hacer cosas realmente interesantes y con mucha menos complejidad, diría yo, para construir mecanismos de autenticación.

Y una de las cosas que me entusiasma mucho es esta idea de iniciar sesión con Ethereum que aprovecha esto. IDX es un protocolo de identidad. Entonces, digamos que quieres atestar alguna información en tu dirección sobre ti mismo. Puedes hacerlo de manera descentralizada y controlar toda esa información. Es como esta idea de identidad soberana. Puedes decidir qué poner allí y la aplicación típicamente no te pide esa información. Pedirá el puntero, y buscará en ese lugar, y luego decidirá, está bien, necesito esta información basada en lo que has almacenado allí. Y luego puedes volver y cambiar eso como quieras.

Y lo último que probablemente necesitarías para construir una aplicación es, por supuesto, la blockchain. Hay algunas en las que estoy interesado en este momento. Creo que la que la mayoría de las personas comienzan es la Máquina Virtual Ethereum, y la Máquina Virtual Ethereum es la implementación de Ethereum, pero también se puede aplicar a varias otras cadenas de bloques. Es como el React del desarrollo de cadenas de bloques. Si aprendes EVM, puedes escribir para Polygon, Optimism, Arbitrum, Ethereum, por supuesto, pero también Cello, Avalanche. Hay como una docena o más de cadenas de bloques populares de contratos inteligentes en las que puedes construir una vez que aprendas EVM.

9. Building a DApp with React and Hard Hat

Short description:

Entonces, Web3 podría considerarse como la infraestructura típica a la que estamos acostumbrados, pero descentralizada, y ahora tenemos contratos inteligentes. Así que construyamos una dapp. Queremos tener nuestro marco de cliente, nuestros entornos de desarrollo de Ethereum, nuestra biblioteca de cliente de Ethereum y nuestra billetera. Uno de los proyectos más queridos en el ecosistema EVM es Hard Hat. Para esta demostración, vamos a usar React.js, Hard Hat, Ethers y MetaMask. Vamos a desarrollar una aplicación llamada ReactDApp.

Entonces, Web3 podría considerarse como la infraestructura típica a la que estamos acostumbrados, pero descentralizada, y ahora tenemos contratos inteligentes, por lo que todavía necesitamos todas estas cosas como identidad de cómputo, almacenamiento de datos, alojamiento web, pero ahora tenemos herramientas adicionales a nuestra disposición que nos permiten hacer más cosas.

Así que construyamos una dapp. Cuando comenzamos con la aplicación más básica que podríamos querer construir, solo debemos pensar en estas cosas principales. Queremos tener nuestro marco de cliente, que podría ser algo como React, queremos tener nuestros entornos de desarrollo de Ethereum, y hay un entorno de desarrollo realmente excelente que vamos a ver en un momento que hace todo lo que necesitas. También necesitamos nuestra biblioteca de cliente de Ethereum y nuestra billetera. La billetera es la identidad, la biblioteca de cliente de Ethereum podría considerarse como algo como Axios o Fetch o GraphQL Apollo. Esto envía solicitudes de API a través de nuestros puntos finales de PC a la red con la que estamos interactuando.

Creo que uno de los proyectos más queridos en el ecosistema EVM es Hard Hat. Hard Hat es realmente, realmente, realmente genial para comenzar rápidamente. Puedes configurar una red de blockchain completa localmente en solo unos segundos, y vamos a hacer eso. Para la pila que voy a usar hoy, vamos a usar React.js, Hard Hat, Ethers y MetaMask. En realidad, me gusta Next.js para la mayoría de mis aplicaciones, pero creo que para esta demostración es más simple resolverlo solo con React. Entonces, lo que vamos a hacer es desarrollar una aplicación. ¿Todos pueden ver eso bastante bien? Bien, genial. De acuerdo, tengo una aplicación llamada ReactDApp. Voy a abrir esto. Lo siento, ¿esta será una demostración larga o corta? ¿Cuánto tiempo más tenemos? ¿Cinco minutos? En realidad, ya te has pasado un poco de tiempo. ¿En serio? ¿Sí, es un espacio de 20 minutos, amigo? ¿Oh, es un espacio de 20 minutos? Sí, sí, sí. Puedo hacer esto en unos cinco minutos. ¿Crees que está bien? Um, creo que está bien. Solo recortaremos un poco el tiempo de preguntas y respuestas. De acuerdo, podemos recortar las preguntas y respuestas, está bien. Solo estaré afuera respondiendo preguntas. De acuerdo, lo siento por eso. Sí, no me di cuenta. Pensé que era un espacio de 30 minutos. Entonces, tenemos aquí una aplicación React. Veamos aquí. De acuerdo.

10. Setting up Hard Hat and Deploying the Contract

Short description:

Estamos en una aplicación React y hemos agregado Hard Hat como nuestro entorno Ethereum. Después de configurar el proyecto, incluyendo la carpeta de contratos y la configuración de Hard Hat, compilamos nuestro contrato inteligente en ABIs. Luego creamos un nodo Ethereum con 20 cuentas, cada una con 10,000 ETH. Al importar la clave privada y desplegar el contrato en localhost, podemos interactuar con él. Nuestra aplicación está desplegada y podemos iniciarla ejecutando npm start. En app.js, importamos los componentes necesarios y establecemos la dirección del contrato para la interacción básica.

Ups, eso no es. De acuerdo, lo siento. En realidad, tenía, de acuerdo, aquí vamos. Entonces, de todos modos, estamos en una aplicación React. Acabo de ejecutar npx create React app. Tenemos nuestra estructura básica allí. Lo que quiero hacer es agregar Hard Hat, que es nuestro entorno Ethereum. Así que puedo ejecutar npx Hard Hat. Esto nos guiará a través de la configuración de Hard Hat. Así que voy a decir que quiero un proyecto de ejemplo básico, la raíz del proyecto y un archivo git ignore. Vamos a hacer eso. Y esto creará una carpeta de contratos con nuestros contratos inteligentes, una configuración de Hard Hat, que tiene la configuración de nuestro proyecto aquí. Y quiero establecer nuestra ruta, para compilar nuestro contrato inteligente en algo llamado ABIs. Podrías pensar en las ABIs como algo similar a una consulta GraphQL. Envía la información a través de la red para que podamos interactuar con nuestro punto final. Ahora que tenemos eso, podemos crear nuestro nodo Ethereum. Así que voy a ejecutar npx Hard Hat node. Esto ejecutará un nodo Ethereum, y nos dará 20 cuentas, cada una con 10,000 ETH. Así que voy a copiar esta clave privada, y vamos a ir a Chrome, y esta clave privada es como la clave privada que mencioné que puede ser tu identidad. Puedes obtenerla a partir de una frase de recuperación o puedes obtenerla de tu entorno local, supongo, cuando lo inicia. Entonces, lo que voy a hacer es importar la cuenta, pegar la clave privada, y ahora vemos que tenemos 10,000 ETH. Ahora quiero desplegar este contrato en localhost, y si voy aquí, deberíamos ver que esto está desplegado localmente. Muy bien, nuestra aplicación está desplegada. Ahora, vamos a ejecutar esto. Voy a decir npm start, y voy a copiar esta dirección, y casi hemos terminado. Solo voy a ir a app.js, y vamos a hacer nuestras importaciones. Establecemos nuestra dirección aquí, y vamos a interactuar con un contrato inteligente realmente básico actualizando, diría yo, un valor que te mostraré en un momento. Tenemos la dirección de nuestro contrato. Esto nos fue dado cuando desplegamos nuestros scripts. Así que solo con ejecutarlo, tenemos todo esto aquí.

11. Interacting with the Contract and Building the App

Short description:

A continuación, creamos el estado inicial e interactuamos con un contrato básico. Importamos la API ethers.providers y accedemos a la variable window.ethereum. Con la dirección de implementación del contrato, llamamos a funciones dentro del contrato. Construimos la interfaz de usuario y la probamos obteniendo y estableciendo el saludo. Ahora podemos interactuar con nuestra billetera, pagar la transacción y ver el valor actualizado. En solo unos minutos, hemos construido una aplicación básica que interactúa con un contrato inteligente.

A continuación, quiero seguir adelante y crear un estado inicial. El contrato con el que estamos interactuando es bastante básico. Tenemos un saludo y esto debería ser muy familiar si has trabajado con TypeScript antes. Tenemos una variable de estado llamada saludo, tenemos un constructor donde establecemos el saludo y tenemos una función que devuelve el saludo y una función que actualiza el estado estableciendo el saludo. Así que podemos devolver el saludo o establecer el saludo. Entonces, vamos a abrir app.js nuevamente. Vamos a crear una función para conectar nuestras billeteras. Vamos a tener una función para obtener el saludo. Y voy a explicar rápidamente una de estas porque casi se nos acaba el tiempo, nos estamos pasando de tiempo, y tengo una función para establecer el saludo. Para darte una idea rápida de cómo interactuar con el contrato, importamos la API ethers.providers, supongo que podríamos decir de ethers.js, y podemos acceder a esta variable llamada window.ethereum, porque si tienes una billetera instalada en tu navegador, inyecta esta variable global llamada window.ethereum a la que puedes acceder. Luego obtenemos una referencia a nuestra implementación de contrato inteligente utilizando la dirección de nuestra implementación de contrato, la API que se creó cuando compilamos nuestro contrato inteligente en el proveedor que acabamos de crear, y ahora podemos llamar a funciones dentro de nuestro contrato. Así que aquí estamos llamando a contract.dot, cualquier función que queramos llamar. Y finalmente podemos construir nuestra interfaz de usuario. Y, ups, solo voy a hacerlo aquí. Y podemos probar esto. Nuestra interfaz de usuario no es bonita, pero simplemente funciona. Algo básico. Lo que puedo hacer ahora es hacer clic en obtener saludo y deberíamos poder obtener el saludo de la cadena, hola hard hat, y si voy aquí, puedes ver que se hizo esta llamada al contrato, y luego puedo establecer el saludo en hola react avanzado. Y esto debería, sí, esto debería ser interesante porque ahora deberíamos poder interactuar con nuestra billetera. Podemos elegir la dirección con la que queremos interactuar. Ahora podemos pagar esta transacción porque estamos escribiendo algo en la cadena. Podemos confirmarlo. Y ahora, si actualizo, el valor debería ser el valor actualizado. Hemos construido una aplicación realmente básica que interactúa con un contrato inteligente, y lo hicimos en, ¿qué, tres o cuatro minutos, o dos minutos, tal vez un minuto? Eso es todo. Gracias por ver mi charla. Si quieres profundizar, Scaffold ETH es un gran lugar para consultar. Anchor para Solana. Guía de desarrollo de Ethereum de principio a fin. Yo lo escribí. Échale un vistazo. Y eso es todo. Gracias. Muchas gracias. Gracias.

Check out more articles and videos

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
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
Top Content
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
Top Content
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