Learning React.js and Web3.js
Last week, we finished the wireframing and UX design of the Covenant Demo. The next natural step was the development of the application. We have chosen the React.js framework, a popular open source library developed by Facebook.
We also needed a tool that integrated communication with the Ethereum Blockchain. Web3.js is an Ethereum JavaScript API that allows the MetaMask Chrome extension to inject itself in our web application.
Because I wasn’t familiar with the above technologies, I decided to learn the basics and create a small application to train the necessary skills and showcase the results.
The Burger Builder
The Burger Builder is a learning project for mastering new skills and technologies. I have made this web application with React.js as a front-end framework. For login options and payment of the burger, I have implemented Web3.js, so one can sign Smart Contracts and pay with their MetaMask extension. Click here to take a look.
React.js
React is a JavaScript for building User Interfaces. The first important part is the JavaScript Library, it is about building JS-driven applications. React apps run in the browser, instead of on a server. This gives us the advantage of very fast loading and rendering because we don’t have to wait for a server response to get a new page or to render a new object.
The second part is about User Interface, this is what the user sees and interacts with. React is all about splitting up a web page into components. This makes it easy for us to manage our code because all the UI elements are split into different maintainable, manageable and reusable pieces.
An example of a React Component:
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}
ReactDOM.render(
<HelloMessage name="Taylor" />,
mountNode
);Web3.js and MetaMask
MetaMask is a bridge that allows you to visit the distributed web of tomorrow in your browser today. It allows you to run Ethereum dApps right in your browser without running a full Ethereum node. MetaMask includes a secure identity vault, providing a user interface to manage your identities on different sites and sign blockchain transactions.
Your unique Ethereum Address provides a secure way of authenticating your identity. By signing a nonce generated by the back-end with your private key, one is able to cryptographically prove its ownership. Below you can find a flow of the login process.
Once signed in, a user can build a virtual burger and pay it with Ether, preferably on an Ethereum Test Net like Rinkeby. The process is intuitive, simple and secure. With the continuous development of Blockchain dApps, the adoption of the MetaMask extension might increase — making this login method an effective tool.
An example of a Payment Function of 1 Ether with MetaMask
import Web3 from 'web3';payBurger = () => {
if (!window.web3) {
window.alert('Please install MetaMask first.');
return;
}
if (!web3.eth.coinbase) {
window.alert('Please activate MetaMask first.');
return;
}
const publicAddress = web3.eth.coinbase.toLowerCase();
web3.eth.sendTransaction({
to: '0x34d8BDC8CA8Bc8F183285EF65ac615ea1305feBa',
from: publicAddress,
value: web3.toWei('1', 'ether'),
})}
Conclusion
Learning these tools is a good foundation for any developer who wants to build respectable web applications with Blockchain integration. The practice gave me more confidence in my development skill set and made me more interested in the crucial continuous learning process of a developer.
I am a 22-year-old Student-Entrepreneur with an expertise in Web Technology and Digital Product Development. My interests include innovation, design, psychology, philosophy and financial markets. I have currently finished a three-month internship at the Blockchain Consultancy Startup TheLedger.
I am always open for a good conversation: Contact me.
