Versión en EspañolES

Construye aplicaciones Web3 con React

Please sign in to watch this workshop.

El masterclass está diseñado para ayudar a los desarrolladores Web2 a comenzar a construir para Web3 utilizando el Hyperverse. El Hyperverse es un mercado abierto de módulos inteligentes construidos por la comunidad, auditados y fáciles de descubrir. Nuestro objetivo es hacer que sea fácil para los desarrolladores de React construir aplicaciones Web3 sin escribir una sola línea de código de contrato inteligente. Piensa en 'npm para contratos inteligentes'.

Aprende más sobre el Hyperverse aquí.

Repasaremos todos los conceptos básicos de blockchain/crypto que necesitas saber para comenzar a construir en el Hyperverse, por lo que no necesitas tener ningún conocimiento previo sobre el espacio Web3. Solo necesitas tener experiencia en React.

This workshop has been presented at React Summit 2022, check out the latest edition of this React Conference.

FAQ

Hyperverse es una plataforma de contratos inteligentes comunitaria, abierta y auditada, diseñada para simplificar el desarrollo de aplicaciones Web3. Permite a los desarrolladores utilizar módulos inteligentes preconstruidos sin necesidad de escribir código de contrato inteligente, utilizando solamente JavaScript.

No, no es necesario aprender otro lenguaje de programación para usar Hyperverse. Los desarrolladores pueden acceder y utilizar contratos inteligentes utilizando solo JavaScript.

Para empezar a desarrollar con Hyperverse, puedes consultar la documentación en docs.hyperverse.dev, configurar tu entorno de desarrollo siguiendo las instrucciones y utilizar los ejemplos disponibles en el Monorepo de Hyperverse para crear aplicaciones.

Los módulos inteligentes en Hyperverse son contratos inteligentes de un solo propósito que cualquier desarrollador puede crear y que son validados por una comunidad de auditores para asegurar su confiabilidad y seguridad.

La principal diferencia es que en Web 3.0, las aplicaciones funcionan de manera descentralizada en una blockchain en lugar de servidores centralizados. Esto permite una mayor transparencia y seguridad, ya que los datos son inmutables y distribuidos.

Necesitas tener instalado Visual Studio Code o cualquier otro IDE compatible, Node.js y Yarn. Puedes empezar desde cero o usar el Monorepo de Hyperverse que incluye ejemplos y paquetes necesarios.

Los módulos inteligentes en Hyperverse son auditados por una comunidad de auditores que verifica y apuesta tokens como garantía de la seguridad y confiabilidad del código.

Sí, en Hyperverse puedes interactuar con contratos inteligentes usando simplemente JavaScript, sin necesidad de escribir código de contrato inteligente, gracias a los módulos inteligentes preconstruidos.

Shain Dholakiya

51 min

01 Jul, 2022

Comments

Available in other languages:

Watch more workshops on topic

Masterclass Web3 - Construyendo Tu Primer Dapp

React Advanced 2021

145 min

Masterclass Web3 - Construyendo Tu Primer Dapp

Top Content

Featured Workshop

Nader Dabit

En esta masterclass, aprenderás cómo construir tu primer dapp de pila completa en la blockchain de Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front end al contrato que has desplegado. Al final de la masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local e interactuar con cualquier contrato inteligente usando React, HardHat y Ethers.js.

react web development ethereum blockchain web3

Consulta de datos de blockchain con GraphQL

JSNation 2023

64 min

Consulta de datos de blockchain con GraphQL

Workshop

Simon Emanuel Schmid

¿Curioso acerca de cómo funcionan los datos en el mundo de la blockchain? Únete a Simon en una sesión interesante sobre The Graph, el protocolo de indexación descentralizado que facilita a los desarrolladores de blockchain buscar y consultar datos de blockchain.
Tabla de contenidos:- Comprendiendo los datos de blockchain- Anatomía de un contrato inteligente- Indexando datos de blockchain con The Graph- Accediendo a datos en The Graph- Subgrafos recomendados- Resumen de la escritura de subgrafos

graphql blockchain web3

Accesibilidad web en aplicaciones JavaScript

React Summit 2022

161 min

Accesibilidad web en aplicaciones JavaScript

Workshop

Sandrina Pereira

A menudo vemos que JavaScript daña la accesibilidad de un sitio web. En esta masterclass, aprenderás cómo evitar errores comunes y cómo utilizar JS a tu favor para mejorar la accesibilidad de tus aplicaciones web.
En esta masterclass exploraremos múltiples ejemplos del mundo real con problemas de accesibilidad, y aprenderás cómo hacer que funcionen para las personas que utilizan un mouse o un teclado. También aprenderás cómo se utilizan los lectores de pantalla, ¡y te mostraré que no hay razón para tener miedo de usar uno!
Únete a mí y déjame mostrarte cómo la accesibilidad no limita tus soluciones o habilidades. ¡Al contrario, las hace más inclusivas!
Al final, serás capaz de:- Comprender los principios de WCAG y cómo están organizados- Conocer casos comunes en los que JavaScript es esencial para la accesibilidad- Crear enlaces, botones y elementos conmutables inclusivos- Utilizar regiones en vivo para errores y estados de carga- Integrar la accesibilidad en el flujo de trabajo de tu equipo de inmediato- Darte cuenta de que crear sitios web accesibles no es tan difícil como parece ;)

web apps javascript accessibility

React a gran escala con Vodafone

React Summit 2022

130 min

React a gran escala con Vodafone

Workshop

React a gran escala con Vodafone

react web apps mobile apps case study

Encontrar, Hackear y solucionar las vulnerabilidades de NodeJS con Snyk

JSNation 2022

99 min

Encontrar, Hackear y solucionar las vulnerabilidades de NodeJS con Snyk

