脚本不运行 React答案

【问题标题】：Script doesn't run React脚本不运行 React
【发布时间】：2017-11-13 19:30:04
【问题描述】：

我正在尝试使用 React.js 代码运行一个单独的文件。

但是当我尝试运行该文件时它不起作用。页面只是一片空白。如果我在 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")
);

有没有办法让它工作？

【问题讨论】：

您需要从 Web 服务器运行它。有很多可用选项，例如 http-server 或 Chrome extension。
我使用 src="../../js/script.js 进行了更改我收到此错误：browser.min.js:4 Failed to load file:///C:/Users /antonidag/src/demos/001/script.js：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。具有的剂量
啊，好吧，所以我实际上必须从 Web 服务器运行它？假设我正在使用 Web 服务器，代码会起作用还是我必须想出另一个解决方案？
我推荐你使用create-react-app，因为你可以专注于你的应用程序和学习 React，然后你可以深入 webpack 来创建一个服务器并根据需要自定义你的构建
好的，谢谢！我会试试看！ React 很新，有很多不同的编码方式！ :)

标签： javascript reactjs file

【解决方案1】：

你需要加载 babel core Browser 来加载你的script.js 为text/babel

它将读取您的 script.js 并转换为 JSX。在 react-dom 之后插入这个

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

【讨论】：

您的意思是在我的 index.html 文件或我的 js 文件中？我试图将它插入到 index.html 文件中的 head 标记中。但仍然得到相同的错误：跨源请求仅支持协议方案：http、data、chrome。
是的，在的 index.html 中。您是直接在浏览器中打开 html 文件吗？您需要使用 Nginx、Apache 等网络服务器进行测试。您可以搜索托管服务提供商或 Github 页面。
感谢您的意见！我使用了 Apache，现在它可以工作了！