🐣 【日報】React実践の教科書 P104〜112
作成日: 2021/12/09
3

今日やったこと

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

学習メモ

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

「お元気ですか?」という文字をコンポーネント化
スクリーンショット 2021-12-09 21.16.33.png

color と message を Props として渡す
スクリーンショット 2021-12-09 21.21.08.png

親のコンポーネントから渡した Props がオブジェクトとして受け取れていることを確認
スクリーンショット 2021-12-09 21.20.51.png

Propsを使える形に変更
スクリーンショット 2021-12-09 21.31.42.png

children

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

例: childrenの設定

// children が未設定
<ColoredMessage />

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

テキスト部分を children で渡すように修正
スクリーンショット 2021-12-09 21.37.32.png

所感

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