【エクササイズ】Reactで簡易掲示板を作る

課題

課題内容は以下の課題レポジトリに記述しています。

課題レポジトリ

今回作成する課題の完成形のイメージは以下のとおりです。

今回の課題の完成形

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

Reactコンポーネントの「state」「setStateメソッド」の使い方は上記記事で解説しました。

Reactコンポーネントはstateやpropsが更新されると、「render」メソッドを再度実行します。

どのような流れでrenderメソッドが再実行されるかわからない方は、上記記事で「コンポーネントのライフサイクル図」使って説明しているのでそちらを参考にしていただけたらと思います。

Reactコンポーネントのクリックイベントの実装方法は上記記事で解説しました。

Reactコンポーネントでイベントを実装する際には「this」の扱いに注意が必要です。

この「this」問題の解決方法についても上記記事で説明しているので、「this」でつまづいた場合は、そちらを参考にしていただけたらと思います。

今回の課題の内容は、前回の課題である「【エクササイズ】API経由のデータ取得前後で表示を切り替える」とほとんど同じですが、

前回実装した「クイズデータ1件の表示する」ではなく、「取得したクイズデータの問題文を全てリスト表示する」実装が必要になります。

Reactでリスト表示させる方法は上記記事で解説しているので、わからない場合はこちらの記事を参考にしていただけたらと思います。

今回は掲示板の作成になるため、掲示板に投稿するための入力フォームを実装します。

Reactで入力フォームを作成する方法がわからない場合は、まずはこちらの記事を参考にしていただけたらと思います。

今回実装するコンポーネントの1つに「Formコンポーネント」というものがあります。

このFormコンポーネントでは、入力フォームに文字を入力した状態で「コメントする」ボタンをクリックすると、親コンポーネントに入力した文字列をメソッドの引数経由で渡します。

この時、子コンポーネントから親コンポーネントのメソッドを実行するのですが、どうやって親コンポーネントのメソッドを子コンポーネントから実行するのでしょうか？

この答えがわからない場合は、上記記事で解説している解説しているので、そちらを参考にしていただけたらと思います。

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

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

【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか？

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

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

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