在现有网站中使用ES6和React

Question

我有一个现有的网站。 在此网站中，我在网址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入门文档

为了编写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>

在现有网站中使用ES6和React

问题描述

2 个解决方案

解决方案1
3 已采纳 2016-09-17 18:13:33

解决方案2
0 2016-09-17 18:16:21

在现有网站中使用ES6和React

问题描述

2 个解决方案

解决方案1 3 已采纳 2016-09-17 18:13:33

解决方案2 0 2016-09-17 18:16:21

解决方案1
3 已采纳 2016-09-17 18:13:33

解决方案2
0 2016-09-17 18:16:21