Question

我有以下代码，其格式为.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>

Answer 1

只要您包含正确的库，它就会起作用：

＆＃13;

<!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>

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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>

在Hact中为ReactDOM.render放置代码行的位置？

2 个答案: