Desarrollar frontend con React y Web3.js

Desarrollar Frontend con React y Web3.js

La adopción de aplicaciones descentralizadas (dApps) ha crecido exponencialmente en los últimos años. Para crear experiencias de usuario modernas y conectadas al ecosistema blockchain, React y Web3.js se han convertido en la combinación preferida por su flexibilidad y potencia. Este artículo detalla paso a paso cómo configurar, integrar y optimizar un frontend basado en React que interactúe con contratos inteligentes de Ethereum mediante Web3.js.

Índice de Contenidos

• 1. Prerrequisitos
• 2. Configuración del Entorno
• 3. Fundamentos de React
• 4. Introducción a Web3.js
• 5. Integración React Web3.js
• 6. Casos de Uso Frecuentes
• 7. Mejores Prácticas y Seguridad
• 8. Testing y Despliegue

1. Prerrequisitos

• Node.js (v14 recomendado) y npm o Yarn.
• Cuenta en MetaMask instalada y configurada.
• Conocimientos básicos de JavaScript y React.
• Editor de código (VSCode, WebStorm, etc.).

2. Configuración del Entorno

1. Crear el proyecto con Create React App:

   npx create-react-app mi-dapp --template typescript

2. Instalar Web3.js y dependencias:

   cd mi-dapp
   npm install web3

3. Opcional: instalar librerías de UI como Chakra UI o Material-UI para agilizar componentes estilizados.

3. Fundamentos de React

Para interactuar con Web3.js, es crucial entender conceptos como hooks, Context API y la gestión de estado global. A continuación, un resumen:

• React Hooks: useState, useEffect, useContext.
• Context API: para compartir la instancia de Web3 y la cuenta conectada.
• Composición de componentes: separar UI y lógica de blockchain.

4. Introducción a Web3.js

Web3.js es la librería oficial de JavaScript para interactuar con Ethereum. Permite:

• Conectarse a un nodo (Infura, Alchemy o local).
• Leer y escribir datos en contratos inteligentes.
• Obtener información de cuentas, bloques y eventos.

Documentación oficial: https://web3js.readthedocs.io/

4.1 Configuración de la instancia Web3

// src/utils/getWeb3.ts
import Web3 from web3

export async function getWeb3() {
  if (window.ethereum) {
    const web3 = new Web3(window.ethereum)
    await window.ethereum.request({ method: eth_requestAccounts })
    return web3
  }
  throw new Error(MetaMask no detectado)
}
  

5. Integración React Web3.js

5.1 Contexto Global de Web3

// src/context/Web3Context.tsx
import React, { createContext, useState, useEffect } from react
import { getWeb3 } from ../utils/getWeb3

export const Web3Context = createContext(null)

export const Web3Provider = ({ children }) => {
  const [web3, setWeb3] = useState(null)
  const [account, setAccount] = useState()

  useEffect(() => {
    (async () => {
      try {
        const instance = await getWeb3()
        setWeb3(instance)
        const accounts = await instance.eth.getAccounts()
        setAccount(accounts[0])
      } catch (error) {
        console.error(error)
      }
    })()
  }, [])

  return (
    
      {children}
    
  )
}
  

5.2 Uso del Context en un Componente

// src/components/Balance.tsx
import React, { useContext, useEffect, useState } from react
import { Web3Context } from ../context/Web3Context

const Balance = () => {
  const { web3, account } = useContext(Web3Context)
  const [balance, setBalance] = useState(0)

  useEffect(() => {
    if (web3  account) {
      (async () => {
        const bal = await web3.eth.getBalance(account)
        setBalance(web3.utils.fromWei(bal, ether))
      })()
    }
  }, [web3, account])

  return 
Balance ETH: {balance}
}

export default Balance
  

6. Casos de Uso Frecuentes

7. Mejores Prácticas y Seguridad

• Validación de inputs: evita inyecciones y errores de tipo.
• Gestión de errores: captura try/catch y muestra mensajes al usuario.
• Uso de librerías auditadas: como OpenZeppelin para contratos.
• Evitar exponer claves privadas: usar MetaMask o WalletConnect.
• Optimizar renders: memorizar componentes con React.memo y useCallback.

8. Testing y Despliegue

Para garantizar confiabilidad:

• Tests unitarios con Jest y React Testing Library.
• Simulación de blockchain en local con Ganache o Hardhat.
• Integración continua (CI/CD) para build y deploy en Vercel, Netlify o AWS.

Despliegue recomendado: generar una build con npm run build y publicarlo a través de pipelines automatizados.

Fuentes: React Docs (reactjs.org), Web3.js Docs, Metamask Docs (docs.metamask.io).