(1)React 元素渲染到根 DOM 节点
<div id="root"></div>
<script type="text/babel">
const element = <h1 className="foo">Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
</script>
(2)嵌套多个 HTML 标签,需要使用一个 div 元素
<div id="root"></div>
<script type="text/babel">
const element = <h1 className="foo">Hello, world1</h1>;
ReactDOM.render(
<div>
<h1 className="foo">Hello, world1</h1>
</div>,
document.getElementById('root')
);
</script>
(3)创建一个 helloworld_react.js
文件
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
<body> <div id="example"></div> <script type="text/babel" src="helloworld_react.js"></script> </body>
(4)使用 conditional (三元运算) 表达式来替代
<div id="example"></div>
<script type="text/babel">
var i = 1;
ReactDOM.render(
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
,
document.getElementById('example')
);
</script>