1

既存の Web サイトを持っています。このサイトには、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 に答える