defaultPropsやpropTypesに関して。

Question

前提・実現したいこと

こちらのサイトのreact-rails gemを使う方法で、
Reactセットアップまではできたのですが、
デフォルトで用意されたHello.jsxがリンク先とは違っていて、
Reactのコードが理解できなかったのでご教示お願いします。

該当のソースコード

デフォルトで用意されたHello.jsxが下記でした。

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')),
  )
})

試したこと

application.html.erbに<%= javascript_pack_tag 'hello_react' %>を追加すると、
「Hello React」のdivタグが追加されたのは確認できました。

これはおそらく、<Hello name="React" />が効いて、「Hello React」の表示になっているかと思うのですが、
下記のコード辺りが特にわからないです。

Hello.defaultProps = {
  name: 'David'
}

Hello.propTypes = {
  name: PropTypes.string
}

・質問1。
コードから察するに、「Hello David」とも表示できそうですが、どうすれば表示できますか？

・質問2。

Hello.propTypes = {
  name: PropTypes.string
}

これは何かの設定ですか？
必要な処理ですか？

Answer 1

・質問1。

コードから察するに、「Hello David」とも表示できそうですが、どうすれば表示できますか？

<Hello />のようにnameを渡さなければ、defaultProps.nameにある"David"が利用されます。

これは何かの設定ですか？

必要な処理ですか？

型チェックを行うための設定です。動作させるためには不要ですが、開発中にはpropTypeに合わない引数を渡すと警告が出ます。

Comments

[退会済みユーザー]

ご回答ありがとうございます。
Davidが出力されるのを確認しました。
propTypeのご説明もありがとうございました。
理解できました。