(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中,从而显示到界面上;

  <body>
    <div id="root"></div>
  </body>

在html中创建一个id=root的节点;

ReactDOM.render(
  <h1>test</h1>,
  document.getElementById('root')
);

通过ReactDOM.render()把JSX标签渲染到id=root的节点上;

上一篇 下一篇

猜你喜欢

热点阅读