{"id":2251,"date":"2022-01-25T18:11:09","date_gmt":"2022-01-25T18:11:09","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=2251"},"modified":"2022-01-25T18:11:09","modified_gmt":"2022-01-25T18:11:09","slug":"build-a-real-world-dapp-with-react-solidity-and-web3-js","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=2251","title":{"rendered":"Build a Real-World dApp With React, Solidity, and Web3.js"},"content":{"rendered":"\n

The world of online technology is transitioning fast towards web 3.0<\/a>. It seems like people are done with centralized systems with their digital privacy being maligned on daily basis by huge organizations. Therefore, they want a solution and web 3.0 seems to be the answer for now.<\/p>\n\n\n\n\n\n\n\n

This blog post isn\u2019t meant to cover the know-hows of blockchain and decentralized systems. Instead, this is for those who would like to build online solutions for users, customers, and clients to guarantee them better privacy and security for their data.<\/p>\n\n\n\n

Having clarified that, in this article I am going to show you the ABC of how to make a decentralized application from scratch and set up your development environment. Below are some of the topics we are going to cover.<\/p>\n\n\n\n

  1. Tools<\/li>
  2. Setup Tools<\/li>
  3. Write Code<\/li><\/ol>\n\n\n\n

    A Look at the Tools<\/h1>\n\n\n\n

    Below are some of the tools I am going to use in this blog post.<\/p>\n\n\n\n

    a. Truffle Framework<\/a><\/p>\n\n\n\n

    b. Ganache<\/a><\/p>\n\n\n\n

    c. Solidity 0.8.10<\/a><\/p>\n\n\n\n

    d. Metamask<\/a><\/p>\n\n\n\n

    e. React 17.0.2<\/a><\/p>\n\n\n\n

    f. Web3.js 1.6.1<\/a><\/p>\n\n\n\n

    In order to get going, I would like to briefly touch a little bit about the above-mentioned tools.<\/p>\n\n\n\n

    The first one, Truffle Framework offers a set of tools for developing Ethereum smart contracts. It offers tools such as smart contract management, deployment and migration, network management, development console etc.<\/p>\n\n\n\n

    Ganache<\/a> is a personal blockchain, which is a local development blockchain that can be used to mimic the behavior of a public blockchain.<\/p>\n\n\n\n

    Solidity is an object-oriented, high-level language for implementing smart contracts. To know more about Solidity please click here<\/a>.<\/p>\n\n\n\n

    Most browsers currently do not allow us to connect to the blockchain network for that reason, I would use the Metamask <\/strong>chrome extension which will allow us to connect our chrome browser to the blockchain network.<\/p>\n\n\n\n

    For UI or Front end development, we are going to use React library which is one of the most widely used JavaScript libraries among the front-end communities.<\/p>\n\n\n\n

    Web3.js<\/strong><\/a> <\/strong>is a JavaScript library that allows us to communicate with the Ethereum blockchain. It turns our React application into blockchain enabled application.<\/p>\n\n\n\n

    Setting Up Tools<\/h1>\n\n\n\n

    Now that I have briefly explained the tools set that are going to be used in this blog post, it’s time to get into it and set the tools up.<\/p>\n\n\n\n

    First and foremost, I would like you to download Truffle Framework<\/a> and install it with the below command:<\/p>\n\n\n\n

    npm install -g truffle<\/pre>\n\n\n\n
    Next, go ahead and download and install Ganache<\/a>. Once you do that and open it, you will get the below screen:<\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    Next, we need Metamask.<\/p>\n\n\n\n
    Go ahead and add Metamask<\/a> extension to your google chrome and get to the screen when you get something like below. In order to set up Metamask please follow this blog post<\/a>.<\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    Writing Code<\/h1>\n\n\n\n
    Now that the tools are set up, let\u2019s proceed to the next step which is writing smart contracts. To do that, open a terminal and create a folder in your projects folder with the below command:<\/p>\n\n\n\n
    mkdir blockchain<\/pre>\n\n\n\n
    Now make a folder inside the blockchain folder with the below command:<\/p>\n\n\n\n
    cd blockchainmkdir contractscd contracts<\/pre>\n\n\n\n
    Now run the below command to create a truffle project which will allow us to develop smart contracts:<\/p>\n\n\n\n
    truffle init<\/pre>\n\n\n\n
    With the above command, you should get an output like below:<\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    Now open your truffle project in your favorite text editor. I am going to use Sublime Text. You should see the following folder and files structure:<\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    Inside contracts<\/code> folder, we are going to write our smart contracts.<\/p>\n\n\n\n
    Within the migrations<\/code> folder, we are going to migrate our newly created smart contracts.<\/p>\n\n\n\n
    Inside test<\/code> folder, we usually write tests to test our smart contract however, it is beyond the scope of this blog post therefore, we are not going to get into that. I would highly recommend writing tests for your smart contracts before deploying them to public blockchain nodes.<\/p>\n\n\n\n
    truffle-config.js<\/code> file contains all the configuration of or truffle project.<\/p>\n\n\n\n
    Now let\u2019s write our smart contract. Create a new file and name it contacts.sol<\/code> inside contracts<\/code> folder. Now open that file and write the below code inside it:<\/p>\n\n\n\n
    pragma solidity >=0.4.22 <0.9.0;<\/pre>\n\n\n\n
    This should always be the first line in your smart contract file. With this, we are specifying the version of solidity.<\/p>\n\n\n\n
    Now let\u2019s make our first smart contract with code:https:\/\/betterprogramming.pub\/media\/178d8ebcc0947c9682f2a06b99413e3f<\/p>\n\n\n\n
    We can write a smart contract using the contract keyword and followed by the name of the contract which in this case Contacts<\/code>.<\/p>\n\n\n\n
    Now to track the number of contacts inside our smart contract, we will create a state variable.https:\/\/betterprogramming.pub\/media\/b206192e479846390dd51e183770c0af<\/p>\n\n\n\n
    This is a special variable and any data we write into this variable will be stored in blockchain storage. We are using a special modifier keyword i.e. public<\/code> to have access to this variable outside of the smart contract. Then we are assigning 0 to this variable.<\/p>\n\n\n\n
    Now that we have a state variable and it has a value in it. Let\u2019s go into the front end part and let\u2019s try to access this public state variable first. With this approach, we will establish communication between React application and our smart contract.<\/p>\n\n\n\n
    Run the below commands inside the blockchain<\/code> folder to create a react application.https:\/\/betterprogramming.pub\/media\/e36cce3e851c3ee7866ce88750b16438<\/p>\n\n\n\n
    As you can see we also added web3.js<\/code> as a dependency for this project to make our react application interact with our smart contract.<\/p>\n\n\n\n
    Now open that contacts folder in your favorite editor. I am using Sublime Text.<\/p>\n\n\n\n
    We are not going to set up the folder structure and implement complex architecture because that is out of the scope of this blog post.<\/p>\n\n\n\n
    We\u2019ll write all our code in App.js<\/code> file. Therefore, go ahead and open the file in your editor.<\/p>\n\n\n\n
    Write below code inside App.js<\/code> file:https:\/\/betterprogramming.pub\/media\/ca74af9630de27cefcad5987c1d58b42<\/p>\n\n\n\n
    We are importing a couple of hooks from React and Web3 from Web3.js<\/code>. Now let\u2019s create a state variable like below:https:\/\/betterprogramming.pub\/media\/9f9975709f64f8268ddf357e8b192b94<\/p>\n\n\n\n
    Now inside useEffect<\/code> hook we will with our smart contract like below:https:\/\/betterprogramming.pub\/media\/88fc1e1f94c8583dc328ae91ae01a087<\/p>\n\n\n\n
    Now in order to run this client-side successfully, we need to take a few steps in the backend. Let\u2019s get back to contracts<\/code> folder. First, open truffle-config.js<\/code> file and add the below properties:https:\/\/betterprogramming.pub\/media\/e848488e3ba30448e425298e47bc39d6<\/p>\n\n\n\n
    Now inside migrations<\/code> folder, create a new file and name it 2_deploy_contracts.js<\/code> and paste the below code:https:\/\/betterprogramming.pub\/media\/f1c03a20c3f1c2b8505528b4deeba750<\/p>\n\n\n\n
    Now in the terminal, type the below code to migrate your contract:<\/p>\n\n\n\n
    truffle migrate<\/pre>\n\n\n\n
    You should see an output something like below:<\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    Now go back to the front end folder and run the below command to run the application:<\/p>\n\n\n\n
    yarn start<\/pre>\n\n\n\n
    This will open your React application in your browser and it will trigger Metamask to interact with your blockchain network. You should see a screen like below:<\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    In the above screen, click next and you should be presented with the below screen.<\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    Now click connect. Then you should see the output on your browser with your account number like below:<\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    Now that we have successfully interacted with our smart contract and retrieved account id. Let\u2019s proceed with making a new function inside our smart contract to get a list of contacts and send it over to the front end and render them on the view.<\/p>\n\n\n\n
    Let go back to contracts<\/code> folder and open Contracts.sol<\/code> file and add the below function.https:\/\/betterprogramming.pub\/media\/dc3c48df76e0021868986517890a33ef<\/p>\n\n\n\n
    Now migrate this contract again as we made changes to this because smart contracts are immutable.<\/p>\n\n\n\n
    truffle migrate<\/pre>\n\n\n\n
    Now let\u2019s get back to the front end i.e. contacts<\/code> folder. Create a new file config.js<\/code> inside src\/<\/code> folder and paste the below code in that.https:\/\/betterprogramming.pub\/media\/37eef2092ec439b9c9988c0eec8f7e14<\/p>\n\n\n\n
    Now import both smart contract address and ABI into App.js<\/code> file like below and also update load function with below code:https:\/\/betterprogramming.pub\/media\/72c95fc41668ed217d3629d8d7037045<\/p>\n\n\n\n
    The above code will get all of the contacts from our smart contract and set them in contacts<\/code> state variable. The code is very well commented on and explained.<\/p>\n\n\n\n
    Now let\u2019s render all the contacts in ul like below.https:\/\/betterprogramming.pub\/media\/5a6f29d4f52d2e9b6da64285be7fda92<\/p>\n\n\n\n
    As you can find the updated code inside return \u2014 when you run this react app now in browser, you should be able to see something like below:<\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    If that is what you see then congratulations, you have just built your first dApp with the smart contract and web app that interacts with your smart contract on the blockchain.<\/p>\n\n\n\n
    Now that you know how to retrieve information from the smart contract, go ahead and improve this further by adding new contacts, updating them and deleting them with full CRUD operations.<\/p>\n\n\n\n
    That’s it from this article. The entire project can be found in the below GitHub Repository:GitHub \u2014 zafar-saleem\/blockchain-tutorialNote: This is a sample project for my blog on medium which can be found here. Clone this repository cd\u2026github.com<\/a><\/p>\n\n\n\n
    Below are my social media profiles if you would like to get in contact with me.<\/p>\n\n\n\n
    Linkedin<\/a> | Github<\/a> | Gitlab<\/a> | Website<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    The world of online technology is transitioning fast towards web 3.0. It seems like people are done with centralized systems with their digital privacy being maligned on daily basis by huge organizations. Therefore, they want a solution and web 3.0 seems to be the answer for now.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[178],"tags":[65,176],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2251"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2251"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2251\/revisions"}],"predecessor-version":[{"id":2252,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2251\/revisions\/2252"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}