1
react.jsを学習しようとしています。少しテスト環境をセットアップしようとしていますが、なぜscript.jsxが機能していないのか分かりません。ファイルに特別なことはありますか？私は、同じページ上のすべてのものを持っている場合は、次のように正常に動作している：react.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>
しかし、私はindex.htmlファイルとscript.jsxファイルを持ってしようとすると、私はそれを実行するために得ることができない。このように：
をindex.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>
script.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.
誰かが私はこれは、代わりにこの愚かな白い画面を取得する正常に動作してもらうために何をしなければならないかを教えてくださいます。
https://fb.me/を実際のリンクだったが、それはできないだろう私はそれらを投稿する –