LogoLogo
  • 🚀DeSo Vision
  • 🪙DeSo Tokenomics
    • No Equity, Just Coins and Code
    • Current DESO Supply
    • Initial DESO Distribution
    • DESO Sinks
    • The BMF: Burn-Maximizing Fee Mechanism
    • Designed for the End-Game
  • 🏛️DeSo Governance
  • ⭐DeSo Tutorial (Build Apps)
  • 🖥️Node Architecture Overview
    • Setup a Node & Frontend Locally
    • Making Your First Changes
  • 📅DeSo Roadmap
  • 🔍DeSo Block Explorer
  • 💸DeSo Wallet
  • 💬DeSo Chat Protocol
  • 👽Openfund
  • 👀Focus
  • 🛠️DeSo Tech Stack
  • 🌐DeSo Applications
  • DeSo Blockchain
    • 1️⃣Bare Metal
    • 2️⃣Scaling Roadmap
    • 3️⃣Content Moderation
    • 4️⃣Infinite-State
    • 5️⃣On-Chain Data
    • 6️⃣Smart Services
    • 7️⃣User Security
  • DeSo Features
    • 1️⃣Associations
    • 2️⃣Creator Coins
    • 3️⃣Feeds & Moderation
    • 4️⃣Social NFTs
    • 5️⃣Social Tipping
  • DeSo Identity
    • 1️⃣Identity: Overview
      • Core Concepts
      • Mobile Integration
    • 2️⃣Identity: iFrame API
      • Overview
      • Endpoints
    • 3️⃣Identity: Window API
      • Overview
      • Endpoints
  • DESO FRONTEND
    • 1️⃣Frontend: Get Started
    • 2️⃣Frontend: React Example
  • DESO BACKEND
    • 1️⃣Backend: Config
      • Onboarding
      • Phone Number Verification
      • Global State
      • Admins
      • Web Security
      • Media
        • Images
        • Videos
      • Hot Feed
      • Selling $DESO
        • Wyre - Buy with USD
        • Buy with BTC
        • Buy with ETH
      • Analytics
      • Emails
      • Supply Monitoring
    • 2️⃣Construct: API
      • Social Transactions API
      • NFT Transactions API
      • Financial Transactions API
      • Derived Keys Transaction API
      • DeSo Tokens Transactions API
      • Associations Transactions API
      • Access Groups API
    • 3️⃣Data: API
      • Admin Endpoints
      • Associations Endpoints
      • DeSo Tokens Endpoints
      • Media Endpoints
      • Miner Endpoints
      • Notification Endpoints
      • NFT Endpoints
      • Social Endpoints
      • Referral Endpoints
      • Tutorial Endpoints
      • Meta Data Endpoints
      • Transaction Spending Limits Endpoints
      • User Endpoints
      • Post Endpoints
      • Messages Endpoints
      • Access Group Endpoints
    • 4️⃣Transactions: API
  • DeSo Exchange Listings
    • 1️⃣Exchange Listing: API
  • DeSo Nodes
    • 2️⃣Node: Setup
    • 3️⃣Node: Staying Up-To-Date
    • 4️⃣Node: FAQ
  • DESO VALIDATORS
    • 1️⃣Run a Validator
  • Openfund
    • What is Openfund?
    • Openfund Tokenomics
    • Openfund Governance
    • Algorithmic Trading
      • The DeSo Python SDK
    • The DeSo Python SDK
      • Getting Help from the Community
      • Creating DeSo Testnet Accounts
      • Debugging Tips and Code Walkthrough
      • Write Blockchain Bots with AI
      • Market-Making Bots
      • Social AI Agents
      • AI-Generating Your Code
    • How Do the Advanced AMMs Work?
  • Focus
    • The Crypto Social Network
    • Next-Generation Token Mechanics
      • Launching Your Token
      • How the Order-Book AMMs Work
    • Crypto-Native Monetization
    • Focus Tokenomics
    • The Social Airdrop
    • Decentralizing Social Media
  • Contact And Media
    • ☀️DeSo Website
    • 📑DeSo Blog
    • 💻DeSo Github
    • 💎DeSo Diamond
    • 🐦DeSo Twitter
    • 📺DeSo YouTube
    • 📬Contact US
    • ⚠️Reporting an Account or Post
  • 中文
    • 什么是DeSo? (What is DeSo?)
    • 愿景 (The Vision)
Powered by GitBook
On this page
  • How to run these examples locally
  • How to use this repository
  • Examples

Was this helpful?

  1. DESO FRONTEND

Frontend: React Example

Use this React example to start building your first app on DeSo

PreviousFrontend: Get StartedNextBackend: Config

Last updated 10 months ago

Was this helpful?

This is a simple project, but these examples can be easily ported to your preferred framework or build tool.

Github:

How to run these examples locally

Run the following in your terminal

git clone https://github.com/deso-protocol/deso-examples-react.git
cd deso-examples-react
npm i
npm run start

How to use this repository

If you want to port these examples to your own app, set up a project using the docs for your preferred tool (Create React App, Vite, Nextjs, Remix, Angular, Vue, etc).

If you're not sure, Create React App is a reasonable choice for getting a development environment up and running for quick prototyping/experimenting.

Next, install the using your preferred package manager:

# npm
npm i deso-protocol

# yarn
yarn add deso-protocol

Finally, use the examples found in this repo to help you build social features for your application.

There are lots of comments throughout the code, but if anything is unclear, please open an issue!

Examples

  • State Sync

2️⃣
Create React App
https://github.com/deso-protocol/deso-examples-react
DeSo Protocol SDK
Configuration
Login
Logout
Create a react context
Set up useState hook
Set up useEffect hook
Subscribe to identity
Instantiate a context provider
Use state from identity anywhere
React to changes in your code
Check permissions
Request permissions
Create, sign, submit a transaction