React.js: how to decouple jsx out of JavaScript

Question

Is there any way to move the jsx from a component's render function to a separate file? If so, how do I reference the jsx in the render function?

Answer 1

You can use react-templates. It gives you exactly this separation between the markup and the component itself, and much more.

I found it very useful for my needs (a large scale web app).

Answer 2

One problem with moving templates into a separate file is that if you use handlers like:

var myTemplate = (     <form onSubmit={this.handleSubmit}></form> ); 

and then in your component you use:

render: function() {     return myTemplate; } 

the generated template code will call this.handleSubmit(), so the "this" will be wrong and the handlers won't work. What you need to do is put them in a function, like this:

var myTemplate = function() {     return (         <form onSubmit={this.handleSubmit}></form>     ); }; 

then in your component's render function, you need to bind it to 'this' correctly, then call it, like this:

render: function() {     return myTemplate.bind(this)(); }, 

Now you can put that template definition anywhere, in a separate file or however you want to structure and reference your own code. (power to you! Don't listen to these crazy prescriptive frameworks! :) )