1

我有一个现有的网站。在这个站点中，我在 URL www.example.com/apps/myApp 上有一个可用的页面。myApp 托管在现有的 HTML 页面中。这只是一个实用程序，所以我想借此机会学习 React。

有没有办法在这个页面中使用 ES6 而无需导入整个工具链？换句话说，我只想包含 React，用 ES6 编写代码，然后运行。我不想引入 Gulp 或 Webpack 并引入一些预编译步骤。这可能吗，还是我必须把整个墨西哥卷饼都带进来？

我一直在尝试找到一个可以做到这一点的基本地方，如Plunkr所示。其中，包括以下代码：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <h1>Hello World!</h1>
    <div id="myApp"></div>


    <script type="text/javascript" src="https://unpkg.com/react@15.3.1/dist/react.js"></script>
    <script type="text/javascript" src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.js"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>
  </body>

</html>
4

2 回答 2

3

尝试babel-standalone：

<h1>Hello World!</h1>
<div id="myApp"></div>
<script type="text/javascript" src="https://unpkg.com/react@15.3.1/dist/react.js"></script>
<script type="text/javascript" src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>
<script type="text/babel" data-preset="react">
  class MyLayoutComponent extends React.Component {
    render() {
      return (
        <div>
          <h3>React Loaded!</h3>
          <br />
        </div>
      );
    }
  }
  ReactDOM.render(<MyLayoutComponent />, document.getElementById('myApp'));
</script>

于 2016-09-17T18:13:33.000 回答
0

您可以将 React 库直接导入旧项目。只需像任何其他 JS 文件一样加载 ReactJS 库。

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

查看 ReactJS 入门以获取文档

要编写 ES6，你还需要 BabelJS

在作者编辑第一篇文章后更新。在此处查看 plnkr 上的示例代码。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>

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

    <script type="text/babel">

      var TestOut = React.createClass({
            render: function() {
              return (
                <h1>Hello world!</h1>
                );
            }
      });

      ReactDOM.render(
        <TestOut />,
        document.getElementById('myApp')
      );
    </script>


    <script type="text/javascript" src="https://unpkg.com/react@15.3.1/dist/react.js"></script>
    <script type="text/javascript" src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.js"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>
  </body>

</html>
于 2016-09-17T18:16:21.340 回答