反應 - 無法從外部文件加載代碼

我正在嘗試學習React，並且我想從最簡單的示例開始。我從這裏得到一個：https://codeutopia.net/blog/2016/01/10/getting-started-with-react-the-easy-way/反應 - 無法從外部文件加載代碼

但代碼似乎拒絕從外部.js文件加載。

reacttest.html

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script> 
    </head> 

    <body> 
    <div id="app"></div> 
    <script src="main.js" type="text/babel"> 
     // Code omitted to keep sample short 
    </script> 
    </body> 
</html>

main.js

var App = React.createClass({ 
    render: function() { 
    return <div>Something something Dark Side</div>; 
    } 
}); 

ReactDOM.render(
    <App />, 
    document.getElementById('app') 
);

如果我把相同的代碼腳本標記內，然後它工作正常。我究竟做錯了什麼？

來源

2017-02-01 Adam

是否有任何錯誤被拋出？你是否在'main.js'中導入了'React'和'ReactDOM'？ –

是的。拋出的錯誤是** XMLHttpRequest無法加載file：//localhost/Users/username/react/main.js。只有HTTP支持跨源請求。' **現在我知道這是因爲Chrome。 – Adam

我想你可以在這種情況下，可以用一個HTML文件沒有服務器，所以當你嘗試導入你得到一個錯誤的文件main.js，你可以看到一個例子在這裏工作：https://plnkr.co/edit/rlo7U99UVUF5HmzaHHE4?p=preview

<!DOCTYPE html> 
<html> 

    <head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    </head> 

    <body> 
    <div id="example"></div> 
    <script src="script.js" type="text/babel"></script> 
    </body> 

</html>

嘗試使用服務器來呈現您的HTML文件，並應該工作。

來源

2017-02-01 04:44:36 damianfabian

如果您使用的是基於Chromium的Web瀏覽器，它會發生。您可以嘗試使用Mozilla Firefox或其他基於Mozilla的網絡瀏覽器。 Chrome不會以這種方式做出反應。此外，不推薦使用script標記的'type'（text/babel）屬性。所以，強烈建議使用反應服務器或支持反應的其他服務器。

來源

2017-02-01 11:14:50

在此處找到更多信息：http://stackoverflow.com/questions/20904098/react-js-example-in-tutorial-not-working – Adam

反應 - 無法從外部文件加載代碼

回答

相關問題