React & Ethereum: Getting Started With The Minimum Toolset Required — Part 1 of 4
Learn how to create a smart contract and deploy it to the Ethereum blockchain, using the minimum toolset required: Remix, Metamask, and any text editor.
••••••••••••• Part 1 ••• Part 2 ••• Part 3 ••• Part 4 •••••••••••••
Update: This blog series is no longer maintained.
Introduction
The essence of this post is to show how React can talk with the Ethereum blockchain. Only three tools will be used, so there’ll be a minimum learning curve. The project will be broken down into five phases so it can be easily followed.
Intended audience: Students / beginners / intermediate beginners, and anyone with curiosity.
Prerequisites: Basic familiarity with JavaScript, React, npm, and the command line. Simple knowledge of ether and gas.
Solidity will be used to write our smart contract, though familiarity with it is not needed. I’ll do my best to explain what’s happening, and I’ll link relevant key words to the Solidity documentation for easy reference.
Design note: I’m designing this post to be a learning experience which aims to deliver a simple and detailed understanding of the toolset used and the Solidity programming language. Practicing, recalling from memory, and following processes are part of this experience.
GitHub repository: If you’d like, you can code along with my repository. I’ve added comments as a guide.
Personal process note: I would like to mention that even though these posts appear linear, my process of learning and coding this example was far from it. It was non-linear, a bit like a spiral or a helix. I applied a rapid-prototyping / rapid-iteration process that I learned while attending Stanford University, one where I tried something small, debugged it, tried again, debugged again, and repeated until I got to my goal. In moments of frustration, I took walking breaks, cleared my head, consulted Google search, and tried again. I feel this process is universal in the arena of writing code. I could definitely be wrong about that, though I’ve seen it play out in many of my peers. I’ve learned to love this process and have fun with it.
Toolset
For this project, we’ll be using:
- Remix IDE: A Solidity development environment provide by the Ethereum development team. It’s available online here. Please keep it open as we work through this learning experience.
- Metamask: A Chrome extension used to engage the Ethereum blockchain. Please install it and setup your account. We’ll use this to connect with the Ethereum Ropsten Testnet.
- Text editor: Any text editor you chose will work great. We’ll be using an editor starting in Phase 2 to wire up React with the Ropsten Testnet Etherium Blockchain using Metamask.
Overview of Phases
Each phase aims to show specific nuggets of knowledge. They are self-contained and build on top of each other, as in, Phase 2 builds on the work in Phase 1.
- Phase 0: Get familiar with Remix, and create a smart contract scaffold.
- Phase 1: Create a public variable, deploy smart contract on JavaScript VM, and interact with it in Remix.
- Phase 2: Create a private variable, deploy smart contract to Ethereum Ropsten Testnet, and interact with private variable on a React frontend using Metamask as the intermediary.
- Phase 3: Manipulate the state of a smart contract from React.
- Phase 4: Engage a conditional on a smart contract, and explore its implications.
Phase 0: Remix IDE & Smart Contract Scaffold
We’ll open up Remix IDE and begin by becoming familiar with its layout, specifically with the right column. We’ll start there.
The Compile tab compiles the source code present in the editor when Remix is loaded. After compiling, Remix provides a Static Analysis, which offers warnings and errors that we can use to edit our code. We can safely ignore warnings for now.
By default, the ‘Auto Compile’ box near the top is checked. I personally prefer to uncheck it, so the compiler doesn’t trigger with each change I make in the editor. Then I manually click the ‘Start to compile’ button each time I need the source code compiled.
Next, let’s look at the Run tab.
We deploy smart contracts from the Run tab. Please note the Environment dropdown menu and the light-red Create button. First we select the Environment to declare the context of our deployment, then we click Create to make the smart contract.
Under the Environment menu, we’ll use these options:
- JavaScript VM: To deploy and play with our smart contract right on our browser.
- Injected Web3: To deploy our smart contract through Metamask on the Ethereum Ropsten Test Network or the Ethereum Main Network.
We’ll use the Compile and Run tabs frequently in this project.
The left column in Remix is a file explorer, and the center column contains the code editor and a console. I think these are reasonably self-explanatory.
Smart Contract Scaffold
Remix usually comes shipped with some code. Please delete this code, and change the filename on the left tab to ReactExample.sol. Then we’ll enter our code in the editor found in the center column.
Note: I offer an image so one can practice typing it, instead of copy / pasting it. This’ll help build memory, as well as be a better learning experience.
Since familiarity with Solidity is not assumed, I’ll try to explain each section of code.
Line 1: Tells the Solidity compiler that the source code is written in version 0.4.11. Newer versions will be supported up to, but not including, version 0.5.0. I picked version 0.4.11 arbitrarily — in a real-life project, picking a version will be a technical decision weighing pros, cons, and trade-offs.
Line 4: Declares a state variable of type address, which is named owner. It is declared private so its value isn’t visible outside our contract. An address type holds a 160-bit value, the size of an Ethereum address. State variables are stored in a smart contract’s storage, which is a persistent memory area.
Line 6: Provides a constructor function that’ll run once, when the smart contract is created. It’s visibility is set to public, which means it’s visible to everyone. All functions in our contract are public, which is the default visibility modifier if none are specified. The constructor’s name must be the same as the contract’s name, which is ReactExample in our case.
Line 7: Initializes the owner to be the address of who created the contract. The creator’s address is contained in msg.sender. Note: In JavaScript and other programming languages, we’d need the this keyword to refer to the smart contract instance. In Solidity, it’s not required in this context, but required for external function calls.
Line 10: Provides a function which the owner can call in case the smart contract is compromised. Invoking it will destroy the contract.
Line 11: Ensures that only the owner can self-destruct the contract. require (condition) throws an exception if the condition inside its parentheses is false.
Line 12: Destroys the contract. Recall: owner is an address, so selfdestruct (owner) is going to forward its balance to the owner.
Line 15: Provides an anonymous function called a fallback function. The payable modifier ensures the function can receive ether. The revert () call gives back ether to whoever invokes this function.
That’s it for Phase 0. Now that we’re a little more familiar with Remix and some basic workings of Solidity, let’s move on to Phase 1 and play with a deployed smart contract.
Phase 1: Remix’s JavaScript VM & Interacting with Smart Contract
Now that we have a basic smart contract, we’ll add a public state variable, deploy the contract, and interact with it — all inside Remix IDE.
First, let’s add a two lines of code:
Line 5: Declares a public string type variable called you_awesome. When a public state variable is declared, it’s stored in the smart contract’s storage, and Solidity automatically creates a public getter function for it. Recall: storage is a persistent memory area of smart contracts. This public getter function is what we’ll be playing with in this section.
Line 9: Initializes the you_awesome variable with the value “You’re awesome”. Recall: The constructor function is called only once, when the contract is created. So far, we haven’t deployed our contract yet.
First Deployment of Smart Contract on JavaScript VM
General process note: Please remember this process. We’ll refer to it in future phases. Any time we’re deploying our smart contract, in any Environment context, we’ll follow these steps:
- First click ‘Start to compile’ button on the Compile tab.
- Once our source code is compiled and the analysis is checked, we’ll click the Run tab.
- Then we’ll select either JavaScript VM or Injected Web3 in our Environment dropdown menu.
- Finally, click the ‘Create’ button.
Debug note: If not signed into Metamask in future phases, Injected Web3 will display an error. Please ensure you are signed in while working on this project. This note does not apply yet, but will be relevant later.
For our first deployment, we’ll use the JavaScript VM environment.
In general, while rapidly-iterating on our smart contract code, we’ll always deploy on the JavaScript VM environment since it’s fast and runs on our browsers. It’s a great place to test our experiments, and it requires no additional setup, i.e, no Metamask or React.
When we’re ready for our smart contract to engage with a live Ethereum blockchain — either the Ropsten Testnet or the real Ethereum blockchain— we’ll use the Injected Web3 environment. When deployed on a live network, clients can interact with the smart contract through an interface we’ll discuss in the next phase. This process requires setup of Metamask and wiring up with React, at a bare minimum.
Alright, let’s deploy our first smart contract on the JavaScript VM environment and play with it!
The colored buttons appearing at the bottom of the screenshot are part of our smart contract — they are the functions we wrote. Notice how the owner variable doesn’t show up — this is because it’s visibility is set to private, so the Solidity compiler doesn’t create a public getter function for it.
If you click the ‘you_awesome’ button, the getter function for our public state variable will retrieve the value and display it on the console below the code editor.
That’s it for Phase 1. We’ve now written a simple smart contract on Remix, deployed it on the JavaScript VM environment, and interacted with it on our browser. Next, we’ll add a private state variable to our smart contract, deploy to a live test network, setup Metamask as our intermediary, and spin up a React frontend to query that variable.
