React入門

こちらの記事は以下の書籍を参考にアウトプットとして執筆しました
React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで

Reactコンポーネント

• Functional Component(関数のような定義)
• Class Component(クラスのような定義)

違いはClass Componentでは以下が使える。

• state
• ライフサイクルメソッド

コンポーネント再利用とReactエレメント

ReactDOM.render(
    <div>
        <Hello />//いくつでも書ける
        <Hello />//これが再利用するということ
        <Hello />//また、ここまでのやつはReactエレメント
    </div>,
    document.getElementById('root')
)

Reactエレメントは変数へ格納可能

let g=<Hello />

ReactDOM.render(
    <div>
      {g}
    </div>,
    document.getElementById('root')
)

children

特殊なprops
Reactコンポーネントノコ要素がchildrenとして渡される

import React from 'react';
import ReactDOM from 'react-dom';



const Hello = (props) => {
  return (
    <div>こんちわ、{props.children}さん</div>
  )
}

ReactDOM.render(
  <div>
    <Hello>
        A
    </Hello>
  </div>,
  document.getElementById("root")
)

参考：React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで

import React from 'react';
import ReactDOM from 'react-dom';



const Hello = (props) => {
  return (
    <div>こんちわ、{props.children}さん</div>
  )
}

const Greeting = (props) => {
  return (
    <div>
      <div>ご挨拶</div>
      {props.children}
    </div>
  )
}

ReactDOM.render(
  <div>
    <Greeting>
      <Hello>A</Hello>
      <Hello>B</Hello>
    </Greeting>
  </div>,
  document.getElementById("root")
)

上記は複雑なケース
Greetingのprops.childrenにはHelloエレメントが渡される。