inflearn logo
知識共有
inflearn logo

モダンなReactアプリケーションにおける状態管理入門

Reactで状態を効果的に管理する方法を、実践的なプロジェクトと現実のアプリケーションを通して学びます。useState、useEffect、useReducer、Context API、高度な状態管理パターンをマスターしながら、インタラクティブなダッシュボード、eコマースサイト、動的なWebアプリを構築します。prop drillingを解消し、複雑なアプリケーションの状態を自信を持って扱える、クリーンでスケーラブルなReactコードを書くための実践的なスキルを身につけましょう。

4名 が受講中です。

難易度 初級

受講期間 無制限

React Context
React Context
frontend
frontend
hook
hook
parent-child
parent-child
state-management
state-management
React Context
React Context
frontend
frontend
hook
hook
parent-child
parent-child
state-management
state-management
Thumbnail

受講後に得られること

  • useState、useReducer、Context APIを使用した効率的な状態管理の実装

  • プロップドリリングを解消し、コンポーネント間の通信を最適化するスケーラブルなReactアーキテクチャの構築

  • 本番レベルのアプリケーションにおける複雑な状態関連の問題のデバッグと解決


拡張性の高いReact
状態管理



propsが何層ものコンポーネントをまたぎ、stateの変更を追跡しにくくなると、Reactアプリは複雑になりがちです。

ダッシュボードやショッピングアプリを構築しながら、useState、useReducer、Context APIについてわかりやすく解説します。

クリエイティブテクノロジー教育者ならではの明快さで、実践的な各ステップを導きます。

得られるもの

絡み合った状態管理を、明快でスケーラブルなReactアーキテクチャに変えましょう。

useState、useReducer、Context APIでコンポーネント間の通信をより明確にすることで、プロップドリリングの迷路を避けられます。成長するReactアプリケーションをより保守しやすくするパターンを適用しましょう。

始める前に


練習環境

  • Windows、macOS、またはLinuxを使用してください。
    Node.js、npm、Reactをインストールしてください。
    最新のブラウザとコードエディターがあると便利です。

  • React Contextとフックを使って練習します。
    デュアルコアCPUと4 GBのRAMを使用してください。
    10 GBの空きディスク容量を確保してください。

前提条件と注意事項

  • Reactの基本的なコンポーネントとJSXを理解していること。
    props、イベント、配列を理解していること。
    JavaScriptの基本的な知識があると役立ちます。

  • まず親子間のデータフローを練習します。
    次に、Contextを使ってpropsのバケツリレーを減らします。
    プロジェクトで各パターンを試してみましょう。

学習教材

  • 重要なReactの概念についてはスライドPDFを使用します。
    コンポーネントのデータフローの図を復習します。
    フックの使用方法に関するメモを手元に置いておきます。

  • ダッシュボードとショッピングアプリを構築します。
    現実的なデータを使って状態管理を練習します。
    各タスクでデバッグ用チェックリストを使用します。


こんな方に
おすすめです

学習対象は
誰でしょう?

  • 基本的なコンポーネントの知識があり、本番環境向けのアプリケーション構築を目指すReact開発者

  • SaaSおよびeコマースプロジェクトで複雑な状態管理に移行するフロントエンドエンジニア層

  • インタラクティブなダッシュボードや動的なインターフェース向けの最新のReactパターンを習得したいWeb開発者

前提知識、
必要でしょうか?

  • コンポーネント、props、JSX構文など、Reactの基礎をしっかりと理解している

  • アロー関数、分割代入、async/awaitなどのJavaScript ES6以降の機能に関する実務知識

  • 少なくとも1つのシンプルなReactアプリケーションを構築した経験、またはReactの基礎コースを修了していること

こんにちは
applenewです。

やあやあ、Flipです。Adobe PhotoshopとAdobe Creative Cloudエコシステムを専門とする、経験豊富なグラフィックデザイナー、デジタルアーティスト、クリエイティブテクノロジー教育者です。デジタルデザイン、写真編集、ビジュアルコミュニケーション、ブランディング、クリエイティブワークフローにおける長年の経験を活かし、業界標準のAdobeツールを使って、学生がアイデアをプロ品質のデザインへと形にできるよう支援しています。
もっと見る

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

似ている講座

同じ分野の他の講座を見てみましょう!

無料