react.js without node.js外部ファイルで利用可能なコンポーネントクラスを含めることができません

Question

私はちょうど反応を学び始めました。

var HelloWorld = React.createClass({ 
 
     render: function() { 
 
      return ( 
 
      <p>Hello, {this.props.name}! </p> 
 
     ); 
 
    } 
 
}); 
 

 
ReactDOM.render(<HelloWorld name="Narayanan Arumugam" />,   
 
       document.getElementById("container"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
 
<div id="container"></div>

上記のコードは正常に動作してもNode.jsのを使用していません。今度は、外部ファイルにJavascriptコードを追加し、scripts.jsのように呼び出す方法をindex.htmlに含めます。

私は別のファイルに追加しようとしました。 scripts.jsファイルがindex.htmlと同じディレクトリレベルにあり、その内部にJavaScriptコードが置かれていました。 以下のコマンドでファイルを使用しようとしました。

<script type="text/babel" src="scripts.js"></script>

は、しかし、私は空白のページを得ました。私は間違って何をしていますか？

が、私は私のクラスを分離することができるようにしたい

Answer 1

（1）追加してください

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script> 

（2）のindex.htmlと私のためのすべての作品

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script> 
<div id="container"></div> 
<script src='c-s.js' type="text/babel"></script> 

のようなものとcs.js

var HelloWorld = React.createClass({ 
    render: function() { 
     return ( 
     <p>Hello, {this.props.name}! </p> 
    ); 
} 
}); 

ReactDOM.render(<HelloWorld name="Narayanan Arumugam" />,   
      document.getElementById("container")); 

あなただけのindex.htmlを実行したとき（3）、あなたはこの

Fetching scripts with an invalid type/language attributes is deprecated and will be removed in M56, around January 2017. See https://www.chromestatus.com/features/5760718284521472 for more details. 

browser.js:5773 XMLHttpRequest cannot load file:///C:/Users/sbt-dudkin-av/src/domize-0/c-s.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. transform.load @ browser.js:5773 

（4）あなたはこの作業が必要な場合は、サーバーからそれをロードする（例えば、インストールノードのように、コンソールや空白の画面でセキュリティエラーが発生しますhttp-serverを実行し、フォルダに 'http-server'を実行してください。ブラウザで 'localhost：8085'を実行してください）