React連携（２）

app/javascript/packs/hello_react.jsx

// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
// of the page.

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

const Hello = props => (
  <div>Hello {props.name}!</div>
)

Hello.defaultProps = {
  name: 'David'
}

Hello.propTypes = {
  name: PropTypes.string
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Hello name="React" />,
    document.body.appendChild(document.createElement('div')),
  )
})

import

importはファイルの読み込みです。

【１】react
「react」はユーザーインターフェースを構築するためのJavaScriptライブラリで、Reactのコンポーネントを定義するために必要な機能のみが含まれています。

【２】react-dom
「react-dom」は、Reactのための、DOMの操作とサーバーレンダリング機能を提供します。

【３】prop-types
「prop-types」は、Propの型情報をチェックできるようにするツールです。

定数の宣言

constを利用して定数を宣言します。

hello_react.jsx

const Hello = props => (
  <div>Hello {props.name}!</div>
)

Helloという定数に、＜div＞Hello {props.name}!＜/div＞が代入されます。

つまり「定数Helloにアロー関数を代入している（引数がprops）」 →引数が1つなら(　　)も不要 (引数0なら()は必要)。なのでpropsは(　　)なし

通常関数	function (　) {　}
アロー関数arrow function	(　) => {　}
＊書き換え可能

デフォルトpropsの宣言

以下のコードでは、propsのデフォルト値に‘David’を設定しています。（コンポーネントの属性設定）

hello_react.jsx

Hello.defaultProps = {
  name: 'David'

propTypesにて型の制約の指定

propsのnameに入る型を指定しています。指定することによって、値を受け取った際に、肩のチェックを行ってくれます。
（コンポーネントの属性設定）

hello_react.jsx

Hello.propTypes = {
  name: PropTypes.string
}

*PropTypesで渡された値の型チェックを行い、stringに限定している

「Hello React!」の表示

hello_react.jsx

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Hello name="React" />,
    document.body.appendChild(document.createElement('div')),
  )
})

ReactDOM.render( レンダリングする内容【第１引数】,表示を割り当てる場所【第２引数】)

addEventListener( )は、様々なイベント処理を実行することができるメソッド。上記はDOMContentLoadedとあるので、DOMツリーの構築が完了した時点(ロードされた時点)で呼ばれます。（=WEBページの読み込みが終わってJavaScriptのスクリプトが実行できる状態になったら）Helloオブジェクトのpropsのnameに「React」という文字列が代入されます。
最後のdocument.body.appendChild(document.createElement(‘div’))により、divタグで囲まれた＜Hello name=”React” /＞の内容が、bodyタグが終了する直前に追加されます。
＊document.createElement(‘div’)はdiv要素を生成
＊body.appendChildはbodyの最後にbodyの子要素追加するというもの。

ここがむっちゃ詳しいです

@kouheiszkさんRailsチュートリアル幻の15章 React編
https://qiita.com/kouheiszk/items/c85e70e331ba75841818