React.js：将 React.js 代码与 HTML 分开答案

【问题标题】：React.js: Separate React.js code from HTMLReact.js：将 React.js 代码与 HTML 分开
【发布时间】：2015-11-06 06:51:48
【问题描述】：

我是 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 中引用它？

【问题讨论】：

标签： javascript jquery html reactjs

【解决方案1】：

您可以而且应该将 JavaScript 放入单独的文件中。对于 React，大多数人在 JSX 中使用文件扩展名 .jsx 编写代码。

至于如何连接，我建议https://facebook.github.io/react/docs/getting-started.html#separate-file。 Facebook 在文档方面做得非常好。

【讨论】：