Ponga en marcha el desarrollo frontend de su dapp con create-eth-app

La última vez que analizamos el panorama general de Solidityopens in a new tab ya mencionamos create-eth-appopens in a new tab. Ahora descubrirá cómo usarla, qué características tiene integradas e ideas adicionales sobre cómo ampliarla. Iniciada por Paul Razvan Berg, el fundador de Sablieropens in a new tab, esta aplicación impulsará su desarrollo frontend y viene con varias integraciones opcionales para elegir.

Instalación

La instalación requiere Yarn 0.25 o superior (npm install yarn --global). Es tan simple como ejecutar:

yarn create eth-app my-eth-app
cd my-eth-app
yarn react-app:start

Utiliza create-react-appopens in a new tab de forma interna. Para ver su aplicación, abra http://localhost:3000/. Cuando esté listo para implementar en producción, cree un paquete minificado con yarn build. Una forma fácil de alojar esto sería Netlifyopens in a new tab. ¡Puede crear un repositorio de GitHub, añadirlo a Netlify, configurar el comando de compilación y listo! Su aplicación será alojada y podrá ser utilizada por todo el mundo. Y todo de forma gratuita.

Características

React y create-react-app

En primer lugar, el corazón de la aplicación: React y todas las características adicionales que vienen con create-react-app. Usar solo esto es una gran opción si no desea integrar Ethereum. Reactopens in a new tab en sí mismo hace que la creación de interfaces de usuario interactivas sea realmente fácil. Puede que no sea tan fácil para principiantes como Vueopens in a new tab, pero sigue siendo el más utilizado, tiene más características y, lo que es más importante, miles de librerías adicionales para elegir. El create-react-app también facilita mucho el comienzo e incluye:

• Compatibilidad con la sintaxis de React, JSX, ES6, TypeScript y Flow.
• Extras del lenguaje más allá de ES6, como el operador de propagación de objetos.
• CSS con prefijos automáticos, por lo que no necesita -webkit- u otros prefijos.
• Un ejecutor de pruebas unitarias rápido e interactivo con soporte integrado para informes de cobertura.
• Un servidor de desarrollo en vivo que advierte sobre errores comunes.
• Un script de compilación para empaquetar JS, CSS e imágenes para producción, con hashes y sourcemaps.

La create-eth-app en particular hace uso de los nuevos efectos de los hooksopens in a new tab. Un método para escribir componentes potentes, pero muy pequeños, llamados componentes funcionales. Consulte la sección de Apollo a continuación para ver cómo se utilizan en create-eth-app.

Espacios de trabajo de Yarn

Los espacios de trabajo de Yarnopens in a new tab le permiten tener varios paquetes, pero con la capacidad de administrarlos todos desde la carpeta raíz e instalar las dependencias para todos a la vez usando yarn install. Esto tiene especial sentido para paquetes adicionales más pequeños como la gestión de direcciones/ABI de contratos inteligentes (la información sobre dónde implementó qué contratos inteligentes y cómo comunicarse con ellos) o la integración de grafos, ambos parte de create-eth-app.

ethers.js

Aunque Web3opens in a new tab sigue siendo el más utilizado, ethers.jsopens in a new tab ha ganado mucha más tracción como alternativa en el último año y es el que está integrado en create-eth-app. Puede trabajar con este, cambiarlo a Web3 o considerar la posibilidad de actualizar a ethers.js v5opens in a new tab, que ya casi ha salido de la versión beta.

The Graph

GraphQLopens in a new tab es una forma alternativa de manejar datos en comparación con una API RESTfulopens in a new tab. Tienen varias ventajas sobre las API RESTful, especialmente para los datos descentralizados de la cadena de bloques. Si le interesa el razonamiento que hay detrás de esto, eche un vistazo a GraphQL Will Power the Decentralized Webopens in a new tab.

Normalmente, obtendría los datos de su contrato inteligente directamente. ¿Quiere leer la hora de la última operación? Solo tiene que llamar a MyContract.methods.latestTradeTime().call(), que obtiene los datos de un nodo de Ethereum y los envía a su dapp. Pero, ¿y si necesita cientos de puntos de datos diferentes? Eso daría lugar a cientos de recuperaciones de datos al nodo, cada una de las cuales requeriría un RTTopens in a new tab, lo que haría que su dapp fuera lenta e ineficiente. Una solución podría ser una función de llamada de obtención dentro de su contrato que devuelva varios datos a la vez. Sin embargo, esto no siempre es lo ideal.

