詳しくはReact元素レンダリング

要素はReactアプリケーションを構成する最小単位であり、画面上で出力される内容を説明するために用いられる。

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

ブラウザのDOM要素とは違って、Reactの中の要素は事実上普通のオブジェクトであり、React DOMはブラウザDOMのデータ内容がReact要素と一致することを確認することができる。
元素をDOMにレンダリングする
まず、HTMLページにid="example"の<div>を追加します。

<div id="example"></div>

このdivのすべてのコンテンツはReact DOMによって管理されるので、これを「ルート」DOMノードと呼ぶ。
私たちはReactを使ってアプリケーションを開発する時、基本的にルートノードを定義します。既存のプロジェクトにReactを導入すると、異なる部分でReactルートノードを単独で定義する必要があります。
React要素をルートDOMノードにレンダリングするには、それらを ReactDOM.render() に渡す方法によって、ページにレンダリングする。

const element = <h1>Hello, world!</h1>;
ReactDOM.render(
  element,
  document.getElementById('example')
);

要素レンダリングを更新
React元素はすべて可変ではない。要素が作成された場合、その内容や属性は変更できません。
現在の更新画面の唯一の方法は、新たな要素を作成し、それをReactDOM.renderに導入することである。
このタイマーの例を見てみます。

function tick() {
 const element = (
  <div>
   <h1>Hello, world!</h1>
   <h2>    {new Date().toLocaleTimeString()}.</h2>
  </div>
 );
 ReactDOM.render(
  element,
  document.getElementById('example')
 );
}
 
setInterval(tick, 1000);

実行結果

以上の例は、setInterval（）方法によって、ReactDOM.render（）を秒ごとに呼び出します。
私たちは展示する部分をパッケージ化して、以下の例を関数として表現することができます。

function Clock(props) {
 return (
  <div>
   <h1>Hello, world!</h1>
   <h2>    {props.date.toLocaleTimeString()}.</h2>
  </div>
 );
}
 
function tick() {
 ReactDOM.render(
  <Clock date={new Date()} />,
  document.getElementById('example')
 );
}
 
setInterval(tick, 1000);

関数以外にも、React.ComponentのES 6クラスを作成できます。このクラスは展示する要素をカプセル化しています。注意すべきことは、レンダー（）方法では、this.propsを使用してpropsを置換する必要があります。

class Clock extends React.Component {
 render() {
  return (
   <div>
    <h1>Hello, world!</h1>
    <h2>    {this.props.date.toLocaleTimeString()}.</h2>
   </div>
  );
 }
}
 
function tick() {
 ReactDOM.render(
  <Clock date={new Date()} />,
  document.getElementById('example')
 );
}
 
setInterval(tick, 1000);

以上はReact元素のレンダリングの詳しい内容を詳しく説明しました。React元素についてレンダリングした資料は他の関連記事に注目してください。