Reactサンプルアプリ開発 プラニングポーカー まとめ

サンプル開発

いったんサンプルアプリとしての機能は完成したので、まとめ。

React Hooksの勉強のため、プラニングポーカーを題材にしたサンプルアプリを開発した。ソースコードはGitHubにアップしてある。また、サンプルアプリはHerokuにデプロイしてある(無料枠だが)
https://pp-a-pp.herokuapp.com/

テクノロジースタックは以下。

  • フロントエンド
    • 言語
      • TypeScript
    • ツール
      • Babel
      • Webpack
      • create-react-app
    • UIライブラリ
      • React
      • React Hooks
      • React Transition Group (CSSトランジッション)
      • react-i18next (多言語対応)
    • Ajax
      • axios
    • WebSocket
      • socket.io
  • バックエンド
    • Webサーバ
      • gunicorn
    • 言語
      • Python
    • アプリケーション
      • Flask
      • Flask-SocketIO
    • NoSQL
      • Redis
  • PaaS
    • Heroku

今回のサンプルアプリで使用したフック関数は以下。

  • useState
  • useEffect
  • useCallback
  • useContext
  • カスタムフック

投稿一覧:

Reactサンプルアプリ開発 プラニングポーカー (1)始める
Reactサンプルアプリ開発 プラニングポーカー (2) モーダルダイアログ
Reactサンプルアプリ開発 プラニングポーカー (3) 親コンポーネントへ反映
Reactサンプルアプリ開発 プラニングポーカー (4) 他のコンポーネントとの相互作用
Reactサンプルアプリ開発 プラニングポーカー (5) 画面遷移
Reactサンプルアプリ開発 プラニングポーカー (6) Ajaxでプレイヤーリストをフェッチ
Reactサンプルアプリ開発 プラニングポーカー (7) 他のプレイヤーが参加できるようにする
Reactサンプルアプリ開発 プラニングポーカー (8) WebSocketで通知する
Reactサンプルアプリ開発 プラニングポーカー (9) Redisを使う
Reactサンプルアプリ開発 プラニングポーカー (10) Bidの通知
Reactサンプルアプリ開発 プラニングポーカー (11) カードのオープン、次のゲーム
Reactサンプルアプリ開発 プラニングポーカー (12) React Transition Groupによるアニメーション
Reactサンプルアプリ開発 プラニングポーカー (13) Flask-SocketIOでWebSocket通信のグルーピングを行う
Reactサンプルアプリ開発 プラニングポーカー (14) カスタムフックを使った処理の再利用
Reactサンプルアプリ開発 プラニングポーカー (15) デッキのタイプを変更 – Contextの利用
Reactサンプルアプリ開発 プラニングポーカー (16) react-i18nextによる多言語対応

コメント

タイトルとURLをコピーしました