React入门教程：使用ReactDOM.render()渲染Hello World
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>这段代码使用了React的ReactDOM.render()函数来将<h1>Hello, world!</h1>这个React元素渲染到id为"example"的div元素中。
<p>具体解释如下：</p>
<ol>
<li>
<div id="example"></div>：这是一个空的div元素，用于容纳React渲染的内容。
</li>
<li>
<script type="text/babel">：这是一个用于解析并执行ES6及JSX语法的脚本标签。
</li>
<li>ReactDOM.render()：这是React的渲染函数，用于把React元素渲染到DOM中。</li>
<li>
<h1>Hello, world!</h1>：这是一个React元素，表示要渲染的内容，它是一个h1标签，显示文本"Hello, world!"。
</li>
<li>document.getElementById('example')：这是一个DOM操作，通过id选择器获取id为"example"的div元素。</li>
<li>最后，ReactDOM.render()函数将React元素<h1>Hello, world!</h1>渲染到id为"example"的div元素中，使得页面上显示出"Hello, world!"这段文本。</li>
</ol>
原文地址: https://www.cveoy.top/t/topic/pp6e 著作权归作者所有。请勿转载和采集!