Building Dapps with React

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