React.js: Separate React.js code from HTML

Question

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?

Henrik Andersson · Accepted Answer · 2015-11-06 07:57:15Z

1

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.

edited Nov 6, 2015 at 7:57

Henrik Andersson

47.5k16 gold badges102 silver badges94 bronze badges

answered Nov 6, 2015 at 6:56

Daniel Timberlake

1,1996 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React.js: Separate React.js code from HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related