今日やったこと

• 「モダンJavaScriptの基本から始める React実践の教科書」 P106〜112
  • 4-5 Props

学習メモ

• Propsはコンポーネントをうまく再利用するための仕組み
• コンポーネントは受け取ったPropsに応じて表示するスタイルや内容を変化させる

「お元気ですか？」という文字をコンポーネント化

color と message を Props として渡す

親のコンポーネントから渡した Props がオブジェクトとして受け取れていることを確認

Propsを使える形に変更

children

• 特別なProps として children というものが存在する
  • コンポーネントも通常のHTMLタグのように要素を囲って使用することができ、その囲まれた部分が children として Props に設定される

例： childrenの設定

// children が未設定
<ColoredMessage />

// children として nushida を設定
<ColoredMessage>nushida<ColoredMessage />

テキスト部分を children で渡すように修正

所感

Propsの基本的な使い方を学びました。自分でHTMLタグを作るような感覚です。
さらにPropsを扱うテクニックがあるそうです。明日はそこから始めます。