React.js:从HTML中分离出React.js代码

时间:2015-11-06 06:51:48

标签: javascript jquery html reactjs

我是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>
&#13;
&#13;
&#13;

我的问题很简单,但我太傻了,无法弄清楚: 我可以将此标记内的整个脚本分成另一个文件,并像我们以正常方式使用javascript文件一样引用它吗?

如果是,该文件的扩展名是什么?如何在我的HTML中引用它?

1 个答案:

答案 0 :(得分:1)

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

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