What you'll learn:
- 再レンダリング最適化の方法
- 様々なCSSのあてかた
- 実践的な画面遷移(React Router)の方法
- Atomic Designに基づいたコンポーネント分割
- グローバルなstate管理
- TypeScript × Reactのテクニック
- カスタムフックの使い方
- Chakra UIを用いた実践アプリの作成
React力を更に高めたい全ての人におくるステップアップコース完全版!
「stateやprops、useStateやuseEffectの使い方は何となく分かったけど次どうしたら良いか分からない」
「もっと実務で必要となるレベルの解説を知りたい」
といったReactでもっとステップアップしていきたい人のために本コースを作成しました。
■本コースでは以下の内容を取り扱います
再レンダリングの仕組みを知りレンダリングを最適化する
どんな時に再レンダリングは起きるのか、またそれを最適化する方法を知ることで規模が大きくなってもサクサク動く快適なアプリケーションを作ることができるようになります。
様々なCSSのあてかたに触れる
いざ自分でアプリケーション作ろうと思うとCSSについては絶対迷うと思います。
選択肢を増やすために主要なCSSライブラリについて使い方を紹介します。
ルーティングのテクニックを学ぶ(React Router)
Reactで画面遷移を伴うアプリケーションを作る場合ルーティング周り知識は不可欠です。
ReactRouterの使い方や具体的なテクニックを知ることでアプリケーション開発に生かせるかと思います。
コンポーネントの分割方法を学ぶ(Atomic Design)
コンポーネント分割として有名なAtomic Designというデザインシステムを紹介します。
概念の部分や、Reactでの使い方を知ることでコンポーネント分割への意識が変わります。
グローバルなstate管理を知る
実際のアプリケーションではコンポーネントを横断して使用できるグローバルなstateの知識は必須です。
React標準のContextの使い方やテクニックと、Recoilというライブラリについても軽く紹介しています。
React × TypeScriptで開発できるようになる
これからReactで開発していく場合、TypeScriptの使用はほぼ必須と言っても過言ではありません。
基礎、応用と順番にTypeScriptについて解説していくので、今後はTypeScriptを用いたReact開発に取り組んでいけるようになるかと思います。
カスタムフックを使えるようになる
コンポーネントとロジックを分離するカスタムフック について実際に使い方を学ぶことで更にステップアップしたReactのコードを書けるようになります。
Chakra UIを使った実践アプリ作成
これまでの内容を全て取り込んで実際にCSSフレームワークを使いながらアプリケーションを作っていく流れを体験することで、より学習した内容の生かし方がイメージできるようにしています。
■それ以外の本コースの特徴
私自身、複数プロジェクトでReactを使用し仕事をしているエンジニアです(フリーランス→会社設立)
コード入力時は画面を拡大する等、編集も工夫しているためスマホでもストレスなく閲覧できます
収録音声にも気をつかっているのでイヤホン等で視聴しても不快ではないです(声の好みは分かりませんが...)