【エクササイズ】Reactの2種類のコンポーネントとpropsを使う

課題
  • Reactのpropsを使う
  • Reactの関数コンポーネントとクラスコンポーネントを実装する
  • GitHubに用意した課題の内容を確認して、課題クリアがこの記事でのゴール

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

課題レポジトリ

GitHub : js_exercise_for_react_2

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

今回の課題の完成形今回の課題の完成形

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

【React】コンポーネントの概念・種類を理解する

あわせて読みたい
【React】コンポーネントの概念・種類を理解する今回はReactのコンポーネントの概念と種類を解説しました。Reactアプリケーションを実装する上で「コンポーネント」がどういうものかを理解するのは重要です。また、コンポーネントには「関数コンポーネント」「クラスコンポーネント」の2種類があり、使い分けの基準も理解しておくことをオススメします。...

上記記事でReactコンポーネントの概要を解説しました。

具体的には以下の3つの概念を説明しました。

  1. コンポーネントとは何か?
  2. 親コンポーネントと子コンポーネントについて
  3. 関数コンポーネントとクラスコンポーネントについて

【React】コンポーネントで使うpropsの使い方を理解する

あわせて読みたい
【React】コンポーネントで使うpropsの使い方を理解する今回はReactの「props」について解説しました。具体的には「①propsの概念、②propsの使い方、③props.childrenの意味、④propsは読み取り専用の値」ということをサンプルコードも交えながら説明しています。...

Reactのコンポーネントを使う上で必須の知識となる「propsの使い方」や、特別な値である「props.children」を上記記事で解説しました。

【React】関数コンポーネントの作り方

あわせて読みたい
【React】クラスコンポーネントの作り方今回はReactの「クラスコンポーネント」の作り方の解説をしました。前回解説した関数コンポーネントの作り方と比べると記述が少し複雑になりますが、JavaScriptのクラスの書き方を理解していればそこまで難しくない内容となります。...

Reactで用意されている2種類のコンポーネントの内、「関数コンポーネント」の作り方については上記記事で解説しました。

【React】クラスコンポーネントの作り方

あわせて読みたい
【React】クラスコンポーネントの作り方今回はReactの「クラスコンポーネント」の作り方の解説をしました。前回解説した関数コンポーネントの作り方と比べると記述が少し複雑になりますが、JavaScriptのクラスの書き方を理解していればそこまで難しくない内容となります。...

もう1つのコンポーネントである「クラスコンポーネント」の作り方については上記記事で解説しました。

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

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

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

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

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

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

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

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

無料特典を受け取る