在现有网站中使用 ES6 和 React

Question

我已有一个网站。在此站点中，我在 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>

Answer 1

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

Answer 2

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

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

查看 ReactJS Getting Started for documenation

要编写 ES6，你还需要 BabelJS

先编辑后更新post。在 plnkr here.

上查看此示例代码

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

在现有网站中使用 ES6 和 React

Using ES6 with React in existing Web Site

javascript

reactjs

es6-class