Reactで書き始める

DOMAPIを使用して要素を直接作成できます。これを行うには、ルート要素を取得し、内部HTMLを設定する必要があります。それだけです。以下の例を参照してください。

document.getElementById('root').innerHTML = `
  <div>
    Hello World!
  </div>
`;

これを行うには、ReactDOMレンダラーを追加する必要があります。その中に、2つのパラメーターを追加する必要があります。それらの1つはReactCreate要素であり、もう1つはHTMLルート要素です。以下のコードに従ってください。

ReactDOM.render(
  React.createElement(),
  document.getElementById(),
);

ReactDOM.render(
  React.createElement(
    'tagname',
    'style',
    'Insert, what do you want to see in the output!',
  ),
  document.getElementById(),
);

ReactDOM.render(
  React.createElement(
    'div',
    null,
    'Hello World!',
  ),
  document.getElementById('root'),
);

ここに別の方法があります。'React.createElement'の代わりにHTMLを直接挿入することができます。以下の例を見てみましょう。興味がある場合は、CodePanに出力が表示される場合があります。

ReactDOM.render(
  <div>Hello World!</div>,
  document.getElementById('root'),
);

React要素をネストしましょう！

ReactCreateElement内にネスト要素を挿入しましょう。1番目のCreateElement内に、ネスト用に別の要素を挿入できます。わからない？どれどれ…

ReactDOM.render(
  React.createElement(
    'div',
    null,
    'Hello World!',
    React.createElement(
      'pre',
      null,
      new Date().toLocaleTimeString(),
    ),
  ),
  document.getElementById('root'),
);

const time = () => {
  ReactDOM.render(
    React.createElement(
      'div',
      null,
      'Hello World!',
      React.createElement(
        'pre',
        null,
        new Date().toLocaleTimeString(),
      ),
    ),
    document.getElementById('root'),
  );
}
setInterval(time, 1000);

JSX

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

HTML5が終了タグを必要としない場合があることに気付くかもしれません。（つまり、<img>、<br>、<hr>など）ただし、JSXには終了タグが必要です。（つまり、<img />、<br />、<hr />など）そうしないと、エラーが発生する可能性があります。