ReactでHTML(DOM)を表示させる
Rendering Elementsという項目でHTML(DOM)を表示させる方法を確認する
<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') );