This is a four part article that has a corresponding video for each section. You can watch me start building the React app in the first video above. I’ll also guide you through the step-by-step instructions in this tutorial. You’ll see the rest of the videos as you reach each section below.<\/p>\n\n\n\n
Table of Contents<\/h2>\n\n\n\n- Intro
- How Our App Works<\/a><\/li>
- Dependencies<\/a><\/li><\/ul><\/li>
- Tutorial Steps
- Project Setup<\/a><\/li>
- List Tasks<\/a><\/li>
- Create Tasks<\/a><\/li>
- Complete Tasks<\/a><\/li><\/ol><\/li><\/ul>\n\n\n\n
How Our App Works<\/h5>\n\n\n\n
This tutorial is a continuation of previous tutorial where I show you how to build a full stack blockchain based todo list<\/a>. We’re going to use the smart contract from the previous tutorial as the starting point for the dapp that we’ll build in this tutorial. You can follow along with the previous tutorial to create the todo list smart contract, or you can simply copy the source code to get started with this one. Either way, you’ll need a copy of the Ethereum todo list smart contract to follow along with this tutorial.<\/p>\n\n\n\nLet me explain how the application will work that we’ll build in this tutorial. We’ll create a React.js application for the todo list that will talk directly to the smart contract on the blockchain. We’ll use the Ethereum blockchain in this tutorial, which we can access by connecting our client side application to a single Ethereum node. The smart contract written in Solidity will powers the backend of the todo list. We’ll connect to the blockchain network with our personal account using an Ethereum wallet in order to interact with the todo list application that we’ll create.<\/p>\n\n\n\n
Application Preview<\/h5>\n\n\n\n
Here is a preview of the todo list application that we’ll build in this tutorial. We’ll be able to list out all of the tasks in the todo list, create new ones, and complete them.![\"Ethereum](\"https:\/\/www.dappuniversity.com\/blockchain-app-tutorial\/ethereum-todo-list-application.png\")
<\/p>\n\n\n\n
Installing Dependencies<\/h3>\n\n\n\n
Now let’s install all of the dependencies we need to build our project. First, we’ll set up a person blockchain to develop the application locally.<\/p>\n\n\n\n
Ganache Personal Blockchain<\/h5>\n\n\n\n
The dependency is a personal blockchain, which is a local development blockchain that can be used to mimic the behavior of a public blockchain. I recommend using Ganache<\/a> as your personal blockchain for Ethereum development. It is available on Windows, Mac, and Linux as as a desktop application and a command line tool!![\"Ganache](\"https:\/\/www.dappuniversity.com\/blockchain-developer-toolkit\/1-ganache.png\")
<\/p>\n\n\n\nI’ll walk you through setting up the desktop application in this tutorial. You can find the latest release for your operating system here<\/a>. Once you’ve downloaded the archived package, extract the installer and run through the setup steps. Once you’ve installed it, you should see a this screen whenever you open it:![\"Ganache](\"https:\/\/www.dappuniversity.com\/blockchain-developer-toolkit\/2-ganache.png\")
<\/p>\n\n\n\nYay! ? Now you have a personal blockchain network running!\/p><\/p>\n\n\n\n
Metamask Ethereum Wallet<\/h5>\n\n\n\n
Now it’s time to turn your web browser into a blockchain browser. Most major web browsers do not currently connect to blockchain networks, so we’ll have to install a browser extension that allows them to do this.![\"Metamask](\"https:\/\/www.dappuniversity.com\/blockchain-developer-toolkit\/9-metamask.png\")
<\/p>\n\n\n\n
I’ll the Metamask extension for Google Chrome<\/a>. To install Metamask, visit this link<\/a> or search for the Metamask Chrome plugin in the Google Chrome web store. Once you\u2019ve installed it, be sure that it is checked in your list of extensions. You\u2019ll see the fox icon in the top right hand side of your Chrome browser when it\u2019s installed. Reference the video walk through if you get stuck!<\/p>\n\n\n\nMetamask will also allow us to manage our personal account when we connect to the blockchain, as well as manage our Ether funds that we’ll need to pay for transactions.<\/p>\n\n\n\n
Node.JS<\/h5>\n\n\n\n
Now that you have a private blockchain running, you need install Node Package Manager<\/a>, or NPM, which comes with Node.js. You can see if you have node already installed by going to your terminal and typing:<\/p>\n\n\n\n$ node -v<\/code><\/pre>\n\n\n\nIf you don’t have node already installed you can visit the Node.js website<\/a> to download it.<\/p>\n\n\n\nCreate React App<\/h5>\n\n\n\n
Next, you’ll need to install Create React App<\/a>, which will allow us to bootstrap a new React.js application without too much configuration. You can install it from the command line like this:<\/p>\n\n\n\n$ npm install create-react-app<\/code><\/pre>\n\n\n\nStep 1: Project Setup<\/h2>\n\n\n\n
Before you get started, ensure that Ganache is running, and that you deployed the todo list smart contract from the previous tutorial<\/a>!<\/em><\/p>\n\n\n\nNow let’s create the project! We’ll do that with Create React App like this:<\/p>\n\n\n\n
$ create-react-app eth-todo-list-react\n$ cd eth-todo-list-react\n<\/code><\/pre>\n\n\n\nNow we can run the web server that came with the react app to make sure that everything worked properly:<\/p>\n\n\n\n
$ npm run start<\/code><\/pre>\n\n\n\nYour browser should open automatically. You should see a web page like this:![\"Create](\"https:\/\/www.dappuniversity.com\/ethereum-dapp-react-tutorial\/smoke-test.png\")
<\/p>\n\n\n\n
Great, that worked! Now let’s update the package.json<\/code> file to include all of the dependencies we need for the tutorial.<\/p>\n\n\n\n{\n \"name\": \"eth-todo-list-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"bootstrap\": \"^4.3.1\",\n \"react\": \"^16.8.3\",\n \"react-bootstrap\": \"^1.0.0-beta.5\",\n \"react-dom\": \"^16.8.3\",\n \"react-scripts\": \"2.1.5\",\n \"web3\": \"^1.0.0-beta.46\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": [\n \">0.2%\",\n \"not dead\",\n \"not ie <= 11\",\n \"not op_mini all\"\n ]\n}<\/code><\/pre>\n\n\n\nNow we can install these dependencies like this:<\/p>\n\n\n\n
$ npm install<\/code><\/pre>\n\n\n\nJust make sure you restart your web server after installing these dependencies. Let me explain the two new dependencies we just installed.<\/p>\n\n\n\n
- Web3.js<\/a> – This is the main JavaScript library for communicating with the Ethereum blockchain. It will effectively turn our React application into a blockchain-enabled application. We’ll use Web3 to interact with the todo list smart contract backend in this tutorial.<\/li>
- React Bootstrap<\/a> – This is the React version of the Bootstrap templating framework<\/a>. It will allow us to create rich, interactive user interfaces without having to write a lot of CSS to get started.<\/li><\/ol>\n\n\n\n
Next, we need to further configure our app to import the bootstrap styles. Add this line to your index.js<\/code> file:<\/p>\n\n\n\nimport<\/strong> 'bootstrap\/dist\/css\/bootstrap.css';<\/code><\/pre>\n\n\n\nNext, we’ll clear out all of the default style sheets so that we don’t conflict with bootstrap.<\/p>\n\n\n\n
$ rm src\/index.css<\/code><\/pre>\n\n\n\nDon’t forget to remove this from the imported files in src\/App.js<\/code>!<\/p>\n\n\n\nThen, we’ll wipe out all of the css in side the<\/p>\n\n\n\n
src\/App.css<\/pre>\n\n\n\nfile.<\/p>\n\n\n\n
Now let’s actually connect our app to the blockhain and list out the current account that we’re connected with. In order to do this, let’s clear out all of the code from the src\/App.js<\/code> file, and replace it with this code below:<\/p>\n\n\n\nimport<\/strong> React, { Component } from<\/strong> 'react'\nimport<\/strong> Web3 from<\/strong> 'web3'\nimport<\/strong> '.\/App.css'\n\nclass<\/strong> App<\/strong> extends<\/strong> Component<\/strong> {\n componentWillMount() {\n this<\/strong>.loadBlockchainData()\n }\n\n async<\/strong> loadBlockchainData() {\n const<\/strong> web3 = new<\/strong> Web3(Web3.givenProvider || \"http:\/\/localhost:8545\")\n const<\/strong> accounts = await<\/strong> web3.eth.getAccounts()\n this<\/strong>.setState({ account: accounts[0] })\n }\n\n constructor<\/strong>(props) {\n super<\/strong>(props)\n this<\/strong>.state = { account: '' }\n }\n\n render() {\n return<\/strong> (\n <div<\/strong> className=\"container\">\n <h1l<\/strong>>Hello, World!<\/h1<\/strong>>\n <p<\/strong>>Your account: {this.state.account}<\/p<\/strong>>\n <\/div<\/strong>>\n );\n }\n}\n\nexport<\/strong> default<\/strong> App;<\/code><\/pre>\n\n\n\nLet me explain what this code does.<\/p>\n\n\n\n
- First, we import the web3 library at the top of the file with
import Web3 from 'web3'<\/code>.<\/li>- Next, we use React’s build incomponentWillMount()function to load all the blockhain data. This function gets called whenever the component will load properly the first time. React has many component and lifeycle functions which you can read about here<\/a>.<\/li>
- Next, we connect to the blockchain by instantiating a new web3 connection, while passing in the url to Ganache
http:\/\/localhost:7545<\/code>.<\/li>- Then, we load the current account we’re connected with. We add that to React’s state object, which allows us to track the current state of the component.<\/li>
- Finally, we read the account from the state object and render it within the HTML output from therender()function.<\/li><\/ul>\n\n\n\n
At this point, the application should look like this in the browser:![\"Hello](\"https:\/\/www.dappuniversity.com\/ethereum-dapp-react-tutorial\/hello-world.png\")
<\/p>\n\n\n\n
Step 2: List Tasks<\/h2>\n\n\n\n
- How Our App Works<\/a><\/li>
- Dependencies<\/a><\/li><\/ul><\/li>
- Tutorial Steps
- Project Setup<\/a><\/li>
- List Tasks<\/a><\/li>
- Create Tasks<\/a><\/li>
- Complete Tasks<\/a><\/li><\/ol><\/li><\/ul>\n\n\n\n
How Our App Works<\/h5>\n\n\n\n
This tutorial is a continuation of previous tutorial where I show you how to build a full stack blockchain based todo list<\/a>. We’re going to use the smart contract from the previous tutorial as the starting point for the dapp that we’ll build in this tutorial. You can follow along with the previous tutorial to create the todo list smart contract, or you can simply copy the source code to get started with this one. Either way, you’ll need a copy of the Ethereum todo list smart contract to follow along with this tutorial.<\/p>\n\n\n\n
Let me explain how the application will work that we’ll build in this tutorial. We’ll create a React.js application for the todo list that will talk directly to the smart contract on the blockchain. We’ll use the Ethereum blockchain in this tutorial, which we can access by connecting our client side application to a single Ethereum node. The smart contract written in Solidity will powers the backend of the todo list. We’ll connect to the blockchain network with our personal account using an Ethereum wallet in order to interact with the todo list application that we’ll create.<\/p>\n\n\n\n
Application Preview<\/h5>\n\n\n\n
Here is a preview of the todo list application that we’ll build in this tutorial. We’ll be able to list out all of the tasks in the todo list, create new ones, and complete them.
<\/p>\n\n\n\nInstalling Dependencies<\/h3>\n\n\n\n
Now let’s install all of the dependencies we need to build our project. First, we’ll set up a person blockchain to develop the application locally.<\/p>\n\n\n\n
Ganache Personal Blockchain<\/h5>\n\n\n\n
The dependency is a personal blockchain, which is a local development blockchain that can be used to mimic the behavior of a public blockchain. I recommend using Ganache<\/a> as your personal blockchain for Ethereum development. It is available on Windows, Mac, and Linux as as a desktop application and a command line tool!
<\/p>\n\n\n\nI’ll walk you through setting up the desktop application in this tutorial. You can find the latest release for your operating system here<\/a>. Once you’ve downloaded the archived package, extract the installer and run through the setup steps. Once you’ve installed it, you should see a this screen whenever you open it:
<\/p>\n\n\n\nYay! ? Now you have a personal blockchain network running!\/p><\/p>\n\n\n\n
Metamask Ethereum Wallet<\/h5>\n\n\n\n
Now it’s time to turn your web browser into a blockchain browser. Most major web browsers do not currently connect to blockchain networks, so we’ll have to install a browser extension that allows them to do this.
<\/p>\n\n\n\nI’ll the Metamask extension for Google Chrome<\/a>. To install Metamask, visit this link<\/a> or search for the Metamask Chrome plugin in the Google Chrome web store. Once you\u2019ve installed it, be sure that it is checked in your list of extensions. You\u2019ll see the fox icon in the top right hand side of your Chrome browser when it\u2019s installed. Reference the video walk through if you get stuck!<\/p>\n\n\n\n
Metamask will also allow us to manage our personal account when we connect to the blockchain, as well as manage our Ether funds that we’ll need to pay for transactions.<\/p>\n\n\n\n
Node.JS<\/h5>\n\n\n\n
Now that you have a private blockchain running, you need install Node Package Manager<\/a>, or NPM, which comes with Node.js. You can see if you have node already installed by going to your terminal and typing:<\/p>\n\n\n\n
$ node -v<\/code><\/pre>\n\n\n\nIf you don’t have node already installed you can visit the Node.js website<\/a> to download it.<\/p>\n\n\n\n
Create React App<\/h5>\n\n\n\n
Next, you’ll need to install Create React App<\/a>, which will allow us to bootstrap a new React.js application without too much configuration. You can install it from the command line like this:<\/p>\n\n\n\n
$ npm install create-react-app<\/code><\/pre>\n\n\n\nStep 1: Project Setup<\/h2>\n\n\n\n
Before you get started, ensure that Ganache is running, and that you deployed the todo list smart contract from the previous tutorial<\/a>!<\/em><\/p>\n\n\n\n
Now let’s create the project! We’ll do that with Create React App like this:<\/p>\n\n\n\n
$ create-react-app eth-todo-list-react\n$ cd eth-todo-list-react\n<\/code><\/pre>\n\n\n\nNow we can run the web server that came with the react app to make sure that everything worked properly:<\/p>\n\n\n\n
$ npm run start<\/code><\/pre>\n\n\n\nYour browser should open automatically. You should see a web page like this:
<\/p>\n\n\n\nGreat, that worked! Now let’s update the
package.json<\/code> file to include all of the dependencies we need for the tutorial.<\/p>\n\n\n\n{\n \"name\": \"eth-todo-list-react\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"bootstrap\": \"^4.3.1\",\n \"react\": \"^16.8.3\",\n \"react-bootstrap\": \"^1.0.0-beta.5\",\n \"react-dom\": \"^16.8.3\",\n \"react-scripts\": \"2.1.5\",\n \"web3\": \"^1.0.0-beta.46\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": [\n \">0.2%\",\n \"not dead\",\n \"not ie <= 11\",\n \"not op_mini all\"\n ]\n}<\/code><\/pre>\n\n\n\nNow we can install these dependencies like this:<\/p>\n\n\n\n
$ npm install<\/code><\/pre>\n\n\n\nJust make sure you restart your web server after installing these dependencies. Let me explain the two new dependencies we just installed.<\/p>\n\n\n\n
- Web3.js<\/a> – This is the main JavaScript library for communicating with the Ethereum blockchain. It will effectively turn our React application into a blockchain-enabled application. We’ll use Web3 to interact with the todo list smart contract backend in this tutorial.<\/li>
- React Bootstrap<\/a> – This is the React version of the Bootstrap templating framework<\/a>. It will allow us to create rich, interactive user interfaces without having to write a lot of CSS to get started.<\/li><\/ol>\n\n\n\n
Next, we need to further configure our app to import the bootstrap styles. Add this line to your
index.js<\/code> file:<\/p>\n\n\n\nimport<\/strong> 'bootstrap\/dist\/css\/bootstrap.css';<\/code><\/pre>\n\n\n\nNext, we’ll clear out all of the default style sheets so that we don’t conflict with bootstrap.<\/p>\n\n\n\n
$ rm src\/index.css<\/code><\/pre>\n\n\n\nDon’t forget to remove this from the imported files in
src\/App.js<\/code>!<\/p>\n\n\n\nThen, we’ll wipe out all of the css in side the<\/p>\n\n\n\n
src\/App.css<\/pre>\n\n\n\n
file.<\/p>\n\n\n\n
Now let’s actually connect our app to the blockhain and list out the current account that we’re connected with. In order to do this, let’s clear out all of the code from the
src\/App.js<\/code> file, and replace it with this code below:<\/p>\n\n\n\nimport<\/strong> React, { Component } from<\/strong> 'react'\nimport<\/strong> Web3 from<\/strong> 'web3'\nimport<\/strong> '.\/App.css'\n\nclass<\/strong> App<\/strong> extends<\/strong> Component<\/strong> {\n componentWillMount() {\n this<\/strong>.loadBlockchainData()\n }\n\n async<\/strong> loadBlockchainData() {\n const<\/strong> web3 = new<\/strong> Web3(Web3.givenProvider || \"http:\/\/localhost:8545\")\n const<\/strong> accounts = await<\/strong> web3.eth.getAccounts()\n this<\/strong>.setState({ account: accounts[0] })\n }\n\n constructor<\/strong>(props) {\n super<\/strong>(props)\n this<\/strong>.state = { account: '' }\n }\n\n render() {\n return<\/strong> (\n <div<\/strong> className=\"container\">\n <h1l<\/strong>>Hello, World!<\/h1<\/strong>>\n <p<\/strong>>Your account: {this.state.account}<\/p<\/strong>>\n <\/div<\/strong>>\n );\n }\n}\n\nexport<\/strong> default<\/strong> App;<\/code><\/pre>\n\n\n\nLet me explain what this code does.<\/p>\n\n\n\n
- First, we import the web3 library at the top of the file with
import Web3 from 'web3'<\/code>.<\/li>- Next, we use React’s build incomponentWillMount()function to load all the blockhain data. This function gets called whenever the component will load properly the first time. React has many component and lifeycle functions which you can read about here<\/a>.<\/li>
- Next, we connect to the blockchain by instantiating a new web3 connection, while passing in the url to Ganache
http:\/\/localhost:7545<\/code>.<\/li>- Then, we load the current account we’re connected with. We add that to React’s state object, which allows us to track the current state of the component.<\/li>
- Finally, we read the account from the state object and render it within the HTML output from therender()function.<\/li><\/ul>\n\n\n\n
At this point, the application should look like this in the browser:
<\/p>\n\n\n\nStep 2: List Tasks<\/h2>\n\n\n\n
- Next, we use React’s build incomponentWillMount()function to load all the blockhain data. This function gets called whenever the component will load properly the first time. React has many component and lifeycle functions which you can read about here<\/a>.<\/li>
- React Bootstrap<\/a> – This is the React version of the Bootstrap templating framework<\/a>. It will allow us to create rich, interactive user interfaces without having to write a lot of CSS to get started.<\/li><\/ol>\n\n\n\n
- List Tasks<\/a><\/li>
- Dependencies<\/a><\/li><\/ul><\/li>