Y puede que también le interesen los datos históricos. Usted querrá saber no solo la hora de la última operación, sino las horas de todas las operaciones que ha realizado. Utilice el paquete de subgrafos create-eth-app, lea la documentaciónopens in a new tab y adáptelo a sus propios contratos. Si está buscando contratos inteligentes populares, puede que ya exista un subgrafo. Eche un vistazo al explorador de subgrafosopens in a new tab.

Una vez que tenga un subgrafo, este le permite escribir una consulta simple en su dapp que recupera todos los datos importantes de la cadena de bloques, incluidos los históricos que necesita, con una sola recuperación.

Apollo

Gracias a la integración de Apollo Boostopens in a new tab, puede integrar fácilmente el grafo en su dapp de React. Especialmente cuando se utilizan los hooks de React y Apolloopens in a new tab, obtener datos es tan simple como escribir una única consulta de GraphQL en su componente:

1const { loading, error, data } = useQuery(myGraphQlQuery)
2
3React.useEffect(() => {
4  if (!loading && !error && data) {
5    console.log({ data })
6  }
7}, [loading, error, data])
Copiar

Plantillas

Además, puede elegir entre varias plantillas diferentes. Hasta ahora puede utilizar una integración de Aave, Compound, UniSwap o sablier. Todas ellas añaden importantes direcciones de contratos inteligentes de servicios junto con integraciones de subgrafos pre-hechas. Solo tiene que añadir la plantilla al comando de creación como yarn create eth-app my-eth-app --with-template aave.

Aave

Aaveopens in a new tab es un mercado descentralizado de préstamos de dinero. Los depositantes proporcionan liquidez al mercado para obtener ingresos pasivos, mientras que los prestatarios pueden pedir préstamos utilizando garantías. Una característica única de Aave son los préstamos flashopens in a new tab que le permiten pedir dinero prestado sin ninguna garantía, siempre que devuelva el préstamo en una sola transacción. Esto puede ser útil, por ejemplo, para darle dinero extra en las operaciones de arbitraje.

Los tókenes intercambiados que le generan intereses se denominan aTokens.

Cuando elige integrar Aave con create-eth-app, obtendrá una integración de subgrafoopens in a new tab. Aave utiliza The Graph y ya le proporciona varios subgrafos listos para usar en Ropstenopens in a new tab y en la red principalopens in a new tab en formato sin procesaropens in a new tab o con formatoopens in a new tab.

Compound

Compoundopens in a new tab es similar a Aave. La integración ya incluye el nuevo Subgrafo v2 de Compoundopens in a new tab. Sorprendentemente, los tókenes que generan intereses aquí se llaman cTokens.

Uniswap

Uniswapopens in a new tab es un exchange descentralizado (DEX). Los proveedores de liquidez pueden ganar comisiones proporcionando los tókenes o el ether necesarios para ambos lados de una operación. Es muy utilizado y, por lo tanto, tiene una de las mayores liquidez para una gama muy amplia de tókenes. Puede integrarlo fácilmente en su dapp para, por ejemplo, permitir a los usuarios intercambiar su ETH por DAI.

Lamentablemente, en el momento de escribir este artículo, la integración es solo para Uniswap v1 y no para la versión v2 recién lanzadaopens in a new tab.

Sablier

Sablieropens in a new tab permite a los usuarios realizar pagos de dinero en streaming. En lugar de un único día de pago, usted recibe su dinero constantemente sin más administración después de la configuración inicial. La integración incluye su propio subgrafoopens in a new tab.

¿Y ahora qué?

Si tiene preguntas sobre create-eth-app, vaya al servidor de la comunidad de Sablieropens in a new tab, donde podrá ponerse en contacto con los autores de create-eth-app. Como primeros pasos, es posible que desee integrar un marco de interfaz de usuario como Material UIopens in a new tab, escribir consultas GraphQL para los datos que realmente necesita y configurar la implementación.

Última actualización de la página: 29 de septiembre de 2025

mopens in a new tab

copens in a new tab

bopens in a new tab

+2

Ver colaboradores