ReactDOM.render 在 html 中的哪里放置代码行？答案

【问题标题】：Where to place line of code in html for ReactDOM.render?ReactDOM.render 在 html 中的哪里放置代码行？
【发布时间】：2017-11-09 03:09:33
【问题描述】：

我有以下代码，保存格式为 .html (index.html)。

我现在正在学习 React，当我在浏览器中执行这个 html 文件时，什么也没有发生。

我想知道这两行代码应该放在哪里或如何调用它们（执行渲染）。

如果我使用的是 mac，我在哪里可以找到 ./lib 中的文件？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Introduction | Learning React</title>
    <link rel="stylesheet" href="lib/style.css" />
  </head>
  <body>
    <section id="entry-point"></section>

    <!-- Wifi might be spotty, so we've downloaded these to `./lib` -->
    <script src="lib/react.js"></script>
    <script src="lib/react-dom.js"></script>

    <script type="text/javascript">
      // Intentionally blank. Your walk-through code will go here
      var hello = React.createElement('p', null, 'Hello, World!');

      // Checkout what this does by opening your HTML file in the browser
      ReactDOM.render(hello, document.getElementById('entry-point'));
    </script>
  </body>
</html>

【问题讨论】：

标签： javascript html react-native reactive-programming

【解决方案1】：

只要您包含正确的库，它就可以工作：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Introduction | Learning React</title>
    <link rel="stylesheet" href="lib/style.css" />
  </head>
  <body>
    <section id="entry-point"></section>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

    <script type="text/javascript">
      // Intentionally blank. Your walk-through code will go here
      var hello = React.createElement('p', null, 'Hello, World!');

      // Checkout what this does by opening your HTML file in the browser
      ReactDOM.render(hello, document.getElementById('entry-point'));
    </script>
  </body>
</html>

使用正确的设置（JSX compiler，例如 Babel），您可以将上述 createElement 简化为：

ReactDOM.render(
  <p>Hello, World!</p>,
  document.getElementById('entry-point')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="entry-point"></div>

【讨论】：

谢谢！我现在明白这是我缺少的库。

【解决方案2】：

如果您不想使用数据包管理器，您可以将 React 与 CDN 结合使用。

用于开发：

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

用于生产（缩小）：

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

【讨论】：