Construcción de Aplicaciones Web3 con React y MetaMask

Clase 5 de 23 • Curso de Desarrollo Frontend de Aplicaciones Descentralizadas con Web3.Js

Resumen

¿Cómo comenzar con el desarrollo de una aplicación descentralizada usando React.js?

Iniciar el desarrollo de una aplicación descentralizada puede parecer un desafío, pero con las herramientas adecuadas se torna un proceso fluido y gratificante. Este artículo explora cómo utilizar React.js para crear una interfaz interactiva y robusta, maximizando sus características en aplicaciones descentralizadas.

¿Por qué elegir React.js para aplicaciones descentralizadas?

React.js no solo es conocido por su eficacia en el desarrollo de interfaces de usuario, sino que también es un favorito dentro del desarrollo de dApps (aplicaciones descentralizadas). ¿Por qué es tan popular? Aquí algunas razones:

Amplia comunidad de soporte: React.js cuenta con una vasta comunidad, lo que facilita encontrar recursos, soluciones a problemas comunes y actualizaciones constantes.
Facilidad de integración: Gracias a su naturaleza modular, React.js permite integrar fácilmente librerías y herramientas adicionales, como MetaMask y Chakra UI, esenciales para el desarrollo de dApps.
Compatibilidad con frameworks modernos: Aunque puedes usar otros frameworks para desarrollar con Web3, React.js sigue siendo una base sólida y extendida.

¿Qué es MetaMask y cómo facilita el desarrollo de dApps?

MetaMask es más que una simple extensión del navegador; es un componente vital en el ecosistema de desarrollo de dApps. Aquí es donde se destaca su versatilidad:

Intercepción de métodos JSON-RPC: MetaMask interfiere métodos como JSONRPC, permitiendo que las solicitudes sean verificadas y confirmadas por el usuario, mejorando así la seguridad y la experiencia de usuario.
Facilidad de uso: Simplemente conectando MetaMask a tu aplicación, puedes manejar transacciones y cuentas sin complicaciones extras. Solo necesitas comenzar a enviar métodos desde Web3.

¿Cómo se configura un proyecto base con Create React App?

Para empezar desde cero, Create React App se presenta como la solución más sencilla para arrancar proyectos en React.js. Aquí está el proceso paso a paso:

Instalación: Asegúrate de tener Create React App instalado. La documentación proporciona detalles sobre cómo hacerlo en la sección de recursos.
Inicialización del Proyecto: Desde la terminal, crea un nuevo proyecto de React.js utilizando el comando:
```
npx create-react-app platziponks-interface
```
Configuración de Rutas: Utiliza React Router para manejar la navegación dentro de tu aplicación. Más adelante, cuando trabajes en IPFs, sustituye BrowserRouter por HashRouter.
Preparación de Archivos: Para simplificar, deja solo los archivos esenciales: App.js e Index.js.

import { HashRouter, Route } from 'react-router-dom';
import Home from './views/Home';

<HashRouter>
  <Route exact path="/" component={Home} />
</HashRouter>

¿Cómo integrar librerías para diseño y Web3?

El diseño y la usabilidad son esenciales en cualquier aplicación. Aquí es donde Chakra UI y Web3 entran en juego:

Chakra UI para diseño: Proporciona componentes reutilizables que aceleran el desarrollo, permitiendo personalizaciones y un diseño atractivo.
Web3 React: Aunque no es un requerimiento de base para la librería, usar Web3 junto con una dependencia como ethers.js facilita la conexión y manejo de transacciones en Blockchain.

yarn add web3-react-core @chakra-ui/react @emotion/react @emotion/styled framer-motion

¿Cómo personalizar y finalizar la configuración inicial?

Finalmente, unas recomendaciones para personalizar y depurar:

