通過Web3將智能合約（Solidity代碼）連接到用戶界面。如果您也是那些仍在努力尋找一個可靠開發(fā)教程的初學者之一，那么對于您來說，這無疑是必讀的文章。

兩個必備組件

在我們深入了解實際過程之前，我只想對一個非常關鍵的細節(jié)做一個非常簡短的修改。

既然已經知道Web3是一個真正幫助我們將智能合約連接到前端的庫。但是為了成功連接到智能合約，Web3首先還需要兩個非常關鍵的組件。

這兩個組件是：

應用程序二進制接口（ABI）：它基本上包含所有功能，它們的權限以及智能合約中的其他細節(jié)（采用JSON格式）。

地址（ADDRESS）：這是在遷移實體代碼后生成的智能合約的地址。

現在您就可以牢記這些細節(jié)了，讓我們繼續(xù)前進，嘗試實際將智能合約連接到前端的過程。

先決條件

1.Ganache CLI：為了讓這個過程非常簡單，基本上可以將其視為可定制的區(qū)塊鏈模擬器，它為您提供10個免費的以太坊帳戶，其中每個帳戶都攜帶100個以太坊。

安裝：

$npm install -g ganache-cli

2. Metamask Extension：毫無疑問，這是最必要的要求，因為它可以幫助我們在Firefox或Chrome等常規(guī)瀏覽器中訪問啟用了以太坊的分布式應用程序（DAPP）。

3.Truffle：這是最好的開發(fā)工具，包括所有必要的文件和環(huán)境，您不僅可以部署和開發(fā)智能合約，還可以對其進行測試。

安裝：

$npm install -g truffle

最終建立聯系，到這里您已成功成功安裝所有必備組件，現在讓我們將智能合約連接到前端。

盡管您可以選擇各種框架來開發(fā)前端，但到目前為止，讓我們開始吧。

好吧，無可否認，考慮到React本身的復雜性，從頭開始編寫所有代碼可能很麻煩。好吧，truffle為您提供了一些支持，該代碼為您提供了一些將React與Web3連接的樣板代碼。您所要做的就是安裝truffle的React Box。

安裝

$truffle unbox react

第1步：Edit trufle-config.js：從trufle中解壓react組件后，第一個任務是在module.export部分編輯網絡對象。將主機設置為localhost，端口設置為8545。

為什么這樣做？

好吧，我們需要將dapp連接到本地區(qū)塊鏈。在我們的案例中，Ganche CLI將完成這項工作。最重要的是，Ganache CLI偵聽端口8545，這就是為什么我們在tuffle.js中將端口設置為8545的原因。

第2步：啟動Ganache CLI：下一部分是運行終端命令ganache-cli以激活Ganache。

第3步：設置METAMASK：

說實話，這是事情可能變得丑陋的部分。因此，讓我們了解此步驟的基礎知識。

Metamask可以簡單地看作是一種工具，可以將您的常規(guī)瀏覽器（即Firefox或Chrome）基本上轉換為可以與區(qū)塊鏈通信的工具。

在開發(fā)過程中，可以通過為此metamask擴展提供合適的端口并設置其與我們的開發(fā)帳戶的連接來完成。

為此，您有兩個可靠的端口用于開發(fā)目的。

· 端口7545：-使用Ganache GUI

· 端口8545：-使用Ganache CLI

因此，假設您已在自己喜歡的瀏覽器上成功建立了Metamask擴展程序，現在讓我們從主要部分開始。

如您所見，默認情況下，此擴展名連接到以太坊主網絡，這不是您要用于開發(fā)目的的所有帳戶（除非您真的很富有并且擁有大量以太幣）。因此，單擊下拉菜單，然后選擇Localhost8545。（因為Ganache CLI使用端口8545）。

設置端口后，現在單擊右上方的圓形按鈕，然后選擇“導入帳戶”選項。

在此將要求您輸入要使用的帳戶的私鑰。記住，Ganche CLI已經為我們提供了10個帶有100個免費以太幣的帳戶。好了，從這10個帳戶中選擇任何私鑰并將其粘貼到此處。

就這樣，既然您已經設置了帳戶，那么您就可以開始開發(fā)過程了。

最后，用REACT啟動前端，因此現在可以簡單地啟動前端部分了。

請遵循以下步驟：

現在到 truffle react

1.輸入trufle compile命令。

2.然后輸入命令truffle migrate。

注意：一旦您遷移了智能合約，就會因gas而扣除少量的eth。因此，單擊瀏覽器上的Metamask擴展，然后檢查是否扣除了一些金額。如果是的話，那么您的設置就可以了。

4.轉到客戶端目錄，然后輸入命令npm start。

5.打開瀏覽器，然后轉到localhost：3000。

您可能會看到這樣的Metamask彈出窗口。

這只是您需要批準的一個簡單事務，以便從智能合約獲得價值到前端部分。只需單擊確認按鈕。

注意：您是否看到一行顯示，存儲的值是：5.此處的值5來自智能合約，因此表示您的前端與合約同步。

而已。您已通過WEB3和Ganache CLI成功將React與Solidity智能合約集成在一起。