【JavaScript修行】Reactのpropsって？

前ちょこっと勉強したReactをもう少し勉強します。

参考
https://qiita.com/morrr/items/c32a4916d55373b64c70
https://ja.reactjs.org/docs/components-and-props.html

コンポーネントのprops

なんか前ではクラスを作るには２種類〜とか書いてましたが、
ファンクションで作るのがもっともシンプルな方法らしいです。

function hello(props) {
  return <h1>Hello, {props.name}</h1>;
}

props・・・コンポーネント内外でパラメータをやりとりする仕組み。

そして前回扱っていたクラスで上記と同じ意味の物をかくと...

class Hello extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Reactでは、上のファンクションの式＝下のクラスになる、という理解で良さそうです。

コンポーネントを描写

描写はReactDOM.renderを利用します。
上記のコンポーネントを渡す場合、このように記述します。

<Hello name="Irico" />

コンポーネントの描写

function Hello(props){
  return <h1>hello,{props.name}</h1>;
}

ReactDOM.render(
  <Hello name="Irico"/>,
  document.querySelector('body')
)

これでbodyにhello,Iricoと表示されます。

ちなみに...

補足: コンポーネント名は常に大文字で始めてください。
React は小文字で始まるコンポーネントを DOM タグとして扱います。例えば、

は HTML の div タグを表しますが、 はコンポーネントを表しており、スコープ内に Welcome が存在する必要があります。
とのことなので、コンポーネント名は今後大文字で記述していくことにします。

コンポーネント蜜月関係

コンポーネントからコンポーネントへの参照も簡単にできます。
だからコンポーネント内でコンポーネントを利用するのも楽勝です。

function Hello(props){
  return <h2>Hello,{props.name}</h2>;
}

function Repeat(){
  return(
    <div>
      <Hello name="Irico" />
      <Hello name="Zyako" />
      <Hello name="Chirimen" />
    </div>
  );
}

ReactDOM.render(
  <Repeat />,
  document.querySelector('body')

)

「Hello,Irico
Hello,Zyako
Hello,Chirimen」
と問題なく表示されています。

RepeatコンポーネントがHelloコンポーネントを参照して、
それを描写することができました。

propsにおける禁忌

全ての React コンポーネントは、自己の props に対して純関数のように振る舞わねばなりません。

という禁忌があります。
引数に変更を加えないものを純関数といって、propsを扱う関数は
これでなくてはダメだ！ということです。

function Func(arg){
   return arg + 1;     //純関数
}
function Func(arg){
   return arg++       //純関数ではない
}