This post is also available in: English-US (英語)

truffleのreact-boxを使うと、お手軽にイーサリアムのスマートコントラクトを使ったブロックチェーンだぜ的なアプリ開発を、reactのUIで体験できるらしいので、やってみたら、落とし穴がいくつかありましたので、メモ代わりに書いています。

GitHubの　truffle-box/react-box　のチュートリアルをベースに進めましたが、いくつか修正しないとアプリが動きませんでした。
環境はWindows7 64bitです。

truffleをインストールするため以下のコマンドを入力。

npm install -g truffle

プロジェクトルートフォルダにて以下のコマンドを入力。
react-boxのデータが展開されます。

truffle unbox react

同じくプロジェクトルートフォルダにて以下のコマンドを入力。
compile,migrateはtruffle developを打った後にコマンド入力待ちになるので、その状態で入力してます。
Windowsでは、コマンドプロンプトでなく、Git Bashなどを利用する事をお勧めします。

truffle develop
compile
migrate

(チュートリアルにはないので手順が正しいかは知りません)
truffle developを打ったコマンドプロンプト(もしくはGit Bashなど)とは別のコマンドプロンプトを立ち上げて以下のコマンドを入力。
bignumber.js　がないですよってエラーが出た場合の対処方法です。

cd client
npm install --save bignumber.js

(チュートリアルにはないので手順が正しいかは知りません)
truffle developを走らせると、buildフォルダ以下にcontractsフォルダができてますので、そのcontractsフォルダをclient/srcフォルダ以下にコピーします。
以下のようなエラーが出た場合の対処方法です。

Module not found: Can't resolve './contracts/SimpleStorage.json' in '....../client/src/App.js'

最後に以下のコマンドを打つと、ブラウザが立ち上がり、App.jsの内容が走ります。

cd client
npm run start

ブラウザで「App.jsのこの行数を修正したら値変わるよ」と書いてますが、行数が違います。
以下のコード部分の 5 を好きな値に変えてください。

// Stores a given value, 5 by default.
await contract.set(5, { from: accounts[0] });