Workshop

Matthew Salmon

npm y seguridad, ¿cuánto sabes sobre tus dependencias?Hack-along, hacking en vivo de una aplicación Node vulnerable https://github.com/snyk-labs/nodejs-goof, Vulnerabilidades tanto de código abierto como de código escrito. Se anima a descargar la aplicación y hackear junto con nosotros.Corrigiendo los problemas y una introducción a Snyk con una demostración.Preguntas abiertas.

npm node.js javascript security case study

Cómo Convertir Criptomonedas con Microservicios GRPC en Node.js

JSNation 2023

117 min

Cómo Convertir Criptomonedas con Microservicios GRPC en Node.js

Workshop

2 authors

El masterclass presenta los principios de arquitectura clave, patrones de diseño y tecnologías utilizadas para construir microservicios en el stack de Node.js. Cubre la teoría del marco de trabajo GRPC y el mecanismo de protocol buffers, así como técnicas y especificaciones para construir servicios aislados utilizando el enfoque de monorepo con lerna y yarn workspaces, TypeScript. El masterclass incluye una tarea práctica en vivo para crear una aplicación de conversión de moneda que sigue los paradigmas de microservicios. Es adecuado para desarrolladores que deseen aprender y practicar el patrón de microservicios GRPC con la plataforma Node.js.
Requisitos previos:- Buen entendimiento de JavaScript o TypeScript- Experiencia con Node.js y escribir aplicaciones de backend- Preinstalar Node.js, npm- Preinstalar el Compilador de Protocol Buffer- Preferimos usar VSCode para una mejor experiencia con JavaScript y TypeScript (otros IDE también son aceptables)

node.js microservices web3 case study

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

Elevando Monorepos con los Espacios de Trabajo de npm

DevOps.js Conf 2022

33 min

Elevando Monorepos con los Espacios de Trabajo de npm

Top Content

Ruy Adorno

Open-source maintainer, Node.js contributor, npm cli team member at GitHub

NPM workspaces help manage multiple nested packages within a single top-level package, improving since the release of NPM CLI 7.0. You can easily add dependencies to workspaces and handle duplications. Running scripts and orchestration in a monorepo is made easier with NPM workspaces. The npm pkg command is useful for setting and retrieving keys and values from package.json files. NPM workspaces offer benefits compared to Lerna and future plans include better workspace linking and adding missing features.

npm monorepos devops

Juegos Web 3: Qué es y por qué es importante

JS GameDev Summit 2022

36 min

Juegos Web 3: Qué es y por qué es importante

Paul Gadi

CTO & Co-founder of OPGames

Web3 gaming enables decentralized identity and finance, allowing game developers to bypass centralized platforms. It is driven by wallets, ERC20 tokens, and NFTs. Web3 games focus on collaborative world-building, ownership, and open-source collaboration. The challenge is achieving decentralization while addressing economic and technological limitations. Web3 aims to redefine the gaming industry by using economic tools and exploring new genres like RPG and RTS games.

game development blockchain web3

Diseño Dirigido por Dominio con Aplicaciones Vue

Vue.js London 2023

14 min

Diseño Dirigido por Dominio con Aplicaciones Vue

Top Content

Abdulrasaq Mustapha

<br>

Welcome to this talk on domain-driven design in Vue.js application. Today we are going to look into domain-driven design, its benefits and how it works with Vue.js domain-driven design versus the MVVM model. Vue.js thrives in domain-driven design, a design approach that models software to match a domain. DDD emphasizes understanding business logic and creating a domain that reflects the language and concepts. Integrating DDD in Vue.js offers benefits such as effective modeling of complex business domains, structured code reflecting domain logic, and easier onboarding and ownership.

web apps vue design vue 3

Pruebas E2E para Aplicaciones Web3

TestJS Summit 2022

21 min

Pruebas E2E para Aplicaciones Web3

Top Content

Rafaela Azevedo

The Chain Academy

In this Talk, Rafaela discusses Web3, its decentralized and token-based model, and the architecture based on smart contracts. Testing Web3 poses challenges due to the need for third-party providers like MetaMask. Approaches such as mocking the Web3 flow and using end-to-end testing tools like Taskafar are suggested. The trade-offs in Web3 testing include test speed and dependency on third-party apps. Balancing unit, integration, and end-to-end tasks is crucial for a robust testing strategy.

e2e testing javascript e2e tests react web3 testing

Cómo compartir código entre una aplicación web de React y una aplicación móvil de React Native en Monorepo

React Summit 2022

7 min

Cómo compartir código entre una aplicación web de React y una aplicación móvil de React Native en Monorepo

Emily Xiong

nrwl.io

This presentation focuses on sharing code between React web and React native mobile apps. The speaker demonstrates how to achieve feature parity using a Monorepo with NX. They highlight the importance of sharing non-UI code, such as business logic and state management, through shared libraries. This approach allows the apps to focus on UI code while keeping non-UI code separate. For more details, refer to the speaker's blog post.

web apps mobile apps cross-platform developer challenges react native react mobile app

No Seriously: htmx es Pro-JavaScript!

JSNation US 2024

29 min

No Seriously: htmx es Pro-JavaScript!

Carson Gross

Creator of htmx

HTMX is a hypermedia-oriented front-end library that enhances HTML as a hypermedia. It generalizes the concept of hypermedia controls in HTML, allowing any element to become a hypermedia control. HTMX provides practical attributes like HX swap and HX indicator. The active search demo showcases the dynamic behavior achievable with HTMX. HTMX allows developers to build web applications without writing a ton of JavaScript. It works well for traditional web apps but may not be suitable for offline functionality or fast interactions. HTMX can be integrated with JSX and various backend stacks, and TypeScript can be used alongside HTMX.

web apps frameworks