如何调用 script.jsx 以使 react.js 工作

我正在尝试学习反应.js。我正在尝试设置一个小测试环境，但不明白为什么我的 script.jsx 不起作用？您必须对文件执行任何特殊操作吗？如果我在同一页面上的所有内容都可以正常工作，如下所示：

 <!DOCTYPE html>
    <html>
      <body>
        <div id="root"></div>
        <script src="react-0.13.3.js"></script>
        <script src="JSXTransformer-0.13.3.js"></script>
        <script type="text/jsx">
          var Button = React.createClass({
            localHandleClick: function() {
              this.props.localHandleClick(this.props.increment);
            },
            render: function() {
              return (
                <button onClick={this.localHandleClick}>+{this.props.increment}</button>
              )
            }
          });
          var Result = React.createClass({
            render: function() {
              return (
                <div>{this.props.localCounter}</div>
              )
            }
          })
          var Main = React.createClass({
            getInitialState: function() {
              return {counter: 0};
            },
            handleClick: function(increment) {
              this.setState({ counter: this.state.counter+increment });
            },
            render: function() {
              return (
                <div>
                  <Button localHandleClick={this.handleClick} increment={1} />
                  <Button localHandleClick={this.handleClick} increment={5} />
                  <Button localHandleClick={this.handleClick} increment={10} />
                  <Button localHandleClick={this.handleClick} increment={100} />
                  <Result localCounter={this.state.counter} />
                </div>
              )
            }
          })
          React.render(<Main />, document.getElementById("root"));
        </script>
      </body>
    </html>

但是当我尝试拥有一个索引.html文件和一个 script.jsx 文件时，我无法让它运行：像这样：

索引.html

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
    <script src="react-0.13.3.js"></script>
    <script src="JSXTransformer-0.13.3.js"></script>
    <script type="text/jsx" src="script.jsx"></script>
  </body>
</html>

脚本.jsx

var Button = React.createClass({
  localHandleClick: function() {
    this.props.localHandleClick(this.props.increment);
  },
  render: function() {
    return (
      <button onClick={this.localHandleClick}>+{this.props.increment}</button>
    )
  }
});
var Result = React.createClass({
  render: function() {
    return (
      <div>{this.props.localCounter}</div>
    )
  }
})
var Main = React.createClass({
  getInitialState: function() {
    return {counter: 0};
  },
  handleClick: function(increment) {
    this.setState({ counter: this.state.counter+increment });
  },
  render: function() {
    return (
      <div>
        <Button localHandleClick={this.handleClick} increment={1} />
        <Button localHandleClick={this.handleClick} increment={5} />
        <Button localHandleClick={this.handleClick} increment={10} />
        <Button localHandleClick={this.handleClick} increment={100} />
        <Result localCounter={this.state.counter} />
      </div>
    )
  }
})
React.render(<Main />, document.getElementById("root"));

在控制台中，它是这样说的：

You are using the in-browser JSX transformer. Be sure to precompile your JSX for production - http://facebook.github.io/react/docs/tooling-integration.html#jsx

和

XMLHttpRequest cannot load file:///C:/Users/davidb/Desktop/TestReact/script.jsx. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

有人会告诉我我必须做什么才能让它正常工作，而不是得到这个愚蠢的白屏。

问题是您没有运行服务器。在浏览器中，您使用的是file://协议。使用 Chrome 等浏览器不允许您在使用 file:// 协议时通过XMLHttpRequest加载文件。

XMLHttpRequest 无法加载 file:///C:/Users/davidb/Desktop/TestReact/script.jsx。跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https、chrome-extension-resource。

相反，在localhost上启动服务器，您的代码应该可以工作。

看起来您正在运行Windows。设置本地服务器的一种方法是通过 http://www.wampserver.com/en/

如果您运行的是 Mac，则可以执行以下操作：

cd ~/path/to/your/project
python -m SimpleHTTPServer 8000
open http://localhost:8000

相关内容

最新更新

热门标签：