スクリプトが実行されないReact

React.jsコードで別のファイルを実行しようとしています。スクリプトが実行されないReact

しかし、私はファイルを実行しようとしているときに動作しません。ページは空白です。私がHTMLファイルでインラインスクリプトを実行すると、うまく動作します。

私はこのように私のhtmlファイルを持つようにしたい：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>React - Projekt</title> 
    <script src="../../js/react.min.js"></script> 
    <script src="../../js/react-dom.min.js"></script> 
    <script src="../../js/browser.min.js"></script> 
    <script src="../../js/albums.js"></script> 
</head> 
<body> 

    <div id="container"></div> 

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

</body> 
</html>

と私のjsファイル：

var Albums = React.createClass({ 
    render: function() { 
     return (
      <div className="albums"> 
       {this.state.albums.map(function(album, index) { 
        return (
         <Album 
          album={album} 
          onClick={this.removeAlbum.bind(this, index)} 
          /> 
        ) 
       }, this)} 
      </div> 
     ) 
    } 
}); 

// Rendera the shit innehåll 
ReactDOM.render(
    <Albums />, 
    document.getElementById("container") 
);

は、この作品を作るための方法はありますか？

出典

2017-11-13 antonidag

Webサーバーから実行する必要があります。 [http-server]（https://www.npmjs.com/package/http-server）や[Chrome拡張機能]（https://chrome.google.com/webstore/detail/）など多くのオプションがありますweb-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb？hl = ja）。 –

src = "../../ js/script.js"を使って変更を加えました browser.min.js：4ファイルをロードできませんでした：/// C：/ Users/antonidag/src /デモ/ 001/script.js：クロスオリジンリクエストは、プロトコルスキーム（http、データ、クロム、クロムエクステンション、https）でのみサポートされます。 – antonidag

ああ、実際にはWebサーバーから実行する必要があります。？私はWebサーバーを使用していますが、コードが動作するのでしょうか、別の解決策が必要ですか？ – antonidag

は、あなたはそれがあなたのscript.jsを読み、JSXに変換されますあなたのscript.js

text/babelとしてロードするバベルコアブラウザをロードする必要があります。レスポンスドームの後に挿入する

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

出典

2017-11-13 19:39:51

あなたは私のindex.htmlファイルまたは私のjsファイル内の意味ですか？これをindex.htmlファイル内のheadタグに挿入しようとしました。しかし、同じエラーが発生します。クロスオリジン要求は、プロトコルスキーム（http、data、chrome）でのみサポートされています。 – antonidag

はい、index.htmlのにあります。ブラウザで直接htmlファイルを開いていますか？ ** Nginx、Apache **のようなWebサーバーでテストする必要があります。ホスティングプロバイダまたはGithubページを検索することができます。 –

入力いただきありがとうございます！私はApacheを使用して、今は動作しています！ – antonidag

スクリプトが実行されないReact

答えて

関連する問題