React 渲染 HTML

  • 定义和使用

    React 的目标是通过多种方式在网页中呈现 HTML
    React 使用称为 ReactDOM.render() 的函数将 HTML 呈现到网页上。
    注意,本教程 React 代码环境围绕 npm 的构建环境进行学习,如不懂可以先阅读 React 环境搭建这章进行了解学习
  • 渲染功能

    ReactDOM.render() 函数接受两个参数,HTML 代码和一个 HTML 元素。
    该功能的目的是在指定的 HTML 元素内显示指定的 HTML 代码。
    在“根”元素内显示一个段落:
    index.js:
    import React from 'react';
    import ReactDOM from 'react-dom';
    ReactDOM.render(<p>Hello</p>, document.getElementById('root'));
    
    结果显示在 <div id="root"> 元素中:
    index.html:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>React App</title>
      </head>
      <body>
    
        <div id="root"></div>
    
      </body>
    </html>
    
    运行结果如下:
    react
  • HTML代码

    本教程中的 HTML 代码使用 JSX,它允许您在 JavaScript 代码中编写 HTML 标签:
    如果语法不熟悉,请不要担心,您将在下一章中了解有关JSX的更多信息。
    下面创建一个包含 HTML 代码的变量,并将其显示在根节点中:
    index.js:
    import React from 'react';
    import ReactDOM from 'react-dom';
    const myelement = (
      <table>
        <tr>
          <th>Name</th>
        </tr>
        <tr>
          <td>John</td>
        </tr>
        <tr>
          <td>Elsa</td>
        </tr>
      </table>
    );
    
    ReactDOM.render(myelement, document.getElementById('root'));
    
    运行结果如下:
    react
  • 根节点

    根节点是要在其中显示结果的 HTML 元素。
    它就像一个由 React 管理的内容的容器。
    它不必是<div>元素,也不必具有 id ='root':
    根节点可以随意命名:
    index.html:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>React App</title>
      </head>
      <body>
    
        <header id="sandy"></header>
    
      </body>
    </html>
    
    在 <header id="sandy">元素中显示结果:
    index.js:
    import React from 'react';
    import ReactDOM from 'react-dom';
    ReactDOM.render(<h1>Hallo 菜鸟教程</h1>, document.getElementById('sandy'));
    
    运行结果如下:
    react