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 full-size slide

  2. Glenn Reyes
    @glnnrys


    🇵🇭 living in 🇦🇹
    Software Engineer

    at @avantgarde
    fi
    nance 

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

    🚴 Sports & 🎸 Music

    View full-size slide

  3. Goals for today

    View full-size slide

  4. @glnnrys · glennreyes.com
    💡 Learn

    View full-size slide

  5. @glnnrys · glennreyes.com
    🤪 Fun

    View full-size slide

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

    View full-size slide

  7. Agenda
    For today
    🧑🏫 Short intro

    🤸 Exercise

    🫣 Review

    🤩 Repeat!

    View full-size slide

  8. What is a blockchain?

    View full-size slide

  9. What is Ethereum?

    View full-size slide

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

    View full-size slide

  11. What are Smart Contracts?

    View full-size slide

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

    View full-size slide

  13. Read — Query a node on the network


    Write — Send a transaction

    View full-size slide

  14. What is Web3?

    View full-size slide

  15. New iteration of the

    World Wide Web

    View full-size slide

  16. Web3 Architecture

    View full-size slide

  17. Decentralized App

    View full-size slide

  18. Building a Dapp

    View full-size slide

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

    View full-size slide

  20. 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 full-size slide

  21. Let’s get started!

    View full-size slide

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

    View full-size slide