美文网首页
(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