Web3 for React Devs Workshop for React Europe
React Europe Web3 Workshop
This workshop will cover how to use React with Web3 using MetaMask.
Along the way, we will get an overview of blockchains, Ethereum, smart contracts, MetaMask, and why web3 is so cool!
Set up Commands
# Installs Truffle globally.
yarn add truffle -g
# Initializes a new, empty Ethereum project.
truffle init
Code Deep Dive
Front End
Back End
Crash Course into Web3
What are blockchains?
Simply, a single blockchain is like a linked list that is connected by the hash of the previous block of information. By hashing blocks and linking them together, they increase the difficulty of manipulation.
A blockchain network is when this blockchain is spread across various nodes for redundancy. The more decentralized the network, the more tamper-resistant the network. This increases trust in the system, which reduces the need for trust between entities. Through a consensus mechanism, the network’s state is constantly updated.
In a sense, a blockchain is a database AND a network rolled up into one.
The blockchain’s key innovation is to commoditize trust and allow for coordination between peers in open adversarial environments.
Get a general sense of blockchain and its primitives by playing with a simple one created by Anders Brownsworth.
This article explains why for many, it’s hard to get bitcoin and blockchains in general. It’s an exciting and eye-opening read.
What is Ethereum?
Ethereum is the leading programmbale blockchain, allowing for developers to leverage the security of
To get an understanding of how Ethereum fits into the evolution of the internet, read Programmable Blockchains in context by Vinay Gupta. Its a mind bending but amazing read. His talk on the history of computing and how it fits with blockchains also is worth a look.
What is Web3?
Web2 refers to the version of the internet most of us know today. An internet dominated by companies that provide services in exchange for your personal data.
Web3, in the context of Ethereum, refers to decentralized apps that run on the blockchain. These are apps that allow anyone to participate without monetising their personal data.
Why Ethereum and Web3?
JavaScript allows you to add interactivity. Ethereum and Solidity enable you to add collaboration and ownership, enabling real decentralization and helping fulfil the internet’s promise.
Furthermore, web3 apps on the same blockchain are composable and interoperable. Because the network is the database, web3 apps can build upon each other in a permissionless manner. These qualities led to a Cambrian Explosion of innovation in web3!
A great podcast that puts everything into perspective is Moon Math – The Bull Case for Cryptography by Bankless featuring Ethereum Researcher Justin Drake.
Why is Ethereum so special?
From another perspective, Ethereum and smart contract platforms commoditize networks. Commoditization is important because it helps drive standardization and innovation.
Ethereum commoditizes:
-
the network which runs the ecosystem
-
the shared database between siloed business logic in the form of smart contracts
-
the data generated by these contracts
security which data and computers depend on to ensure its trustworthiness and immutability of value transfer.
ON a deeper level, through its security guarantees, Ethereum commoditizes “trust” between people. Ethereum’s brilliance is extending those commodities to any programmable logic made by anyone. This allows for creating any protocol to transmit value in an open fashion with low switching costs between providers.
It also means that you can leverage the security and database of a pre-existing network! If users already have an Ethereum wallet, they can bring their data and credentials to your application. You can remix and leverage their existing data to create new Apps without permission from any third party.
There is no data lock-in!
Etheruem can transform private goods into public goods and scale it globally at a low cost. An example of this is NASDAQ vs the UniSwap Protocol. Or Compound.Finance and Aave vs traditional money markets and setting global interest rates.
Ethereum can also bootstrap communities to run these networks, allowing for shared ownership of public commons.
What’s a Smart Contract?
Smart contracts are programs that run on programmable blockchains like Ethereum.
They have many uses and are limited to your imagination. For example, smart contracts can create decentralized real-time money markets, issue royalties and ownership for art, are parts of video games, and more!
Smart contracts allow you to connect to internet-native value infrastructure and incentivize collaboration to any application.
What is MetaMask?
MetaMask is the leading crypto-wallet and the portal to the internet of value. Trusted by over 21 million users worldwide, start exploring blockchain applications in seconds.
MetaMask is the most permissionless and extensible wallet in the ecosystem. Furthermore, it aims to be the most decentralized and community focused wallet.
Soon, developers will be able to extend Metamask through Metamask Snaps permissionlessly.
Currently, has APIs which allow you to sign requests, act as a single sign on, sign legal documents like ETHSign, encrypt and decrypt messages with your keys, easily add custom networks and tokens like Chainlist.org.
What do we use MetaMask for as end user and developer?
…
How do we access Ethereum Network via Metamask?
…
How do we use MetaMask APIs to interact with Web3?
…
Where and how do we hold state with Web3?
See INSERT FILE and read the comments.
How do we interact with Smart Contracts?
See INSERT FILE and read the comments.
How do we read Smart Contracts?
See our curated list below to learn more! Solidity by Example provides and easy way to learn Solidity.
Want to learn more about DApp development?
See our curated list below!