【エクササイズ】React Router, react-redux, redux-thunkを使ったクイズアプリを作る

課題
  • redux-thunkの知識が定着しているかの確認
  • React Router, react-reduxの復習

今回の課題は、「React Router」のエクササイズ「【エクササイズ】React Routerを使ったクイズアプリを作る」で作成したクイズアプリを「react-redux」「redux-thunk」を使った作りで実装していただきます。

あわせて読みたい
【エクササイズ】React Routerを使ったクイズアプリを作る今回の課題は、これまで学習してきたReactとReact Routerの知識を活用して「クイズアプリ」を作っていただきます。学習コンテンツでは扱っていないライブラリなどを使っていますが、課題レポジトリのREADMEに書いた参考記事を使って自己解決スキルも身につけていきましょう。...

これまでは課題用のレポジトリを用意しておりましたが、今回は課題用のレポジトリを用意しておりません。

課題用レポジトリを今回用意しなかった理由は、次の作業を身につけていただきたいからです。

  • ゼロからGitHubにレポジトリを用意する流れを身につける
  • ゼロからディレクトリ構造を考える力を身に着ける(→これまでの課題内容を参考にする)

実装時に意識して欲しい内容

課題に取り組む際には「Reactの責務(=表示部分)」「Reduxの責務(=State管理)」「react-reduxの責務(=ReactとReduxの橋渡し)」を意識した実装を行うようにお願いします。

また、「API経由でデータを取得して、stateを更新する処理」に関しては、「redux-thunk」を利用して、Action Creatorで実装するようにお願いします。

そして、最低限「Action Creators」「Reducers」のテストは実装するようにお願いします。

課題解決するために参考になる資料

【JavaScript】React編」で学習した内容を全て使います。

そのため、忘れてしまっている箇所があれば、適宜、対応する学習コンテンツを参考にしていただけたらと思います。

あわせて読みたい
【JavaScript】React編このページはJavaScriptのReactに関する学習コンテンツをまためたページとなります。JavaScriptの基礎文法編、フロントエンド編、バックエンド編の内容を理解してからReactの学習コンテンツに取り掛かることをオススメします。...

質問・答え合わせ受け付けてます

課題に関して質問や答えの確認をしたい方はお気軽にご連絡をいただけたらと思います。

お問い合わせ・TwitterのDM・LINE@で受けつけています。TwitterのDM、LINE@のほうが早く気づけるので早めに返信できるかと思います。

あわせて読みたい
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

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

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

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

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

無料特典を受け取る