要素とは

要素は React アプリケーションの最小単位の構成ブロックであり、画面上に表示したいものの説明書き：

const element = <h1>Hello, world!</h1>;

React 要素はオブジェクトで、 React DOM が React 要素に合致するように DOM を更新する作業を行う。

要素を DOM として描画する

次の <div> 要素があるとする：

<div id="root"></div>

React 要素を上記の DOM ノードにレンダーするには次のようにする：

const root = ReactDOM.createRoot(document.getElementById("root"));
const element = <h1>Hellow, world</h1>;
root.render(element);

コンポーネントとは

コンポーネントは JavaScript の関数に似たもので、任意の入力を受け取り画面上に表示すべきものを記述する React 要素を返す。コンポーネントを用いることで UI を独立した再利用できる部品に分割することができる。

コンポーネントには次のルールがある：

コンポーネント名は 大文字で始める 必要がある
React コンポーネントは、自己の props (入力引数) に対して、純関数*1のように振る舞わなければならない（動的に変えたい時には "state" という概念を利用することで本ルールを守ることができる。）

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

コンポーネントを定義するシンプルな方法は JavaScript を書く：

// 関数コンポーネント
function Welcome(props) {
  return <h1>Hello, world</h1>;
}

// クラスコンポーネント
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

コンポーネントのレンダー

要素はユーザ定義のコンポーネントも表せることができる：

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

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(element);

Hello World in React

クラスにローカル state を追加する

ローカル state は次のように追加する（刻々と時刻表示するオブジェクト）：

class Clock extends React.Component {
  // クラスのコンポーネントは常に props を引数として親クラスのコンストラクタを呼び出す
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Clock />);

C++ でのコンストラクタでのメンバ変数の初期化に近い感じかなと🤔

ライフサイクルメソッド

ライフサイクルメソッドはコンポーエントが描画される時（マウント）や破棄される時（アンマウント）に実施したい時に使え、オーバーライド可能。ライフサイクルは次のチートシートが参考になった。

React lifecycle methods diagram

参考

*1:同じ入力に対して同じ結果

goruchan’s blog

React：要素とコンポーネント