サンプル開発

サンプル開発

Reactサンプルアプリ開発 プラニングポーカー (6) Ajaxでプレイヤーリストをフェッチ

関数コンポーネントからAjax処理を行ってデータをフェッチする。useEffectを用いるのがよさそう。 Flaskのエンドポイントにaxiosを使ってAjaxリクエストを投げデータを取得・更新する。
サンプル開発

Reactサンプルアプリ開発 プラニングポーカー (5) 画面遷移

今回は、トップ画面からポーカーを行う「場」の画面への遷移を実装する。トップ画面は以下。 トップ画面 場名とニックネームを入力し「場を開く」をクリックすると、以下の画面に遷移するようにしたい。 場の画面 Flaskど...
サンプル開発

Reactサンプルアプリ開発 プラニングポーカー (4) 他のコンポーネントとの相互作用

次に、ボタン押下時のアクションを実装する。Reactのコンポーネント構成は以下のようになっている。 コンポーネント構造 「オープン」押下時に、各プレイヤーの手札をオープンするようにする。(この操作はテーブルの親しかできない。本...
サンプル開発

Reactサンプルアプリ開発 プラニングポーカー (3) 親コンポーネントへ反映

ポップアップでモーダル表示したデッキで選択されたカードを親コンポーネントへ反映させる。 モーダルダイアログに包含されるDeckコンポーネントの<div>タグにonClick属性を指定する(9行目)。このとき、カードに書...
サンプル開発

Reactサンプルアプリ開発 プラニングポーカー (2) モーダルダイアログ

プレイヤーのカードをクリックするとモーダルダイアログでデッキを表示するようにする。 モーダルダイアログでデッキを表示 モーダルダイアログにはreact-modalを使う。 $yarn add react-modal $y...
サンプル開発

Reactサンプルアプリ開発 プラニングポーカー (1)始める

React/TypeScriptでプラニングポーカーのサンプルアプリを開発していく記録・その(1)。まずは作るアプリケーションのイメージを固め、ハリボテのUIを作った。webpackの設定に関する技術メモなど。
サンプル開発

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

前回の投稿までで大部分の実装ができたので、残りは人数の増減アクションの追加。各明細の横に削除と追加のボタンを配置して、クリック時のイベントで処理を行う。 明細のJSXに、以下のようにボタンを配置してclickのイベントハンドラ呼び出...
サンプル開発

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

前回の投稿では、割り勘計算アプリをコンポーネント化し、HTMLがレンダリングされるところまで実装した。 BillSplitter …親コンポーネント。状態保持や計算処理を司るHeader …子コンポーネント。合計金額などの表示や入力...
サンプル開発

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

前回の投稿では、ヘッダの支払額入力に反応して割り勘計算を行い、結果をヘッダおよび各明細に反映させるように実装を行った。 今回は、各明細の操作を可能にする。まずは、明細コンポーネントの各入力要素のchangeイベントにハンドラメソッド...
サンプル開発

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

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