ReactでHTML(DOM)を表示させる

Rendering Elementsという項目でHTML(DOM)を表示させる方法を確認する

reactjs.org

<div id="test"></div>

上のように1行だけのdivタグがあった場合、これに対してDOMを追加する場合は、ReactDOMクラスのrenderメソッドを呼べばよい。

<div id="test"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">

ReactDOM.render(
  <div>Hello React</div>,
  document.getElementById('test')
);

</script>

簡単なHTMLであればReactDOM.renderメソッドで用が足りるが、複雑な場合は、React.Componentクラスのrenderメソッドを使えばいい。

class HelloMessage extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>Hello React</div>
  }
}

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('test')
);