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$yarn add @types
Spockは標準機能としてスタブ/モックを内包しているのでとても便利。以下のように簡単にモックを作成し、期待する振る舞いを定義できる。 // モックの作成 def mock = Mock(Foo)
「ブログリーダー」を活用して、yonettyさんをフォローしませんか?