Personalización básica: Cambia el título e ícono predeterminado de React.js para darle tu toque personal a la aplicación. Estos recursos suelen encontrarse en la documentación.
Revisión de documentación y recursos: Familiarízate con la documentación de cada librería para entender sus capacidades y limitaciones.

En tu viaje para desarrollar una aplicación de Platzipong, estas herramientas y ajustes te pondrán en el camino correcto para crear una experiencia robusta y atractiva. Cada paso que tomes no solo mejorará tus habilidades como desarrollador, sino también te permitirá ofrecer soluciones innovadoras dentro del mundo de las aplicaciones descentralizadas. ¡Avanza con confianza hacia tu proyecto exitoso!

Matías Monsalve

student•

así quedaría el archivo app.js con la actualización de react-router-dom

import { Route, Routes } from “react-router-dom”;
import Home from “./views/home”;

function App() {
return (

  <Routes>
  <Route path="/" exact element={<Home/>} />
  </Routes>
);
}

export default App;

José Manuel Piña Rodríguez

student•

Brutal Matias

Johan Muñoz

student•

Justamente tuve ese pequeño problema estos días y lo pude solucionar, gracias por mostrarlo 😊

Jesus M Cocaño Diaz

student•

Para los que esten usando las versiones mas nuevas quedaria asi:

import { Route, Routes } from 'react-router-dom';
import Home from './views/home/index.js';

function App() {
  return (
    <>
    <Routes>
      <Route path="/" element={<Home />}/>
    </Routes>
    </>
  );
}

export default App;

Ya que en la V6 de React Router se remplaza "component" por "element" y se le da eqtiquetas, dejo documentación: https://github.com/remix-run/react-router/blob/main/docs/upgrading/v5.md#advantages-of-route-element

Alfredo Aguiar Arce

student•

Nos ha salvado estamos agradecidos.

Jose Luis Resendiz Gutierrez

student•

Gracias!

Gabriel Giana

student•

++Instalación del proyecto =>++

-Creamos un nuevo directorio para la interface/frontend de nuestra DApp con react. Si es la primera vez que usas React, el comando es este:

npx create-react-app platzi-punks-interface

Ingresamos a la carpeta creada:

cd platzi-punks-interface

Dentro de la carpeta del proyecto instalamos React Router:

yarn add react-router-dom

Tambien instalamos web3-react/core con su dependencia par web3-react:

yarn add @web3-react/core web3-react

Ahora añadimos web3 solo, (este paso es por separado porque se puede utilizar otro recurso en su lugar si se quisiera):

yarn add web3

Luego, la librería de diseño chakra:

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

(Cuando instalamos esta librería es importante remover los tag de versión porque pueden arrojar errores de compatibilidad)

Y listas las librerías 🎉

Gabriel Giana

student•

Solución al problema de compilación Acaba de cambiar la version de react-router-dom de la version 5 a la 6. Para solucionar el error, hay que modificar como se llama a react-router-dom. Acá les dejo el link para resolverlo 💪: https://platzi.com/comentario/3078413/

Rolando Arguello

student•

Eres grande @gabriel! ya me funcionó

Anibal Español

student•

Los siguientes pasos me sirvieron para configurar el proyecto, gracias a otros aportes encontrados aqui: Usar create-react-app con npx

npx create-react-app platzi-punks-interface

Abrir el editor en la carpeta del proyecto

cd platzi-punks-interface
code .

Instalar la ultima versión (v6) de react-router-dom

yarn add react-router-dom

Instalar web3-react

yarn add @web3-react/core web3-react

Instalar chakra tal cual como indica la documentación

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

Código del archivo App.js acorde con la versión 6 de react-router-dom

import { Routes, Route } from "react-router-dom";
import Home from "./views/home";

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={ <Home /> } />
      </Routes>
    </>
  );
}

Luis Berenguer

student•

A mi no me funciona instalar npm install web3-react

Oscar Daniel Elias Sanchez

student•

@Luis Berenguer que tal si intentas con yarn?

Sergio Morgan

