React.js:将React.js代码与HTML分开

Question

我刚开始接触React.js，只是尝试一下而已。我的index.html中有如下代码：

​

<script type="text/babel">
	var galleryData = [
		{ smallURL: "https://farm6.static.flickr.com/5650/22151329006_9d32e48fe9_s.jpg", bigURL: "https://farm6.static.flickr.com/5650/22151329006_9d32e48fe9_b.jpg", title: "Nothing Gold Can Stay" },
		{ smallURL: "https://farm6.static.flickr.com/5650/22151329006_9d32e48fe9_s.jpg", bigURL: "https://farm6.static.flickr.com/5650/22151329006_9d32e48fe9_b.jpg", title: "Nothing Gold Can Stay"}
	];

	var ThumbNail = React.createClass({
		render: function(){
			return (<a href={this.props.data.bigURL} title={this.props.data.title} data-gallery=""><img src={this.props.data.smallURL} /></a>);
		}
	});
      ....
</script>

​

我的问题很简单，但我太笨了，无法搞清楚:我能否将这个标记中的整个脚本分离到另一个文件中，然后像我们如何正常地使用javascript文件一样引用它呢？

如果是，这个文件的扩展名是什么，我如何在HTML中引用它？

Answer 1

您可以也应该将您的JavaScript放在单独的文件中。为了作出反应，大多数人使用文件扩展名.jsx在JSX中编写代码。

至于如何将其连接起来，我建议https://facebook.github.io/react/docs/getting-started.html#separate-file。Facebook在他们的文档方面做得很好。