React練習 – 割り勘計算アプリ(1)

サンプル開発

2019.10.21

公式のスタートガイド、チュートリアルのほか本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を定義して子コンポーネント渡すように修正する予定。（明細件数は動的に切り替わるように）

React | Just A Programmer より:

2019-10-22 11:24 am

[…] 前回の投稿では、ヘッダーコンポーネントと明細コンポーネントを作成し、固定値をプロパティで渡すところまで実装した。次のステップとして、これらのコンポーネントをまとめる親コンポーネントを作成し、親コンポーネントのstateに保持するデータを渡すように修正する。 […]

返信