コピー2019.10.21公式のスタートガイド、チュートリアルのほか本2冊を読んでReactの基本は理解できた気がするので、ちょっとしたサンプルコードを書いて確認したいと思う。題材は割り勘計算アプリ。とりえあずnodeとcreate-react-appはインストール済みの前提で、アプリケーションの作成から。bill-splitter自動生成されたApp.jsに手を加えていく。今回はコンポーネントもファイルを分けずにApp.js内に記述していく。App;とりあえず渡されたプロパティ(固定値)を表示するだけだが、コンポーネントを使ってHTMLをレンダリングすることができた。次は、親のコンポーネント(BillSplitterとする)にstateを定義して子コンポーネント渡すように修正する予定。割り勘計算アプリ(2)前回の投稿では、ヘッダーコンポーネントと明細コンポーネントを作成し、固定値をプロパティで渡すところまで実装した。割り勘計算アプリ(5)前回の投稿までで大部分の実装ができたので、残りは人数の増減アクションの追加。各明細の横に削除と追加のボタンを配置して、クリック時のイベントで処理を行う。割り勘計算アプリ(3)前回の投稿では、割り勘計算アプリをコンポーネント化し、HTMLがレンダリングされるところまで実装した。...親コンポーネント。...子コンポーネント。割り勘計算アプリ(4)前回の投稿では、ヘッダの支払額入力に反応して割り勘計算を行い、結果をヘッダおよび各明細に反映させるように実装を行った。今回は、各明細の操作を可能にする。明細コンポーネントの各入力要素のchangeイベントにハンドラメソッド...サンプル開発サンプルアプリ開発を始める自己学習用に何かサンプルアプリを開発しようと思う。目的は以下のような感じ。前回の投稿では、ヘッダーコンポーネントと明細コンポーネントを作成し、固定値をプロパティで渡すところまで実装した。次のステップとして、これらのコンポーネントをまとめる親コンポーネントを作成し、親コンポーネントのstateに保持するデータを渡すように修正する。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。アーカイブ2020年2月2020年1月2019年12月2019年10月タイトルとURLをコピーしました。