ReactDOM.render(
<h1>test</h1>,
document.getElementById('root')
);
一、JSX语法
在React中,没有使用HTML标签来绘制UI,而是使用了JSX语法。
<h1>test</h1>
当然JSX语法中,也可以嵌入js表达式;
const name = 'react';
function username() {
return 'zhangsan'
}
ReactDOM.render(
<div>
<h1>{name}</h1>
<h2>{username()}</h2>
</div>,
document.getElementById('root')
);
二、React渲染
怎么把上述的React元素渲染到DOM中,从而显示到界面上;
- html代码
<body>
<div id="root"></div>
</body>
在html中创建一个
id=root
的节点;
- React代码
ReactDOM.render(
<h1>test</h1>,
document.getElementById('root')
);
通过
ReactDOM.render()
把JSX标签渲染到id=root
的节点上;
网友评论