javascriptjqueryhtmlreactjs

React.js: Separate React.js code from HTML

I am new to React.js and just trying it out. I have a code in my index.html as follow:

<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>

My question is simple yet I am too dumb to figure it out: Can I separate the whole script inside this tag into another file, and reference it like how we do it with javascript file in a normal way?

If yes, what is the extension of this file and how can I reference it in my HTML?

Solution

  • You can, and should, put your JavaScript into separate files. For React, the majority of people write their code in JSX using the file extension .jsx.

    As for how to link it up, I suggest https://facebook.github.io/react/docs/getting-started.html#separate-file. Facebook has done a very good job with their documentation.