【読書感想】React Cookbook(英語版)を読んで

本の概要

読む前の課題

気付き

  • 3つ以上

TODO

課題、気付き、TODOの形式で読書感想を組織内で共有する

David Griffiths and Dawn Griffiths

この本は、React Cookbookという名前の通りレシピ本で、解説付きのサンプルコード集で、何か新しいこととか深いことが書いてあるっていうことではないので、ただの本の内容の解説になってしまうんですが、

この本のサンプルコードの良いところが解説する内容以上の無駄なコードがなかったり、細かく分割されていたり、全部hooksで書かれていたりとか、カスタマイズしやすいように色々工夫されているところで、あとほとんどがCreate React Appで動くように作られているので、適当にアプリを作って試すのがすごい楽でした。

本の構成なんですけど、各テーマのサンプルコードが「Problem」ベースで書かれていて、最初はreactの環境を作るのが大変、というproblemから、create-react-appがsolutionとして紹介されて、その後に使い方の解説が始まる、みたいな感じで、で例えば次のGatsbyの章だと、create-react-appではブログやECサイトのような複雑なコンテンツを効率的に表示するのに適していない、というProblemが最初に提示されて、その後にGatsbyというソリューションがありますよ、という説明とまたそのサンプルコードの解説がある、みたいな感じになっています。こんな感じのproblem / solution / サンプルコード / 最後にDiscussionというまとめがある、みたいな構成のセットが80以上載っている本。一つのライブラリに複数のproblem/solutionが説明されているものもある、react-router-domなど

  • 7章に別れている
    • アプリケーションの作成
    • Routing react-router-dom
    • State管理 reducer
    • Interaction Design reducerとかanimation
    • サービスとの接続 これはAPIとの接続部分で、GraphQLも
    • コンポーネントライブラリ material-ui semantic-ui
    • セキュリティ react-router-domでセキュアなrouteを作ったりとかカスタムでトークン認証するとか
    • テスト Cypress Selenium
    • アクセシビリティ
    • パフォーマンス React Profileとかを使ったパフォーマンス計測
    • PWA
  • nwb
    • 複数のプロジェクトで共有するコンポーネントをサクッと作成したい
    • nwb new react-component component-name で共通コンポーネントが作れる
  • Cypress
    • 実際のブラウザテストはコストがかかり管理が大変
    • “describe('screenshot', () => {
          it('should be able to take a screenshot', () => {
              cy.visit('/');
              cy.screenshot('frontpage');
          });
      });
    • cy.get('h1').scrollIntoView()
    • cy.get('input').type('Hi!')
    • cy.get('.Norman').click()
    • cy.contains('Fred')
    • クッキーやstorageの操作も可能
  • react-transition-group
  • undo機能を作る
  • reduxのcreateSelector
    • redux/reselectの機能
    • 計算に利用するセレクタを指定し、それが更新された時だけ新しい値を返す(変更がなければキャッシュを使う)
  • メッセージ投稿機能の例
    • setStateVersionでカウントしていく
    • setStateVersion((v) => v + 1)
    • これを副作用に入れる
  • Redux Middleware
  • image
  • パフォーマンス
    • Profiler(パフォーマンストラッキング)
    • <Profiler id="Navigation" onRender={callback}>
        <Navigation {...props} />
      </Profiler>
    • performance.now()

  • Cookbook(レシピ本)
  • ほとんどのレシピはCreate React Appで作られている
  • hooksで書かれている
  • 各テーマのサンプルコードが「Problem」ベースで書かれている
    • 例えばGatsbyの章では、create-react-appではブログやECサイトのような複雑なコンテンツを効率的に表示するのに適していない、というProblemが最初に書かれていて、その後にGatsbyというソリューションがありますよ、という説明とそのサンプルコードの解説があり、最後にDiscussionというまとめがある、みたいな構成になっています。こんな感じのproblem / solution / サンプルコード / discussionのセットが80以上載っている本。
    • 一つのライブラリに複数のproblem/solutionが説明されているものもある、react-router-domなど
  • 7章に別れている
    • アプリケーションの作成
    • Routing
    • State管理
    • Interaction Design
    • サービスとの接続
    • コンポーネントライブラリ
    • セキュリティ
    • テスト
    • アクセシビリティ
    • パフォーマンス
    • PWA
  • nwb
    • 複数のプロジェクトで共有するコンポーネントをサクッと作成したい
    • nwb new react-component component-name で共通コンポーネントが作れる
  • Cypress
    • 実際のブラウザテストはコストがかかり管理が大変
    • “describe('screenshot', () => {
          it('should be able to take a screenshot', () => {
              cy.visit('/');
              cy.screenshot('frontpage');
          });
      });
    • cy.get('h1').scrollIntoView()
    • cy.get('input').type('Hi!')
    • cy.get('.Norman').click()
    • cy.contains('Fred')
    • クッキーやstorageの操作も可能
  • react-transition-group
  • undo機能を作る
  • reduxのcreateSelector
    • redux/reselectの機能
    • 計算に利用するセレクタを指定し、それが更新された時だけ新しい値を返す(変更がなければキャッシュを使う)
  • メッセージ投稿機能の例
    • setStateVersionでカウントしていく
    • setStateVersion((v) => v + 1)
    • これを副作用に入れる
  • Redux Middleware
  • image
  • パフォーマンス
    • Profiler(パフォーマンストラッキング)
    • <Profiler id="Navigation" onRender={callback}>
        <Navigation {...props} />
      </Profiler>
    • performance.now()