美文网首页
(React)认识React语法

(React)认识React语法

作者: fanren | 来源:发表于2021-04-06 20:15 被阅读0次
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的节点上;

相关文章

网友评论

      本文标题:(React)认识React语法

      本文链接:https://www.haomeiwen.com/subject/svzohltx.html