truffle框架官網提供了很多前端框架，這裏我以react爲例。
1、新建項目
新建一個項目，叫做demo3，在demo3根目錄下，打開cmd，輸入以下命令（初次下載時間較長，因爲包含很多nodejs的包）：
truffle unbox react
經過較長時間的下載後，會返回如下信息：
√ Preparing to download
√ Downloading
√ Cleaning up temporary files
√ Setting up box
Unbox successful. Sweet!
Commands:
Compile: truffle compile
Migrate: truffle migrate
Test contracts: truffle test
Test dapp: cd client && npm test
Run dev server: cd client && npm run start
Build for production: cd client && npm run build
我們demo3的項目結構會變成這樣：
接下來將通過這個初始項目，瞭解如何運行這個項目。
2、編譯智能合約
具體步驟與我上一篇博客的內容大致相同，在命令行中輸入如下命令：
truffle(develop)>
compile
如果智能合約沒有問題（因爲我們使用了框架中的自帶合約，所以不會有報錯），我們的項目中，在demo3\client\src\contracts\下會出現與智能合約相對應的json文件：
然後部署智能合約：
truffle(develop)>
migrate
正常情況返回如下命令:
⚠️ Important ⚠️
If you’re using an HDWalletProvider, it must be Web3 1.0 enabled or your migration will hang.
Starting migrations…
======================
Network name: ‘develop’
Network id: 4447
Block gas limit: 6721975
1_initial_migration.js
======================
Deploying ‘Migrations’
----------------------
transaction hash: 0xb001f7cbdc3768e8e92641a50ad8e434ffd454af92495758260eaea95988a4bc
Blocks: 0 Seconds: 0
contract address: 0x2DE87dF377fE0B3841D3f4E07A254ACe93d2a89e
account: 0x9A37E2b824bB3FBd4429D0CEb2c7ef3471cb0fE3
balance: 99.99430184
gas used: 284908
gas price: 20 gwei
value sent: 0 ETH
total cost: 0.00569816 ETH
Saving migration to chain.
Saving artifacts
-------------------------------------
Total cost: 0.00569816 ETH
2_deploy_contracts.js
=====================
Deploying ‘SimpleStorage’
\ -------------------------
transaction hash: 0x0659be00ecd2003a0b78414c714c3b6899098a6b94d27101d092f7403ff0dc7e
Blocks: 0 Seconds: 0
contract address: 0x487B6C076809d7Db11C9B5fF75A4289f1A739914
account: 0x9A37E2b824bB3FBd4429D0CEb2c7ef3471cb0fE3
balance: 99.99114582
gas used: 115767
gas price: 20 gwei
value sent: 0 ETH
total cost: 0.00231534 ETH
Saving migration to chain.
Saving artifacts
-------------------------------------
Total cost: 0.00231534 ETH
Summary
=======
Total deployments: 2
Final cost: 0.0080135 ETH
3、打開前端界面
在 demo3\client\node_modules 目錄下打開cmd，輸入如下命令：
npm start
命令行會返回如下內容：
[email protected] start D:\Desktop\Code\Truffle\demo3\client
react-scripts start
Starting the development server…
Compiled successfully!
You can now view client in the browser.
http://localhost:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.
接下來，我們的Metamask錢包會提示我們接入React App併產生一筆交易（爲何會有一筆交易，之後我會說到），如果你的錢包沒有足夠代幣，可以查看我的上一篇博客：truffle框架初使用，
確認支付後你的瀏覽器會打開下面這個界面。
我們可以看到上面顯示：the stored value is :5，可是我們的智能合約裏沒有指定值啊（沒有指定的話，默認是0）：
這是打開我們demo2\client\src\App.js文件,其中的第42行代碼：
// Stores a given value, 5 by default.
await contract.methods.set(5).send({ from: accounts[0] });
這樣就明白了，他默認從我們前端給我們set了一個爲5的值，這就是爲什麼每次打開這個界面，都會產生一筆交易，我們可以嘗試下把5修改爲727，
// Stores a given value, 5 by default.
await contract.methods.set(727).send({ from: accounts[0] });
再打開我們的前端界面，確認支付後，界面就會顯示爲727了：
小結
我們初步瞭解瞭如何建立一個帶有前端界面的truffle框架項目，其實很久沒寫這樣的demo了，重寫整理時，又發現了之前從沒有遇過的問題，以後還是要多動手，多練習，改掉眼高手低的毛病。接下來我就要寫前端如何跟合約文件進行交互。
借鑑鳴謝：
以太坊：MetaMask連接私有網絡調用合約方法時報錯： [ethjs-rpc] rpc error with payload Error: invalid sender
區塊鏈項目開發常見錯誤-2-rpc error with payload