大家好，欢迎来到IT知识分享网。
Helloworld
React.createElement用来创建一个react元素，有三个参数，1，元素的名称（html标签必须小写）2，标签中的属性3，元素的内容（子元素）。React元素最终会通过虚拟DOM转换为真实的DOM元素。React元素一旦创建就无法修改，只能通过新创建的元素进行替换。
ReactDOM.createRoot，根元素就是react元素要插入的位置
Root.render(div)，用来将react元素渲染到根元素中.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
<script src="react.development.js"></script>
<script src="react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script>
const button=React.createElement('button',{id:'btn',className:'hello',onClick:()=>{alert('不要点我')}},'点我一下');
const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(button);
</script>
</body>
</html>Jsx
JSX就是React.createElement的替换。需要引入babel。class用className代替。如果想把数组渲染成列表，可以用map方法，const arr=data.map((item)=> <li key={item}>{item}</li>)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
<script src="react.development.js"></script>
<script src="react-dom.development.js"></script>
<script src="babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const button=<button>我是按钮</button>
const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(button);
</script>
</body>
</html>免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/57288.html
