circle-check
Eclipse Global Wallet is live!
Integrate now!arrow-up-right
Eclipse Documentation
search
⌘Ctrlk
HomeBridgeExplorer
  • user-magnifying-glassUsers
  • brackets-curlyDevelopers
  • sitemapArchitecture
Eclipse Documentation
  • Getting Started
  • Wallet
  • RPC & Block Explorers
  • Bridges
  • Oracles
  • NFTs
  • Developer Tooling
  • Eclipse Bug Bounty Program
  • Eclipse Status Page
  • Frequently Asked Questions
  • Differences Between Eclipse and Solana
  • Eclipse Program Registry Guide
  • 📖Tutorials & Guides
    • Developer Guides
      • Quick Start: "Hello World"
      • Reading from the blockchain
      • Modifying a Solana dApp to Support Eclipse: "Chomping Glass"
      • Dapp Deployment Tutorial - Eclipse Devnet
        • ⚙️Install Dependencies - Windows
        • 🏝️Solana CLI & Solana Keypair
        • 🖥️Creating an Anchor Project in Visual Studio Code
        • ✨Building a React App Front-End
          • Step 1: Create a New React Project with TypeScript
          • Step 2: Install Solana Web3.js and Wallet Adapter Dependencies
          • Step 3: Install Additional Dependencies for Enhanced Functionality and Compatibility
          • Step 4: Configure Webpack for Browser Compatibility
          • Step 5: Start the Development Server and Verify Setup
          • Step 6: Implement the UI for Your NFT Minter in App.tsx with Updated Code
      • Eclipse Testnet ETH Transfer Transaction Fee Estimator
      • Pyth: How to Use Real-Time Data in Solana Programs
      • Quick Start: User Guide - Testnet
      • cNFTs on Eclipse
  • 📚Additional Resources
    • External Documentation
    • Disclosures
gitbookPowered by GitBook
block-quoteOn this pagechevron-down
  1. 📖Tutorials & Guideschevron-right
  2. Developer Guideschevron-right
  3. Dapp Deployment Tutorial - Eclipse Devnet

✨Building a React App Front-End

Creating a front-end interface for your smart contract enhances user interaction and usability. A React application serves as a powerful and flexible way to build your project's UI. This section guides you through setting up a basic React application that interacts with your deployed smart contract on the Eclipse Devnet.

Step 1: Create a New React Project with TypeScriptchevron-rightStep 2: Install Solana Web3.js and Wallet Adapter Dependencieschevron-rightStep 3: Install Additional Dependencies for Enhanced Functionality and Compatibilitychevron-rightStep 4: Configure Webpack for Browser Compatibilitychevron-rightStep 5: Start the Development Server and Verify Setupchevron-rightStep 6: Implement the UI for Your NFT Minter in App.tsx with Updated Codechevron-right
PreviousStep 7: Verify Program Deployment on the Eclipse Devnet Explorerchevron-leftNextStep 1: Create a New React Project with TypeScriptchevron-right

Was this helpful?

Was this helpful?