{"id":941,"date":"2022-05-17T07:56:45","date_gmt":"2022-05-17T07:56:45","guid":{"rendered":"https:\/\/www.workfall.com\/learning\/blog\/?p=941"},"modified":"2025-10-06T07:25:47","modified_gmt":"2025-10-06T07:25:47","slug":"how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js","status":"publish","type":"post","link":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/","title":{"rendered":"How to build and deploy dApps using Solidity Smart contract, WEB3.JS &#038; React.JS?"},"content":{"rendered":"<span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">12<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>\n<p><img src=\"https:\/\/lh5.googleusercontent.com\/Bu9zPY8bKTjHBivw7gJrIoSS8gd7UNuh61OsWX7pwiidHx1alHKpQyqyijMPY462Sbphj0bEVIrvtENtudthpE2Qs6VAs4ViVGrAtzmFmnG_XhEZ4hq-S6mAnXrA1v3HAh9l9-w\" style=\"width: 1600px;\"><\/p>\n\n\n\n<p class=\"has-text-align-justify\">Augur, OpenSea, PancakeSwap, etc. are all buzzwords that one might hear when we talk about blockchain technology. Why? \ud83e\udd14 This is because they represent a novel way of interacting with personal finance. There are many dApps in the blockchain ecosystem that help individuals and companies conduct transactions for various reasons like the ones mentioned. Many of these dApps are built to run on the Ethereum platform &#8211; which is the most widely used and popular blockchain network.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Smart contracts are the fundamental building blocks of Ethereum applications. For the Ethereum platform, the smart contracts are defined using a language called Solidity. These smart contracts are developed, deployed, and administered on this platform with the help of applications like Remix IDE.&nbsp;<\/p>\n\n\n\n<p class=\"has-text-align-justify\">In this blog, we will discuss and demonstrate how to build and deploy dApps using Solidity Smart Contracts, react.js, and web3.js.<\/p>\n\n\n\n<p>In this blog, we will cover:<\/p>\n\n\n\n<ul><li>What is Blockchain?<\/li><li>What is Ethereum?<\/li><li>What is a Smart Contract?<\/li><li>What is Solidity?<\/li><li>What are dApps?<\/li><li>What is Remix IDE?<\/li><li>What is web3.js?<\/li><li>What is MetaMask?<\/li><li>Hands-On<\/li><li>Conclusion<\/li><\/ul>\n\n\n\n<h2>What is Blockchain?<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">If you&#8217;ve ever wondered what blockchain is and what it can be used for, you&#8217;re not alone. There are many misconceptions surrounding technology.&nbsp;<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Blockchain is a&nbsp; decentralized database that isn&#8217;t maintained by a single administrator but by several computers, or &#8220;nodes,&#8221; in a network. Each &#8220;block&#8221; of data is an individual file that is updated by all the nodes, which updates an identical ledger. Unlike other systems, blockchain transactions are extremely fast. As long as there is no third-party interference, the transactions can be completed in a matter of seconds. Following are some of its benefits:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/PQaqmFqEfEZlWPTySsOxS0l6Q8aGDb7ALLGMWW6WnIW-JqbDIXPwdglucNuDw_mkIiOcpELvi_-dGXaoHpuJJUB9Ckz7ov57MrgsrHGF16zKNyZRzTb6u4joyTflsGRHWJc6-GU\" alt=\"How to build and deploy dApps using Solidity Smart contract, WEB3.JS &amp; React.JS?\"\/><\/figure>\n\n\n\n<h2>What is Ethereum?<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">Ethereum is an open-source, decentralized blockchain with smart contract capabilities. Computers within this network verify transactions and ensure the integrity of the data.&nbsp;<\/p>\n\n\n\n<p class=\"has-text-align-justify\">The decentralized nature of the network is part of what makes cryptocurrencies so appealing. The currency has no central bank or intermediary, and allowing anonymous transactions makes it highly attractive. The benefits of Ethereum are numerous. They make money exchange incredibly easy, but also allow privacy and security.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">This means that anyone can run applications, make payments, and perform other tasks using ETH. There are many ways to use this type of currency.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">The following image shows the real-world applications of Ethereum:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/77ORISFlaq5FpJsJhX2C9VPukf3IvizC0q4KHzJOCharaZdUDyU98jKgjw40_uJd3uszmlZIRjlz1YFUF2bve9w-6596G6mYK-cLKRqgokVie1dXDnRpvv0cNZH0m4nQZVJJYVY\" alt=\"\"\/><\/figure>\n\n\n\n<h2>What is a Smart Contract?<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">Smart contracts are the fundamental building blocks of Ethereum applications. They are computer programs stored on the blockchain that allows us to convert traditional contracts into digital parallels. Smart contracts are very logical &#8211; following an \u201cif this then that\u201d structure. This means they behave exactly as programmed and can&#8217;t be changed.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Smart contracts are made up of basic &#8220;if\/when&#8230;then&#8230;&#8221; assertions expressed in code on a blockchain. When preset circumstances are satisfied and validated, the activities are performed by a network of computers.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">For the Ethereum platform, the smart contracts are defined using a language called Solidity. In this blog, we will be creating a Smart Contract using Solidity as part of hands-on.&nbsp;<\/p>\n\n\n\n<p class=\"has-text-align-justify\">The following image shows how Smart Contracts work:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/GtjWZ0Qp4mOr5L-dVF-01b_xiXNIQNePGD-E0ebKLnwd-30WortIFK_jOpTBZupiJMksN5VelISRPqHlUPvmVOispmbZ4gksXWiLUls_Dbv65KvOBqihdIG7YggyGZmJVL5Fi8E\" alt=\"How to build and deploy dApps using Solidity Smart contract, WEB3.JS &amp; React.JS?\"\/><\/figure>\n\n\n\n<p>Let&#8217;s understand it with this simple example:<\/p>\n\n\n\n<p class=\"has-text-align-justify\">John is interested in purchasing Mike&#8217;s home. A smart contract is used to create this agreement on the Ethereum blockchain. An agreement between John and Mike is included in this smart contract.&nbsp;<\/p>\n\n\n\n<p class=\"has-text-align-justify\">The agreement will read something like this: &#8220;WHEN John pays Mike 300 Ether, THEN John will get ownership of the house&#8221;. This smart contract arrangement can&#8217;t be altered after it&#8217;s been set up, so John may feel safe paying Mike 300 Ether for the house. Mike and John would have to pay a lot of fees to third-party companies if they didn&#8217;t employ a smart contract. The bank, a lawyer, and a real estate broker are all involved.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Isn&#8217;t it fantastic? No more commissions and no more waiting for the agreement to be processed by a lawyer and broker! This is just one of many potential uses of a smart contract.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Smart contracts are quickly implemented once the terms of the agreement are met. This eliminates the need for a third party such as a bank, broker, or government.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">The following image shows the benefits of Smart Contracts:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/_um9otpdRp48kubrW_l1eEshFFq5MRawGt2U3AzHw7u0Nw_jYBuubo3bCPpdwID452asSw4iXMvv-xiLI7EyJdMB5sUbQxS_5krJEt37UsFlM6mXRNy4GGDXqyAMHPtI4FSKlCs\" alt=\"\"\/><\/figure>\n\n\n\n<h2>What is Solidity?<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">Solidity is the most widely used high-level object-oriented programming language for writing code on Ethereum to create smart contracts. Once the developers have created their code using Solidity, one of the major components that help the execution of this solidity code is EVM i.e., Ethereum Virtual Machine.<\/p>\n\n\n\n<p>The following image shows the advantages of Solidity:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/zUzaJ_wT8ZJVrkUylNCw7ZTdsP_o_RGWD_rQIpVCVNt6jbhA7jLcA0wnLnxgTHg5efGTeRwatX3reRhRXz73mhlcUUxLg_ZOz2v8GALqlItoKUtUbskQ3d-mPTCwTty06iHR_Qc\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">Solidity enables the creation of safe, transparent, and reliable smart contracts. They can improve operating efficiency, reduce administrative costs, and reduce reliance on third parties if effectively implemented.<\/p>\n\n\n\n<h2>What are dApps?<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">A decentralized application (dApp) is an application built on a decentralized network that combines a smart contract and a frontend user interface. A dApp can use blockchain to process data and perform transactions over distributed networks. The Ethereum platform is also frequently used to create dApps.&nbsp;<\/p>\n\n\n\n<p class=\"has-text-align-justify\">They are very similar to software apps that run on a website or on a mobile device, but they are peer-to-peer (P2P). On Ethereum, smart contracts are accessible and transparent like open APIs, so dApp can even include a smart contract that someone else has written. This means others can build on top of the codebase once it has been released. There is no single authority that controls the app. The following image shows major characteristics of dApps:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/eLWUff8nLwPaHTO6On6rr_c9vTnDxBi5uJeHwOkZ21BgZVHISOgqE4hlta9BLf0qxcubViAaXHBrrMWENNp2z1kQ_NErPgZLNplyFkBSIinF-iNo3lPuV7_4QGUhuNG0N4nb9TU\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">dApps in the financial realm may seem obvious, but they can truly innovate across industries as shown in the following image:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/dlhMjXE9UC4Vzzi_UF2ZqFDyMqgO3ZWyBEg4cEU8dvP5ZV22jIXqNmphgn9f6aX7S0w5QDCLztAVye4NGGpJolEedBJDrEuhXgcJUUkYKrl111b5_0nFnfOXHO-CwuqkhRIjJR0\" alt=\"\"\/><\/figure>\n\n\n\n<p>The following image shows a few top leading dApps in the world:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/h4uhmut6_kFvX7AQoCKAZp8NiW0OYq_QJpgewmr2EiuelxQw4gVPkn-8bUkrdTha-hiB9k3P1W5GxeLLpTeU__dLDXo8g4d5BmX-UtREO1oUcEy4rzv0R-Z7s2wflBjZ9ZiFAoI\" alt=\"\"\/><\/figure>\n\n\n\n<p>The following image shows the process of developing a dApp:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/88hEp_OrjpzJuiP6nJaftA6WrdKm-kyrN2mGQGqiGdqaX_s01Sa2KlBe5MF55QCyzfp-nYhDQdWAe5KK2Kx9WOTjtMfVVEONX9Solx9VJg5f-oSkcKE60-m_3wS5eAFJWdGrDwk\" alt=\"\"\/><\/figure>\n\n\n\n<ul><li><strong>Prototype and Whitepaper: <\/strong>First and foremost, a whitepaper describing the dApp and its features are released. This whitepaper not only defines the dApp development concept but also includes a functional prototype.<\/li><li><strong>Sale of Tokens: <\/strong>The first token sale has been scheduled.<\/li><li><strong>Initial Coin Offering (ICO): <\/strong>The dApp&#8217;s ownership stake is distributed.<\/li><li><strong>Launch and Implementation: <\/strong>The final step is to invest the funds in the creation and deployment of the dApp.<\/li><\/ul>\n\n\n\n<h2>What is Remix IDE?<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">Remix IDE allows developing, deploying, and administering smart contracts for Ethereum-like blockchains. It is an open-source web and desktop application that fosters a fast development cycle. Remix is used for the entire journey of contract development as well as acts as a playground for learning and teaching Ethereum. The following image shows the major benefits of using Remix IDE:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/D4L1qIancpvjWHfxMNTWcMrCo3RlCYQxRmKZSdc0YZVA8D0LKKQCwPJit3-DhMJxBgQ76Ahhr3Q0F97fYtEpVwH3eOaio8i3682Sq3MkIORRmupiuQwQlOJHjETGulnqJvbVkWs\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">Remix IDE includes a large number of functionalities apart from the main obvious functionalities such as compiling, deploying, and running smart contracts. These other functionalities are provided by Remix IDE in the form of a rich set of plugins and contribute to a better experience for a developer in coding smart contracts with intuitive GUIs. It helps in:<\/p>\n\n\n\n<ul><li>To see their execution control graphs.<\/li><\/ul>\n\n\n\n<ul><li>Analyze the smart contract code.<\/li><\/ul>\n\n\n\n<ul><li>Documentation of the code and protect the code from odd smart contract execution due to Solidity and blockchain distinctive features.<\/li><\/ul>\n\n\n\n<h2>What is web3.js?<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">The web3 JavaScript library interacts with the Ethereum blockchain. is a collection of libraries that allow you to interact with a local or remote Ethereum node using HTTP, IPC, or WebSocket. It can retrieve user accounts, send transactions, interact with smart contracts, and more.<\/p>\n\n\n\n<h2>What is MetaMask?&nbsp;<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">MetaMask is a wallet that is only compatible with the Ethereum blockchain.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">They are digital storage units for your digital money. This software program is designed to store your private keys, which you will need to use to send and receive cryptocurrencies.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">It also acts as a proof-of-ownership system for these assets, which are not in physical form. There are many different types of crypto wallets, including hardware wallets, mobile wallets, and paper wallets.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Like a traditional bank account, a crypto wallet holds your private keys and gives you access to the blockchain network. These wallets are also designed to be secure, as only you can access them. If you use a compromised wallet, you could lose all of your cryptocurrency. The following image shows features of MetaMask:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/Egf72mNhnlUCaXHAbvJ8Qle4uCDmxh_m2KFGdzqHEB8fURdqwO6uW_iot4RVYEEwJs92Crtkk9OZT3FK0X_Ib4A-kOv_FWgpEtHmDNpLo6A_kofihE5v4qopNub8qzj_9f1JXAk\" alt=\"\"\/><\/figure>\n\n\n\n<p>The following image shows major use cases of MetaMask:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/YkI8lEY03zdyNMMYVCspoambUVBvqJDhHLsX1WzOZiCCyhk89woQROoV2PeFOFbi0vvYDrm8T1oQQLe9sJ1Hnq63G-S8_dZuc7YR8F1D1rQsscCccFMZqoDX20KlVT4UcPWpiQA\" alt=\"\"\/><\/figure>\n\n\n\n<h2>Hands-On<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">Now you are aware of all concepts including Blockchain, Ethereum, Smart Contracts, dApps, etc. Now let\u2019s do a small implementation. In this hands-on we will be doing the followings:<\/p>\n\n\n\n<ul><li>Creating Solidity smart contract using Remix IDE<\/li><li>Deploying Smart Contract to the Rinkeby Testnet.&nbsp;<\/li><li>Build a front-end React app and connect it with the smart contract that we had deployed using web3.js.<\/li><\/ul>\n\n\n\n<p class=\"has-text-align-justify\">You can download the complete source code of this hands-on from our GitHub repository. Here is the link for your reference:&nbsp;<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/workfall\/dapps-react-web3js-solidity\">https:\/\/github.com\/workfall\/dapps-react-web3js-solidity<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/iJ0jyEzSSjRVXsxe98mYHQ3c11aFl2eT1-kCm6BbN9JauueZY9254U5C9nRhp3nwnJzzEyGZJ2uG_NJzs7W0ImEEJqNY6ncFNOOZA18s2ORv5Az4sel8O5NK3cRXBe-UfilJuYs\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>Create a Solidity smart contract with Remix IDE<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">Now that we have a basic understanding of the concepts we can start writing the code. The best thing about Remix IDE is everything will be done directly in your browser. Thus, you don\u2019t require to set up anything new separately in your environment. So, the game plan for this section is very simple. Write a very simple smart contract code using solidity programming language and somehow deploy it to the blockchain!<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/kiJYTAJ2PxyjM5FvC_von2DFHclxEK1YFY6q_4ncAHKM4Wunx_Lou-rekZbCHpgJI6tp5otbBCrH_FXCkhK03Gb-RZCMb4HypJpY2_krZaj33KFH3BdTGYPwNueioSkoLnRC3s4\" alt=\"How to build and deploy dApps using Solidity Smart contract, WEB3.JS &amp; React.JS?\"\/><\/figure>\n\n\n\n<p>As seen in the above image, this IDE has three main tabs:&nbsp;<\/p>\n\n\n\n<p class=\"has-text-align-justify\"><strong>File Explorers:<\/strong> as seen in the picture above. This is where we&#8217;re going to write our smart contract and its test file. It should be pre-filled with some files already. Feel free to go through them.<\/p>\n\n\n\n<p class=\"has-text-align-justify\"><strong>Solidity Compiler:<\/strong> This is where we will compile our smart contract, once it is ready.<\/p>\n\n\n\n<p><strong>Deploy &amp; Run Transaction:<\/strong> Where we will send our smart contract to the Blockchain.<\/p>\n\n\n\n<p>There is not much more to add than this for now. Let&#8217;s start writing our contract!<\/p>\n\n\n\n<p><strong>Create a Smart Contract<\/strong><\/p>\n\n\n\n<p>Create a new file in the contracts folder and name it <strong><em>BasicSmartContract.sol<\/em><\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">This is a very simple Smart contract that allows us to read some data and allows us to write some data to the contract.<\/p>\n\n\n\n<p>(Note: you can find this file here: <a href=\"https:\/\/github.com\/workfall\/dapps-react-web3js-solidity\">dapps-react-web3js-solidity<\/a>\/contracts\/)&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/EBsZYDR9Ts3OAtBJfsaGqpKapIN6kNEqnfBwSjfEGKOkNkMms4quN4YxsFRaPwj-oRaZnwy6i16WUvKeqjGum7uYdnFTmFfIjdKF-SS1rl7iHw4Yt-xofc6UvWtJk69_qLiD084\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>Compile a Smart Contract<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">We had written our smart contract. Now, it&#8217;s time to compile it! Keep the <strong><em>BasicSmartContract.sol<\/em><\/strong> file open and click on the Solidity Compiler tab in the sidebar.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/SEopVLN14ypHwzBK9P5u8oinleUZlcag6nad_HAKYimieO9ORcazIVU9oHDXUo15s-oH9l0BggBJexSdDiXVMj8pl8JNwCvTJNkaa0HQdwLJ-HjDEqybye0qjDN9fpq3cQZLVyk\" alt=\"How to build and deploy dApps using Solidity Smart contract, WEB3.JS &amp; React.JS?\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">There are a few options that can affect how the contract is compiled but selected ones are already fine. Just make sure that the compiler version that you&#8217;ve selected should be higher than <strong><em>0.8.4<\/em><\/strong>. Let&#8217;s go ahead and click <strong><em>Compile BasicSmartContract.sol<\/em><\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">After compiling the contract, if you see a green tick on the Solidity Compiler tab in the sidebar that means the contract is compiled and we are ready to deploy it to the blockchain!<\/p>\n\n\n\n<p><strong>Deploy our Smart Contract to the Rinkeby Test Network<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">We had compiled our Smart Contract. Now, it&#8217;s time to deploy it to the blockchain.<\/p>\n\n\n\n<p>Click the <strong><em>Deploy &amp; Run transactions<\/em><\/strong> tab in the sidebar.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/NvpkyUVbrr94l-g1mgPTFRtWH4SmDpP9tyC8f_NBGo9OkEvl4RFeQbIVhrIpZX1RXWIfH-8Dttuwn4DmXftq4Ud9HwerdxPq-_LFCvE9Qm1cATjepDugVdo8xmlUSDlOiz3yKFQ\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">There are a few options that can affect where we really want to deploy our contract on the local blockchain (only you can interact with the contract) or to the Ethereum Blockchain (testnet) so that anyone can interact with it.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">We are going to deploy it to the Ethereum Blockchain so inside the ENVIRONMENT field select Injected Web3. This will popup your MetaMask and ask you for approval, just confirm it.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">After that click on the Deploy button. Again, MetaMask will pop up and ask you to pay the gas fee to deploy the contract. Approve that transaction<\/p>\n\n\n\n<p class=\"has-text-align-justify\">At the bottom of the Remix IDE you&#8217;ll see the link of Etherscan.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/fQ0RE5AifVCTrZDk-5m0HdK88AZS6ax3lJStIkMWQcZossGrTYGTxsnIjLgAGvUVNzhr-KKwvPN2Jjz4DILR0H-nIfvOoKVAEjfKFZJf4XLgBiqtzJY3_EKQws_w8ujFpAzxyDE\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">Wait for the transaction to complete. This may take around 30s to complete. After that, the terminal displays a success message.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/p4QtAeQTC3lWaQC0HF4KUHSZSWz18kW_vTtghivGfRBW3RhSZ0DDuYjVHJCNk9qvVfij4HteBmXIcQ6cmSMfOj_y-GaWT3kknFGHbYvWAJkdMQ_YSfYkGsAGCRm5Y3cw8St5rjM\" alt=\"How to build and deploy dApps using Solidity Smart contract, WEB3.JS &amp; React.JS?\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">After the transaction is confirmed click the \u2018view on etherscan, which should lead you to the transaction page as follows:<\/p>\n\n\n\n<p>Wait for the transaction Status: <strong>Success<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/dK1arR9F8yFToN8eg4ydJRKF-O4K6FzF48iCdYFS2ErF_06n3Ea_gdb5TYCM8zB3wJG5n3QbZbvE8bdm-xe7ZZwDKF_UpsdZQ8ZPJtoyFYgbUfOidxW1K_oHsGxHmONpRE5BudM\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">Click on the contract address to access the smart contract details. There, you will see all the transactions ever made with your contract. For now, there should be only the contract creation transaction.<\/p>\n\n\n\n<p>Congratulations, you&#8217;ve deployed a smart contract to Rinkeby!<\/p>\n\n\n\n<p>Now, we have deployed our contract. Next, we shall move to the React part.<\/p>\n\n\n\n<p><strong>Create a basic React JS web page<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">Building our web application with React from scratch includes lots of complexity. So, we are using a react framework <strong>Next.Js<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">To create a Next.js app, open your terminal, <strong><em>cd<\/em><\/strong> into the directory you&#8217;d like to create the app in, and run the following command:<\/p>\n\n\n\n<p><strong><code>npx create-next-app<\/code><\/strong><\/p>\n\n\n\n<p>After that, you&#8217;ll be asked to enter your project name. Enter the name you want and press <strong><em>Enter<\/em><\/strong>&nbsp;&nbsp;<\/p>\n\n\n\n<p>This will take a few minutes to download all the required dependencies.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/h45v1p06wNW_ILnaBc_X_C5skWz_bIBmDPy_5wDaygiar-5crT5qKKP0Pnh-UcKPSGhiQ8m0PjjesW-zHd0305W2ZJNdNGwzf1eT7PlgjOHhaCZZTKongnNdEW8BPTOWUGKSKi4\" alt=\"How to build and deploy dApps using Solidity Smart contract, WEB3.JS &amp; React.JS?\"\/><\/figure>\n\n\n\n<p><strong>Run the development server<\/strong><\/p>\n\n\n\n<p>You now have a new directory called <strong><em>web3js-tutorial<\/em><\/strong>. Let\u2019s make this directory as current working directory using the following command:<\/p>\n\n\n\n<p><strong><code>cd web3js-tutorial<\/code><\/strong><\/p>\n\n\n\n<p>Then, run the following command to start the local development server.<\/p>\n\n\n\n<p><strong><code>npm run dev<\/code><\/strong><\/p>\n\n\n\n<p>Let&#8217;s check to see if it&#8217;s working. Open <strong><em>http:\/\/localhost:3000\/<\/em><\/strong> from your browser.<\/p>\n\n\n\n<p>Now let&#8217;s install <strong><em>web3<\/em><\/strong><\/p>\n\n\n\n<p><strong><em>npm install web3<\/em><\/strong><\/p>\n\n\n\n<p>Now go to <strong><em>pages\/index.js<\/em><\/strong> and add code as shown in the following image.&nbsp;<\/p>\n\n\n\n<p>(Note: you can get this code from <a href=\"https:\/\/github.com\/workfall\/dapps-react-web3js-solidity\"><strong>dapps-react-web3js-solidity<\/strong><\/a><strong>\/<\/strong><a href=\"https:\/\/github.com\/workfall\/dapps-react-web3js-solidity\/tree\/main\/pages\"><strong>pages<\/strong><\/a><strong>\/<\/strong>index.js)<strong>&nbsp;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/CwtyvQOGuqBn7qXQtcPLb09A_FSK7LIdKFR9rUe5KC9sBYpQuEr4xy1gZ0g24PPS7qdhI9Q7uR4KZu-KbBv-gi7uEuGzUFvxYwXwAHn-NhfegPhYp7UqyPB72hWTw2hes6sc-mY\" alt=\"How to build and deploy dApps using Solidity Smart contract, WEB3.JS &amp; React.JS?\"\/><\/figure>\n\n\n\n<p><strong>Providers and signers<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/hPku9rYBxoTRXsRocPzd_QxgAXhZfPhMA_62H8qrlfXP8AOVTQCTx0En2oK-ihFTVChxs399Atk4X1rcwB_AWQ5i6wuLHZyrGgkb35Oer06msFMod5AzafXmV_FbX0e7LA9Subw\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">A <strong><em>Provider<\/em><\/strong> is an Ethereum node connection that allows you to read data from its state. You will use a provider to do things like calling read-only functions in smart contracts, fetching balances of accounts, fetching transaction details, etc.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">A <strong><em>Signer<\/em><\/strong> can do everything a Provider can. You can do both, reading and writing, using a Signer, but a Provider is only good for reading data.<\/p>\n\n\n\n<p><strong>web3.eth.Contract<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/kI9W7YTJujhsIfRpH9DdvuAtUtKqUrV9UN6m_BiXXA5MYYKZaGz8j8DlU4o-ky8MtmmvMMIxA9n-xIxjF1WozeCCKj3QFmXvGijv9W5JXyYXBBCNYnzfc6f5eph59PlbfZ8ao3Y\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">The <strong><em>web3.eth.Contract<\/em><\/strong> object makes it easy to interact with smart contracts on the Ethereum blockchain. When you create a new contract object you give it the JSON interface of the respective smart contract and web3 will auto convert all calls into low-level ABI calls over RPC for you.<\/p>\n\n\n\n<p><strong>methods.stateVariable.call<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">Will call a &#8220;constant&#8221; method and execute its smart contract method in the EVM without sending any transaction.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/SWMhM_7TQc7PnnfGUeezJQZVlBjbZebgFNzkTXFSjAkXCHfajRaHt3QO1Adz1vigV4zcdz6hwfTTO4IHvxO3o7WkDTb9uH2qIrKi60tDQOSPe1n7iAbQtzv_LDuIRXancftnscc\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>methods.ChangeState.send<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">Will send a transaction to the smart contract and execute its method. Note this can alter the smart contract state. And for that, we have to pay some gas fees.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/y9GHTTeP3KkX9aNNGghPq5FB4CRx2_CtFbZ3Fyk8SW3mKi6_B6rWIvUbG0QLx5NycKLxepaUw8rTiXUWPCMwJj5DkTZJjGYU3bjkKXQL_eMB6G4AQG6fkZXLmfewGqBiIpnfeLg\" alt=\"\"\/><\/figure>\n\n\n\n<p>When you call this function you&#8217;ll be asked to make a transaction to pay the gas fees.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">After that go to the styles folder and replace all the contents of <strong><em>globals.css<\/em><\/strong> file with the following code, this would add some styling to your dApp:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/fxhDsRhH8BlXFLNrxtiH_0PP5XBRqYbWLGNd6_TnqYgXylgxYRZijcBg8GfXYJZ_CSW9mF5LgY5HsUic-2GUNWCMg_XmVZmpFPIk25WOily5Sv58ioydzBqrkxypWNPtH9xN8KI\" alt=\"How to build and deploy dApps using Solidity Smart contract, WEB3.JS &amp; React.JS?\"\/><\/figure>\n\n\n\n<p>Now create a new folder under the <strong><em>web3js-tutorial<\/em><\/strong> folder and name it constants<\/p>\n\n\n\n<p>In the constants folder, create a file <strong><em>index.js<\/em><\/strong>, and write the following code.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/V0iQgESAPh9bhgsRC6fw_4LBRtqg6oGzn-4Mynbkh9JUgyrxKQV3zHI3UzSKQUfy6FlbSmIoN91nybae2xkcGzOC_lyLBThgYagcyxKvbeLnMHx0_5UvWh9yoWvkgpKtevc8Z1A\" alt=\"\"\/><\/figure>\n\n\n\n<p>Replace the &#8220;<em>address of your contract<\/em>&#8221; with the address of the contract that you deployed.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Replace`<em>&#8211;your abi&#8211;<\/em>` with the abi of your Contract. To get that abi open Remix IDE to go to the compiler tab, scroll a bit you&#8217;ll get the abi copy it, and replace it with the <em>&#8220;&#8211;your abi&#8211;<\/em>&#8220;;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/fBNKHX35vYmUu_d7FMKVuEUwlmx18ggW2WNADxgTAtQ-u06Hf67tc9ZlJjZQOXM1lJKM5rbQQsbXCcVwIFOp4IwexmoYDqvqI6JxETtsRdZAJsLFSu3iQhze2TCkUQw-t5fQRYY\" alt=\"How to build and deploy dApps using Solidity Smart contract, WEB3.JS &amp; React.JS?\"\/><\/figure>\n\n\n\n<p>Now in your terminal which is pointing to <strong><em>web3js-tutorial<\/em><\/strong> folder, execute<\/p>\n\n\n\n<p><strong><em>npm run dev<\/em><\/strong><\/p>\n\n\n\n<p>Your dApp should now work without errors\ud83d\ude80<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/EpYqAXvtNCsmWnDbY-vWlGjJanwg4LDkdIsnA8IcSiilTmJTbEilQEqS1pP-dCok9IkwBKpPvv4VtCfJ62rZBfewCfaVVYPd6_FAjwg_IFIzmj2QkSR7aUFTmQskkyixrz5TOs0\" alt=\"How to build and deploy dApps using Solidity Smart contract, WEB3.JS &amp; React.JS?\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">This is what it looks like. At first, you&#8217;ll be asked to connect your MetaMask to interact with the contract. Just confirm it and you are ready to interact with your contract using the React.JS application.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">If you made it at this point in this blog then congratulations, you have built a dApp with the smart contract and web app that interacts with your smart contract on the blockchain.&nbsp;<\/p>\n\n\n\n<h2>Conclusion<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">In this blog, we have discussed dApps, blockchain, web3.js, smart contracts, MetaMask,&nbsp;Ethereum, and many other topics which are major components of dApps developments. We have also demonstrated how to build and deploy dApps using Solidity Smart Contract, web3.js &amp; React.JS. In this demonstration, we have used the Remix IDE to write, compile, and deploy a Solidity Smart Contract. Then we created a simple web interface using React.JS. And with the help of web3.js we interacted with our deployed smart contract. Now that you know how to retrieve information from the smart contract, go ahead and improve this further by adding new contracts, updating them, and deleting them with full CRUD operations.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">We will come up with more such use cases in our upcoming blogs. Stay tuned to keep getting all updates about our upcoming new blogs on AWS and relevant technologies.&nbsp;<\/p>\n\n\n\n<p>Meanwhile&#8230;<\/p>\n\n\n\n<p><strong>Keep Exploring -&gt; Keep Learning -&gt; Keep Mastering<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">This blog is part of our effort towards building a knowledgeable and kick-ass tech community. At <a href=\"https:\/\/www.workfall.com\/\">Workfall<\/a>, we strive to provide the best tech and pay opportunities to AWS-certified talents. If you\u2019re looking to work with global clients, build kick-ass products while making big bucks doing so, give it a shot at <a href=\"https:\/\/www.workfall.com\/partner\/\">workfall.com\/partner<\/a> today.<\/p>\n\n\n\n<p><\/p>\n\n\n<style type=\"text\/css\"><\/style><section id='' \n                class='helpie-faq accordions faq-toggle open-first groupSettings-544__enabled' \n                data-collection='' \n                data-pagination='0' \n                data-search='0' \n                data-pagination-enabled='0'\n                role='region'\n                aria-label='FAQ Section'\n                aria-live='polite'><h3 class=\"collection-title\">Frequently Asked Questions:<\/h3><article class=\"accordion \"><div class='helpie-faq-row'><div class='helpie-faq-col helpie-faq-col-12' ><ul><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-3138\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-3138\"\r\n                data-id=\"post-3138\" \r\n                data-item=\"hfaq-post-3138\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q1. What is a DApp?<\/div><\/div><div id=\"accordion-content-post-3138\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-3138\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">12<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><span style=\"font-weight: 400\">\u00a0A DApp (Decentralized Application) runs on blockchain technology instead of centralized servers, offering transparency and immutability.<\/span><\/p>\n<\/div><\/li><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-3139\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-3139\"\r\n                data-id=\"post-3139\" \r\n                data-item=\"hfaq-post-3139\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q. What is the role of Solidity in DApps?<\/div><\/div><div id=\"accordion-content-post-3139\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-3139\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">12<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><span style=\"font-weight: 400\">\u00a0Solidity is used to write smart contracts \u2014 the backend logic of DApps that run on Ethereum Virtual Machine (EVM).<\/span><\/p>\n<\/div><\/li><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-3140\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-3140\"\r\n                data-id=\"post-3140\" \r\n                data-item=\"hfaq-post-3140\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q. How does Web3.js interact with smart contracts?<\/div><\/div><div id=\"accordion-content-post-3140\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-3140\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">12<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><span style=\"font-weight: 400\">\u00a0Web3.js provides JavaScript APIs to connect React frontends with the Ethereum blockchain, enabling functions like reading and writing contract data.<\/span><\/p>\n<\/div><\/li><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-3141\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-3141\"\r\n                data-id=\"post-3141\" \r\n                data-item=\"hfaq-post-3141\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q. How do you deploy a DApp?<\/div><\/div><div id=\"accordion-content-post-3141\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-3141\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">12<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><span style=\"font-weight: 400\">\u00a0You deploy the smart contract using tools like Truffle or Hardhat, connect it to MetaMask, and host the React frontend on services like Netlify or IPFS.<\/span><\/p>\n<\/div><\/li><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-3142\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-3142\"\r\n                data-id=\"post-3142\" \r\n                data-item=\"hfaq-post-3142\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q. What are the security considerations for DApps?<\/div><\/div><div id=\"accordion-content-post-3142\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-3142\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">12<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><span style=\"font-weight: 400\">\u00a0Audit smart contracts for vulnerabilities, avoid reentrancy attacks, and use tools like MythX or OpenZeppelin for secure development.<\/span><\/p>\n<\/div><\/li><\/ul><\/div><\/div><\/article><\/section>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">12<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span> Augur, OpenSea, PancakeSwap, etc. are all buzzwords that one might hear when we talk about blockchain technology. Why? \ud83e\udd14 This is because they represent a novel way of interacting with personal finance. There are many dApps in the blockchain ecosystem that help individuals and companies conduct transactions for various reasons like the ones mentioned. Many [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":942,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[289],"tags":[137,286,278,279,274,283,281,138,282,263,285,265,250,276,287,280,275,284,277,6],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to build and deploy dApps using Solidity Smart contract, WEB3.JS &amp; React.JS? - The Workfall Blog<\/title>\n<meta name=\"description\" content=\"There are many dApps in the blockchain ecosystem. Many of these dApps are built to run on the Ethereum platform.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to build and deploy dApps using Solidity Smart contract, WEB3.JS &amp; React.JS? - The Workfall Blog\" \/>\n<meta property=\"og:description\" content=\"There are many dApps in the blockchain ecosystem. Many of these dApps are built to run on the Ethereum platform.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/\" \/>\n<meta property=\"og:site_name\" content=\"The Workfall Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/workfall\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-17T07:56:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-06T07:25:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/wp-content\/uploads\/2022\/05\/Cover-Images_Part2-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@workfall\" \/>\n<meta name=\"twitter:site\" content=\"@workfall\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Workfall\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#organization\",\"name\":\"Workfall - Hire #Kickass Coders On Demand\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/\",\"sameAs\":[\"https:\/\/www.instagram.com\/workfall\/\",\"https:\/\/www.linkedin.com\/company\/workfall\/\",\"https:\/\/facebook.com\/workfall\",\"https:\/\/twitter.com\/workfall\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400\",\"contentUrl\":\"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400\",\"width\":400,\"height\":400,\"caption\":\"Workfall - Hire #Kickass Coders On Demand\"},\"image\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#website\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/\",\"name\":\"The Workfall Blog\",\"description\":\"#Tech #Remote #Jobs\",\"publisher\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/learning.workfall.com\/learning\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/#primaryimage\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/05\/Cover-Images_Part2-2.png\",\"contentUrl\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/05\/Cover-Images_Part2-2.png\",\"width\":1200,\"height\":628,\"caption\":\"How to Build and Deploy dApps\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/#webpage\",\"url\":\"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/\",\"name\":\"How to build and deploy dApps using Solidity Smart contract, WEB3.JS & React.JS? - The Workfall Blog\",\"isPartOf\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/#primaryimage\"},\"datePublished\":\"2022-05-17T07:56:45+00:00\",\"dateModified\":\"2025-10-06T07:25:47+00:00\",\"description\":\"There are many dApps in the blockchain ecosystem. Many of these dApps are built to run on the Ethereum platform.\",\"breadcrumb\":{\"@id\":\"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/learning.workfall.com\/learning\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to build and deploy dApps using Solidity Smart contract, WEB3.JS &#038; React.JS?\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/#webpage\"},\"author\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a\"},\"headline\":\"How to build and deploy dApps using Solidity Smart contract, WEB3.JS &#038; React.JS?\",\"datePublished\":\"2022-05-17T07:56:45+00:00\",\"dateModified\":\"2025-10-06T07:25:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/#webpage\"},\"wordCount\":2852,\"publisher\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/05\/Cover-Images_Part2-2.png\",\"keywords\":[\"blockchain\",\"blockchaintechnology\",\"crypto\",\"cryptowallet\",\"dApps\",\"deploy\",\"ether\",\"ethereum\",\"etherscan\",\"json\",\"metamask\",\"node\",\"nodeJS\",\"reactjs\",\"remixide\",\"rpc\",\"smartcontracts\",\"solidity\",\"web3\",\"workfall\"],\"articleSection\":[\"Frontend Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a\",\"name\":\"Workfall\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png\",\"contentUrl\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png\",\"caption\":\"Workfall\"},\"sameAs\":[\"https:\/\/www.workfall.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to build and deploy dApps using Solidity Smart contract, WEB3.JS & React.JS? - The Workfall Blog","description":"There are many dApps in the blockchain ecosystem. Many of these dApps are built to run on the Ethereum platform.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/","og_locale":"en_US","og_type":"article","og_title":"How to build and deploy dApps using Solidity Smart contract, WEB3.JS & React.JS? - The Workfall Blog","og_description":"There are many dApps in the blockchain ecosystem. Many of these dApps are built to run on the Ethereum platform.","og_url":"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/","og_site_name":"The Workfall Blog","article_publisher":"https:\/\/facebook.com\/workfall","article_published_time":"2022-05-17T07:56:45+00:00","article_modified_time":"2025-10-06T07:25:47+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/wp-content\/uploads\/2022\/05\/Cover-Images_Part2-2.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@workfall","twitter_site":"@workfall","twitter_misc":{"Written by":"Workfall","Est. reading time":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#organization","name":"Workfall - Hire #Kickass Coders On Demand","url":"https:\/\/learning.workfall.com\/learning\/blog\/","sameAs":["https:\/\/www.instagram.com\/workfall\/","https:\/\/www.linkedin.com\/company\/workfall\/","https:\/\/facebook.com\/workfall","https:\/\/twitter.com\/workfall"],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400","contentUrl":"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400","width":400,"height":400,"caption":"Workfall - Hire #Kickass Coders On Demand"},"image":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#website","url":"https:\/\/learning.workfall.com\/learning\/blog\/","name":"The Workfall Blog","description":"#Tech #Remote #Jobs","publisher":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/learning.workfall.com\/learning\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/#primaryimage","url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/05\/Cover-Images_Part2-2.png","contentUrl":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/05\/Cover-Images_Part2-2.png","width":1200,"height":628,"caption":"How to Build and Deploy dApps"},{"@type":"WebPage","@id":"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/#webpage","url":"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/","name":"How to build and deploy dApps using Solidity Smart contract, WEB3.JS & React.JS? - The Workfall Blog","isPartOf":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/#primaryimage"},"datePublished":"2022-05-17T07:56:45+00:00","dateModified":"2025-10-06T07:25:47+00:00","description":"There are many dApps in the blockchain ecosystem. Many of these dApps are built to run on the Ethereum platform.","breadcrumb":{"@id":"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/learning.workfall.com\/learning\/blog\/"},{"@type":"ListItem","position":2,"name":"How to build and deploy dApps using Solidity Smart contract, WEB3.JS &#038; React.JS?"}]},{"@type":"Article","@id":"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/#article","isPartOf":{"@id":"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/#webpage"},"author":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a"},"headline":"How to build and deploy dApps using Solidity Smart contract, WEB3.JS &#038; React.JS?","datePublished":"2022-05-17T07:56:45+00:00","dateModified":"2025-10-06T07:25:47+00:00","mainEntityOfPage":{"@id":"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/#webpage"},"wordCount":2852,"publisher":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#organization"},"image":{"@id":"https:\/\/18-141-20-153.plesk.page\/learning\/blog\/how-to-build-and-deploy-dapps-using-solidity-smart-contract-web3-js-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/05\/Cover-Images_Part2-2.png","keywords":["blockchain","blockchaintechnology","crypto","cryptowallet","dApps","deploy","ether","ethereum","etherscan","json","metamask","node","nodeJS","reactjs","remixide","rpc","smartcontracts","solidity","web3","workfall"],"articleSection":["Frontend Development"],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a","name":"Workfall","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/image\/","url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png","contentUrl":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png","caption":"Workfall"},"sameAs":["https:\/\/www.workfall.com"]}]}},"jetpack_featured_media_url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/05\/Cover-Images_Part2-2.png","jetpack-related-posts":[{"id":1545,"url":"https:\/\/learning.workfall.com\/learning\/blog\/roadmap-to-become-a-blockchain-developer-in-2023\/","url_meta":{"origin":941,"position":0},"title":"Roadmap to Become a Blockchain Developer in 2023","date":"January 10, 2023","format":false,"excerpt":"Blockchain technology has emerged as a key component of Industry 4.0. It is no longer limited to cryptocurrencies and digital payments. The blockchain technology market was valued at USD 5.7 billion in 2021 and is expected to exceed USD 1.59 trillion by 2030, with a CAGR of 87.1% from 2022\u2026","rel":"","context":"In &quot;Data Engineering&quot;","img":{"alt_text":"Roadmap to Become a Blockchain Developer in 2023","src":"https:\/\/i0.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/01\/Cover-Images_Part2-1-1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":464,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-establish-and-maintain-a-scalable-network-using-amazon-managed-blockchain-part-2\/","url_meta":{"origin":941,"position":1},"title":"How to establish and maintain a scalable network using Amazon Managed Blockchain (Part 2)?","date":"November 9, 2021","format":false,"excerpt":"In our previous blog on how to establish and maintain a scalable network using Amazon Managed Blockchain (Part 1), we discussed Blockchain and Amazon Managed Blockchain. We have also discussed its components, benefits, features, pricing, customers, and how it works. In this blog, we will discuss how to use AWS\u2026","rel":"","context":"In &quot;AWS Cloud Computing&quot;","img":{"alt_text":"Amazon Managed Blockchain","src":"https:\/\/i2.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2021\/11\/blockchain2.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":570,"url":"https:\/\/learning.workfall.com\/learning\/blog\/establish-and-maintain-a-scalable-network-using-amazon-managed-blockchainpart-1\/","url_meta":{"origin":941,"position":2},"title":"How to establish and maintain a scalable network using Amazon Managed Blockchain (Part 1)?","date":"November 10, 2021","format":false,"excerpt":"Blockchain technology is making a big change and revolution in many industries including healthcare, logistics, supply chain, agriculture, real estate, IoT, trading, etc. These industries are doing business across the globe. They do transactions among nations, different organizations, communities, and individuals. Contracts, transactions, and records are among the defining structures\u2026","rel":"","context":"In &quot;AWS Cloud Computing&quot;","img":{"alt_text":"Amazon Managed Blockchain - Workfall","src":"https:\/\/i2.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2021\/11\/blockchain1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1513,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-upload-large-files-1gb-and-beyond-to-aws-s3-using-nestjs-backend-and-reactjs-frontend\/","url_meta":{"origin":941,"position":3},"title":"How to upload large files (1GB and beyond) to AWS S3 using NestJS (backend) and ReactJS (frontend)?","date":"November 15, 2022","format":false,"excerpt":"When dealing with file uploads, you must be aware that files are uploaded in buffers stored in memory and if the file is larger than the allocated memory in your VM, it may run out of memory and the application might crash. For example, if your allocated memory is 2GB,\u2026","rel":"","context":"In &quot;AWS Cloud Computing&quot;","img":{"alt_text":"How to upload large files (1GB and beyond) to AWS S3 using NestJS (backend) and ReactJS (frontend)?","src":"https:\/\/i1.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/11\/Cover-Images_Part2-3.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":2477,"url":"https:\/\/learning.workfall.com\/learning\/blog\/manage-the-state-of-a-complex-application-by-integrating-redux-with-react\/","url_meta":{"origin":941,"position":4},"title":"Manage the State of a Complex Application by Integrating Redux with React","date":"January 3, 2024","format":false,"excerpt":"Navigating the complexities of state management is pivotal for controlling an application's data, user interactions, and overall behavior. In this blog, we will explore step-by-step implementation of how to seamlessly manage state across multiple components by integrating Redux with React. Let\u2019s start! In this blog, we will cover: What is\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"Manage the State of a Complex Application by Integrating Redux with React","src":"https:\/\/i2.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2024\/01\/Tech-Blogs-Cover-Images_Part3.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":2480,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-develop-a-micro-frontend-application-with-react\/","url_meta":{"origin":941,"position":5},"title":"How to Develop a Micro-Frontend Application With React?","date":"January 9, 2024","format":false,"excerpt":"Discover the basics of micro-frontend development in our new blog. We'll guide you through creating lively apps with React, explaining the perks, structure, and smart practices for micro-frontends. It's like solving a web puzzle \u2014 simple, effective, and fun. Let's get started! In this blog, we will cover: What are\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"How to Develop a Micro-Frontend Application With React?","src":"https:\/\/i0.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2024\/01\/Tech-Blogs-Cover-Images_Part3-1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts\/941"}],"collection":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/comments?post=941"}],"version-history":[{"count":5,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts\/941\/revisions"}],"predecessor-version":[{"id":3143,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts\/941\/revisions\/3143"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/media\/942"}],"wp:attachment":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/media?parent=941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/categories?post=941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/tags?post=941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}