【エクササイズ】自作したAPIサーバーと連携するSPAを作る

課題
  • 【学習コンテンツ】JavaScriptバックエンド編で実装したAPIサーバーと連携するSPAを作る
  • これまで学習してきたReact関連の知識をより強固なものにする

今回の課題は、JavaScriptバックエンド編の「ORMを使ってexpressとDBを連携する」で実装したAPIサーバーと連携したSPA(=シングルページアプリケーション)を実装していただきます。

今回の課題も、前回の課題と同様に課題用のレポジトリを用意しておりません。

課題用レポジトリを用意していない理由は前回と同じで、「ゼロから自分の力だけで実装を進める力を身に着けてもらう」のが目的のためです。

この課題がクリアできたら、ポートフォリオとして十分に活用できることでしょう^^

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

課題に取り組む際には「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エンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

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

無料特典を受け取る