React.js：将React.js代码与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?

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