公式のスタートガイド、チュートリアルのほか本2冊を読んでReactの基本は理解できた気がするので、ちょっとしたサンプルコードを書いて確認したいと思う。題材は割り勘計算アプリ。
とりえあずnodeとcreate-react-appはインストール済みの前提で、アプリケーションの作成から。
$create-react-app bill-splitter自動生成されたApp.jsに手を加えていく。今回はコンポーネントもファイルを分けずにApp.js内に記述していく。
import React, {Component} from 'react';
import './App.css';
class Header extends Component {
render () {
return (
<div>
<div>
<label>支払額:<input type="text" value={this.props.payment} /></label>
</div>
<div>
<label>合計額:<span>{this.props.total}</span></label>
</div>
<div>
<label>端数:<span>{this.props.remainder}</span></label>
</div>
<div>
<label>人数:<input type="text" value={this.props.participantsNumber} /></label>
</div>
</div>
);
}
}
class Detail extends Component {
render () {
return (
<div>
<input type="text" value={this.props.name} />
<label><input type="radio" value="fix" checked={this.props.kind === 'fix'} />固定</label>
<label><input type="radio" value="split" checked={this.props.kind === 'split'} />割り勘</label>
<input type="text" value={this.props.amount} />
</div>
);
}
}
function App () {
return (
<div className="App">
<Header
payment={0}
total={0}
remainder={0}
participantsNumber={3}
/>
<Detail
name="山田"
kind="fix"
amount={5000}
/>
</div>
);
}
export default App;
とりあえず渡されたプロパティ（固定値）を表示するだけだが、コンポーネントを使ってHTMLをレンダリングすることができた。
次は、親のコンポーネント（BillSplitterとする）にstateを定義して子コンポーネント渡すように修正する予定。（明細件数は動的に切り替わるように）
コメント
[…] 前回の投稿では、ヘッダーコンポーネントと明細コンポーネントを作成し、固定値をプロパティで渡すところまで実装した。次のステップとして、これらのコンポーネントをまとめる親コンポーネントを作成し、親コンポーネントのstateに保持するデータを渡すように修正する。 […]