【無料講座】初心者向けWebエンジニア養成講座はこちら

【JavaScript】React編

リンクが無い学習コンテンツに関しては「Front Hacks」にて公開しております^^

「約350本以上の解説動画(エクササイズの解説動画含む)」「スライド解説」「質問無制限」という内容で学習サポートをしております^^
(学習コンテンツは今後も随時追加予定)

前提

【JavaScript】React編では「Node.js」のコマンドをします。

「Node.jsが何かわからない」「Node.jsのコマンドの使い方がわからない」といった方は、先に以下の学習コンテンツから取り組むことをオススメします。

  1. JavaScriptバックエンド編 > Node.js入門

React

React入門

  1. 【JavaScript】Reactとは
  2. 【React】Create React Appで開発環境を構築する
  3. 【JavaScript】importとexportの使い方を覚える
  4. 【React】JSXの概要を理解する&必要最小限の環境に修正する
  5. 【React】開発効率を上げるChrome拡張を追加する
  6. 【React】スタイルを整える主な4つの方法
  7. 【エクササイズ】CSSを反映させたReactコンポーネントを作る
  8. 【React】コンポーネントの概念・種類を理解する
  9. 【React】コンポーネントで使うpropsの使い方を理解する
  10. 【React】関数コンポーネントの作り方
  11. 【React】クラスコンポーネントの作り方
  12. 【エクササイズ】Reactの2種類のコンポーネントとpropsを使う
  13. 【React】コンポーネントのstateの使い方を理解する
  14. 【React】コンポーネントのライフサイクルを理解する【ライフサイクル図付き】
  15. 【React】コンポーネントにクリックイベントを実装する
  16. 【エクササイズ】カウンター機能を持つReactコンポーネントを実装する
  17. 【React】条件に応じてコンポーネントの表示を切り替える方法
  18. 【エクササイズ】API経由のデータ取得前後で表示を切り替える
  19. 【React】配列のmapメソッドを活用してリストを作成する方法
  20. 【エクササイズ】API経由で取得したデータをリスト表示させる
  21. 【React】入力フォームを作成する
  22. 【React】子コンポーネントから親コンポーネントの関数を実行する
  23. 【エクササイズ】Reactで簡易掲示板を作る

React Router

  1. 【JavaScript】React Routerとは
  2. React Routerでルーティングの設定と表示切り替えを行う
  3. 【React Router】HashRouterを使ってルーティングを設定する
  4. 【React Router】Redirectで別ページにリダイレクトさせる
  5. 【React Router】history, location, matchを理解する
  6. 【エクササイズ】React Routerを使ったクイズアプリを作る
  7. 作成したReactアプリをGitHub Pagesに公開する

Redux

Redux入門

  1. Reduxとは【ReactとReduxの役割の比較】
  2. ReduxとReactのデータの流れを図を使って理解する
  3. 【Redux】Actionsとは
  4. 【Redux】Actionsのテストの書き方を覚える
  5. 【Redux】Reducersとは
  6. 【Redux】Reducersのテストの書き方を覚える
  7. 【Redux】Storeとは(ActionとReducerの連携含む)
  8. 【Redux】Storeのテストの書き方を覚える
  9. 【エクササイズ】ReduxでTodo管理できるツールを作る

「React」と「Redux」の連携方法は「react-redux」のセクションで解説する。

react-redux

  1. React Reduxとは【図解付き】
  2. React Reduxを学習するための事前準備をする【救済措置あり】
  3. 【React Redux】コンポーネントとコンテナーの役割の違いを比較する
  4. 【React Redux】コンテナーの作り方
  5. 【React Redux】ProviderでコンテナーにStoreを渡す
  6. Redux DevToolsでReduxの動きをブラウザで確認する
  7. 【エクササイズ】React Reduxを使ったTodoアプリを作る

redux-thunk

  1. redux-thunkの役割とは【図解付き】
  2. 【redux-thunk】API通信を行うときの3つのActionタイプ
  3. 【redux-thunk】APIを使ってクイズデータを取得する
  4. 【redux-thunk】APIを使った非同期アクションのテストを作成する
  5. 【エクササイズ】React Router, react-redux, redux-thunkを使ったクイズアプリを作る
  6. 【エクササイズ】自作したAPIサーバーと連携するSPAを作る
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか？

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る