Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Dapps with React

Building Dapps with React

Glenn Reyes

March 10, 2023
Tweet

More Decks by Glenn Reyes

Other Decks in Programming

Transcript

  1. Glenn Reyes @glnnrys
    Building Dapps with React
    Workshop

    View Slide

  2. Glenn Reyes
    @glnnrys


    🇵🇭 living in 🇦🇹
    Software Engineer

    at @avantgarde
    fi
    nance 

    building @enzyme
    fi
    nance
    🤍 Web3, React, GraphQL, UIs

    🚴 Sports & 🎸 Music

    View Slide

  3. Goals for today

    View Slide

  4. @glnnrys · glennreyes.com
    💡 Learn

    View Slide

  5. @glnnrys · glennreyes.com
    🤪 Fun

    View Slide

  6. @glnnrys · glennreyes.com
    🏁 Success!!!

    View Slide

  7. Agenda
    For today
    🧑🏫 Short intro

    🤸 Exercise

    🫣 Review

    🤩 Repeat!

    View Slide

  8. What is a blockchain?

    View Slide

  9. View Slide

  10. What is Ethereum?

    View Slide

  11. Ethereum is the community-run technology
    powering the cryptocurrency ether (ETH) and
    thousands of decentralized applications.

    View Slide

  12. What are Smart Contracts?

    View Slide

  13. A "smart contract" is simply a program
    that runs on the Ethereum blockchain.

    View Slide

  14. Read — Query a node on the network


    Write — Send a transaction

    View Slide

  15. What is Web3?

    View Slide

  16. New iteration of the

    World Wide Web

    View Slide

  17. Web3 Architecture

    View Slide

  18. View Slide

  19. Dapp

    View Slide

  20. Decentralized App

    View Slide

  21. Questions?

    View Slide

  22. Building a Dapp

    View Slide

  23. Ethereum
    Data
    Solidity
    Logic
    Hardhat
    EVM Smart Contracts Ethereum Development Environment
    Ethereum Tooling
    MetaMask
    Wallet
    Identity

    View Slide

  24. Ethereum
    Data
    Solidity
    Logic
    Hardhat
    EVM Smart Contracts Ethereum Development Environment
    Ethereum Tooling
    MetaMask
    Wallet
    Identity
    Vite
    React Development Environment
    Frontend Tooling
    React
    User Interfaces
    Frontend

    View Slide

  25. Let’s get started!

    View Slide

  26. https://github.com/glennreyes/
    react-dapp-workshop

    View Slide