React:関数コンポーネントとクラスコンポーネント

1. url
https://ja.reactjs.org/docs/components-and-props.html

2. 解説の分解
componentを定義する最もシンプルな方法は JavaScript のfunctionを書くことです:

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

これはJavaScript のfunctionです。
このfunctionは、React の有効な要素を返す、Reactの componentです。
このfunctionは、データの入った “props”を引数として一つ受け取る。
“props”は、Propertyの特性をもち、propsが値を保持する。
つまりPropertyの特性である「propsが値を保持する」というのは、「propsがオブジェクト参照を保持している」という意味です。
このため、propsの値を変更しても、元の参照オブジェクトの値は変更されません。
このようなcomponentのことを “function component (関数コンポーネント)” と呼ぶ。

3.ユーザ定義のcomponentの名前は大文字で始める
React は小文字で始まるcomponentを DOM タグとして扱う。
例えば、<div /> は HTML の div タグを表わす。
一方、<Welcome /> はcomponentを表し、スコープ内に Welcome が存在する必要がある。

Reactは、ある要素の型が小文字から始まっているような場合、それは <div> や <span> のような組み込みのcomponentを参照している。
これらはそれぞれ ‘div’ や ‘span’ といった文字列に変換されて React.createElement に渡される。
一方で <Foo /> のように大文字で始まる型は React.createElement(Foo) にコンパイルされる。
加えて、JavaScript ファイルにおいて定義あるいはインポートされたcomponentを参照する。