Integración con
React

Guía completa para integrar DXBNK en aplicaciones React. Aprende a usar nuestros hooks personalizados, componentes pre-construidos y SDK oficial.

6

Pasos detallados

1h

Tiempo total

100%

TypeScript

React 18+

Compatible

Pasos de Integración

Sigue estos 6 pasos para integrar DXBNK en tu aplicación React

Paso 1: Instalación del SDK

Instalar y configurar el SDK de DXBNK para React

5 min
Fácil

Descripción General

El primer paso para integrar DXBNK en tu aplicación React es instalar nuestro SDK oficial. El SDK incluye hooks personalizados, componentes pre-construidos y utilidades para facilitar la integración.

Instrucciones

  1. 1Abre tu terminal en el directorio de tu proyecto React
  2. 2Ejecuta el comando de instalación: npm install @dxbnk/react-sdk
  3. 3Instala las dependencias adicionales: npm install axios react-query
  4. 4Verifica la instalación revisando el package.json
  5. 5Importa el SDK en tu archivo principal

Consejos

  • Asegúrate de tener Node.js 16+ instalado
  • El SDK es compatible con React 17+ y 18+
  • Incluye TypeScript definitions automáticamente

Ejemplo de Código

# Instalar el SDK de DXBNK
npm install @dxbnk/react-sdk axios react-query

# O usando yarn
yarn add @dxbnk/react-sdk axios react-query

# O usando pnpm
pnpm add @dxbnk/react-sdk axios react-query

Paso 2: Configuración del Provider

Configurar el DXBNKProvider en tu aplicación

3 min
Fácil

Paso 3: Autenticación de Usuario

Implementar login y registro de usuarios

10 min
Intermedio

Paso 4: Gestión de Wallets

Crear y gestionar wallets de criptomonedas

15 min
Intermedio

Paso 5: Transacciones y Pagos

Implementar envío y recepción de transacciones

20 min
Avanzado

Paso 6: Componentes Avanzados

Usar componentes pre-construidos de DXBNK

15 min
Intermedio

Características del SDK

Todo lo que necesitas para construir aplicaciones DeFi con React

Hooks personalizados para todas las operaciones
Componentes pre-construidos y personalizables
Soporte completo para TypeScript
Manejo automático de estados de carga y errores
Integración con React Query para caché inteligente
WebSockets para actualizaciones en tiempo real
Validación de formularios integrada
Soporte para múltiples wallets y criptomonedas

Hooks Principales

Ejemplos rápidos de los hooks más utilizados

Hook useAuth

Maneja autenticación de usuarios

const { user, login, logout, isLoading } = useAuth();

Hook useWallets

Gestiona wallets del usuario

const { wallets, createWallet, deleteWallet } = useWallets();

Hook useTransactions

Maneja transacciones

const { transactions, sendTransaction } = useTransactions();

Hook useBalance

Obtiene balances en tiempo real

const { balance, refreshBalance } = useBalance(walletId);

¿Necesitas ayuda con la integración?

Consulta nuestra documentación completa o contacta con nuestro equipo de soporte para obtener ayuda personalizada.

Ver Documentación Completa