添加对网站的反应：如何导入外部节点模块？答案

【问题标题】：add react to a website : how import external node module?添加对网站的反应：如何导入外部节点模块？
【发布时间】：2019-05-21 03:49:12
【问题描述】：

从这个资源https://reactjs.org/docs/add-react-to-a-website.html 我已经将一个基本组件集成到我的静态网站中

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

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-content-loader@3.4.1/dist/react-content-loader.min.js" crossorigin></script>

  <!-- Load our React component. -->
  <script src="like_button.js"></script>    
</body>    
</html>

like_button.js ：

'use strict';

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return (
      <div>
        <button onClick={() => this.setState({ liked: true }) }>
          Like
        </button>
        <Facebook /> ???????????
      </div>
    );
  }
}

let domContainer = document.querySelector('#like_button_container');
ReactDOM.render(<LikeButton />, domContainer);

如何在这个组件中使用像https://www.npmjs.com/package/react-content-loader这样的外部模块？

我尝试将脚本 https://unpkg.com/react-content-loader@3.4.1/dist/react-content-loader.min.js 添加到 html 页面中，并在我的组件中使用导入语句，但出现错误“未捕获的 ReferenceError：Facebook 未定义”

【问题讨论】：

标签： reactjs npm

【解决方案1】：

我从未尝试过 React 文档的 Add React to a Website 章节中的代码。这是修补它的好时机。

您附加的代码存在不止一个潜在问题。您没有在 index.html 中加载 Babel。至少在问题上。所以你不能在 like_button.js 中使用 jsx 语法。

第二个是你不能在这里使用导入。您必须找到包的命名空间是什么。我注销了窗口对象，检查了一下，它是 ContentLoader。

剩下的很简单，我用 babel 创建了一个独立的 index.html： https://codesandbox.io/s/w27pjmq355

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Hello React!</title>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script
      src="https://unpkg.com/react-content-loader@3.4.1/dist/react-content-loader.min.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>

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

    <script type="text/babel">
      console.log('window', window);
      class App extends React.Component {
        render() {
          return (
            <div>
              <h1>Hello world!</h1>
              <ContentLoader.Facebook />
            </div>
          );
        }
      }

      ReactDOM.render(<App />, document.getElementById('root'));
    </script>
  </body>
</html>

我认为您可以通过这种方式尝试 React，但不建议在生产环境中像这样使用 Babel。我强烈建议安装 node 并使用 create-react-app。这样您就可以立即使用整个工具链。

或者事件在 CodeSandbox.io 上创建一个新的 React 沙箱

【讨论】：

对于 Babel on dev 我启动命令“npx babel --watch src --out-dir . --presets react-app/prod”。例如，谢谢，您在哪里找到了的好例子？我放错了
你在哪里找到好的例子？
我确实找到了一个例子。我在窗口对象中找到了 ContentLoader 名称。我在示例代码中将其注销。您可以在日志中自己查看。