student•

Para quienes estan usando react ^18.2 y chakra ^2.3 (en mi caso, a partir de Sep 2022) se deben hacer algunos cambios a los archivos mostrados en clase para que funcione. Les dejo los que me funcionaron hasta el momento.

++index.js++

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { HashRouter } from "react-router-dom";
import { ChakraProvider } from "@chakra-ui/react";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <HashRouter>
      <ChakraProvider>
        <App />
      </ChakraProvider>
    </HashRouter>
  </React.StrictMode>,
);

++App.js++

import React from 'react'
import { Route, Routes } from 'react-router-dom'
import Home from './views/home'

function App() {
  return (
    <>
    <Routes>
      <Route path="/" exact element={<Home />} />
    </Routes>
    </>
  )
}

export default App

++views\home\index.js++


const Home = () => {
  return (
    <>
      <p>Hello world</p>
    </>
  )
}

export default Home

Johan Muñoz

student•

Si les sale este error al importar ChakraProvider:

./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjsCan't import the named export 'Children' from non EcmaScript module (only default export is available) chakra-ui

Cuando hagan la instalacion por consola de chakra-ui, dejen las especificaciones de version tal cual aparecen en la documentacion de la pagina de chakra-ui.

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

Puede ser que las nuevas versiones de framer-motion traigan consigo algunos errores o distintas implementaciones, y para eso le hacemos un Downgrade a las versiones.

lautaro Solé

student•

gracias!

Matías Monsalve

student•

Failed to compile.

./node_modules/react-intl/dist/components/message.mjs Can't import the named export 'Component' from non EcmaScript module (only default export is available)

help me

Gabriel Giana

student•

El error es porque acaba de cambiar la version de react-router-dom de la version 5 a la 6. Para solucionar el error, hay que modificar como se llama a react-router-dom.

++Así es como hacen el llamado en la clase (en el archivo App.js):++


import { Route } from "react-router-dom";
import Home from "./views/home";

function App() {
  return (
    <>
      <Route path="/" exact component={Home} />
    </>
  );
}

export default App;

Tenes que corregirlo de esta forma para que lo tome la nueva versión:

import { Routes, Route } from "react-router-dom";
import Home from "./views/home";

function App() {
  return (
    <>
    <Routes>
      <Route path="/" element={<Home />} />
      </Routes>
    </>
  );
}

export default App;

Que cambio?

En la version 6, los Route components necesitan renderizarse dentro de un componente de rutas. Creo que una forma facil de decirlo es que "route" es si o si children de "routes". Esto es un upgrade del componente switch de la v5.

Entonces, en el import solicitamos Routes y Route, al llamar a "Route" debemos ponerlo en el contexto de "Routes" y, en vez de "exact component" debe citarse como "element". Otro detalle, donde llamamos a "Home" cambia de {Home} a {<Home/>} . Listo, problema solucionado! Ya pueden ver el Hello World sin problemas 🎉

Gabriel Giana

student•

Vuelvo a subir el codigo con la actualización porque se fueron los espacios en las citas 🤔

import { Routes, Route } from "react-router-dom";
import Home from "./views/home";

function App() {
  return (
    <>
    <Routes>

      <Route path="/" element={<Home />} />
      </Routes>
    </>
  );
}

