【読書メモ】React Cookbook（英語版）を読んで
category
date
Jun 28, 2022
slug
report-react-cookbook
status
Published
summary
React Cookbook（英語版）をサクッと読んでみた際のメモ書き
type
Post
書籍リンク
どんな本か気になっている人向けのざっくり内容まとめです。
本の概要
React Cookbookは、よく使う実践的なコードを集めたレシピ本のような書籍です。
各テーマのサンプルコードが「Problem」ベースで書かれており、例えばGatsbyの章では、create-react-appではブログやECサイトのような複雑なコンテンツを効率的に表示するのに適していない、というProblemが最初に書かれていて、その後にGatsbyというソリューションがありますよ、という説明とそのサンプルコードの解説があり、最後にDiscussionというまとめがある、みたいな構成になっています。こんな感じでproblem / solution / サンプルコード / discussionのセットが80以上載っている本です。
- 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');
});
});”- https://qiita.com/takeshisakuma/items/67578529789939c900ff
- cssのtransitionをグループ化して実行できる
- 簡単なtransitionが提供されていて、JSXでラップするだけで完結する
- reducerを使ったundo機能
- undoHistoryを配列のstateで持つだけ
- https://gist.github.com/johanquiroga/cbbfc0da2e9f11d2dbfd15acc4db6fc0
- redux/reselectの機能
- 計算に利用するセレクタを指定し、それが更新された時だけ新しい値を返す（変更がなければキャッシュを使う）
- setStateVersionでカウントしていく
- setStateVersion((v) => v + 1)
- これを副作用に入れる
- Profiler（パフォーマンストラッキング）
<Profiler id="Navigation" onRender={callback}>
<Navigation {...props} />
</Profiler>