【JavaScript】React編

前提

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

「Node.jsが何かわからない」「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 Hooks

現在準備中。

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つのアクション
  3. 【redux-thunk】クイズAPIを使ってクイズデータを取得する
  4. 【redux-thunk】非同期Actionのテストを作成する
  5. 【エクササイズ】redux-thunkを使ったクイズアプリを作る
  6. 【エクササイズ】JavaScriptバックエンド編で作成したAPIサーバーと連携するSPAを作る
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

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

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

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

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

無料特典を受け取る