（React）认识React语法
2021-04-06 本文已影响0人
fanren
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的节点上；