export default App;```

Rodrigo Ramos Xochiteotzin

student•

Para quienes están viendo esto en sept 2022 o más, probablemente les dará error npm a la hora de instalar las dependencias si instalan las últimas. web3-react depende de versiones de ethers ^4 y si tienen 5, como baja por defecto, les tira error. También probablemente si están trabajando con React ^18 les tirará error y tendrán que bajarlo a 16 (igual react-dom)

Rodrigo Ramos Xochiteotzin

student•

El problema será cuando quieran instalar Chakra porque depende de react ^18.... lo que hice fue que una vez que instalé con las dependencias bajadas para poder instalar web3-react, en el package-json las actualicé a sus versiones, en consola hice "npm i" y luego instalé chakra

Nilson Diaz

student•

Les comparto la documentacion de la nueva version de react-router v6. En el curso aun se utiliza la v5, por si le quieren hechar un vistazo --> Documentacion

Matías Monsalve

student•

para el problema de:

"Failed to compile. Module not found: Can't resolve 'react-router-dom' " mi solución fue: -npm install -S react-router-dom o -yarn add react-router-dom

Andrés Muñoz

student•

Recomiendan usar chakra UI me encanto pero es la primera vez que lo uso/escucho, hay algo mejor ?

Kevin Fiorentino

student•

Descubrí a lo largo de este curso los Hash Routes y su diferencia con las rutas ordinarias. Realmente todas las apps Web3 utilizan este tipo de rutas que no tenía conocimiento de su existencia.

Saul Burgos

student•

Si les da este error:

https://stackoverflow.com/questions/71668256/deprecation-notice-reactdom-render-is-no-longer-supported-in-react-18

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { HashRouter } from "react-router-dom";
import { ChakraProvider } from "@chakra-ui/react";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <HashRouter>
      <ChakraProvider>
        <App />
      </ChakraProvider>
    </HashRouter>
  </React.StrictMode>
);

Axel Nicolas Montenegro

student•

hola yo tengo el siguiente error al ejecutar npx create-react-app platzi-punks-interface me dice Error: Cannot find module 'cra-template/package.json'

W Society

student•

Por qué todo compila bien, pero miro la página en blanco?.. Incluso agregando más etiquetas con contenido.

Sergio Morgan

student•

Hola. Fiajte si tienes errores en la consola. Asimismo si estas usando versiones recientes de React hay algunos cambios que debes hacer con respecto a la version que usan en clase. Me paso lo mismo, dejé los archivos en la seccion de aportes por si sirve de ayuda.

W Society

student•

Gracias! Lo haré.

Jesus Marquez Martini

student•

a mi me aparece estos errores en la consola, alguno sabra como solucionarlo

react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

Uncaught TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function
    at Module../src/index.js (index.js:7:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at startup:7:1
    at startup:7:1

Gabriel Godoy

student•

Buenas, aacabo de crear el proyecto y me arroja este error: react.development.js:1476 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. Ademas de las posibles soluciones que aporta la consola, puede ser otro el error? Porque el proyecto es nuevo y no realice nada de manera diferente.

Diego Parra

student•

Web3-react no está oficialmente deprecated, pero ha recibido menos atención en comparación con otras bibliotecas que han surgido recientemente. A pesar de esto, sigue siendo funcional y puedes usarla para administrar la conexión a MetaMask y otros proveedores de Web3 en tus aplicaciones React. Sin embargo, es recomendable explorar alternativas más actualizadas si buscas características avanzadas o un mejor soporte de la comunidad.

Giuseppe Gattulli

student•

este es el error que no consigo solucionar:

Failed to compile.

Error in ./~/@chakra-ui/react/dist/index.js Module parse failed: /home/usuario/Escritorio/dapp/platzi-punks-interface/node_modules/@chakra-ui/react/dist/index.js Unexpected token (88:4) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (88:4) @ ./src/index.js 19:14-41

Luis Fernando Ushiña

student•

🐺 Por si lo necesitan pueden usar el siguiente template: 👉 https://github.com/guffenix/web3-ui-dapps-template

Construcción de Aplicaciones Web3 con React y MetaMask

Introducción al desarrollo con Web3.js

Desarrollo Frontend de Apps Descentralizadas con Web3 y React JS

Desarrollo Frontend para Aplicaciones Descentralizadas con Web3JS y MetaMask

Qué es Web3.js

Comunicación Frontend-Backend en Aplicaciones Blockchain

Uso de Web3 para Interactuar con la Blockchain Ethereum