High Performance React Web 開発

Description

React-query (2020 Feb. release)の登場により最新のReact開発では、REST APIから取得したServerデータの状態管理とアプリケーション(Client)の状態管理を分離する手法が主流になりました。本コースでは、最新のBest practiceに沿ってreact-queryのキャッシュ機構を使ったサーバーデータの状態管理手法とRedux toolkitを使ったアプリケーション(Client)の状態管理について学習していきます。また、サーバーへのfetch回数の低減と不要な再レンダリングの抑制を中心に最適化技術について学習します。

Server state data management ---> react-query

Client state management ---> redux(redux toolkit)

• react-queryを使ったサーバーデータのcache管理

• Redux toolkitを使ったアプリケーションの状態管理(Client)

• useContextとRedux toolkitの再レンダリング性能の比較

• useQuery+useMutationを使ったCRUD処理(REST API連携)

• react-queryと従来のfetch処理の比較

• staleTimeとcacheTimeの理解

• custom hook + memo

• react-query dev tools + redux dev tools

• Todoアプリ実践 (REST API連携)

What You Will Learn!

• 最新のReact state managementのベストプラクティス
• React-queryを使ったServer data 状態管理
• Redux toolkitを使ったApp(Client) 状態管理
• React-query devtools + Redux devtools
• REST APIとの連携

Who Should Attend!

• 高性能React開発を目指す人
• fetch回数や再レンダリングを最適化したい人
• 最新のReact状態管理手法を知りたい人(Server state data management + Client state management)

TAKE THIS COURSE