If you want to decouple JSX out of JavaScript in React? Here is a pattern for separating the template jsx that uses CommonJS modules in NodeJS, Browserify or Webpack. In NodeJS, I found the node-jsx module helpful to avoid the need to compile the JSX.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | // index.js require('node-jsx').install({extension: '.jsx'}); var React = require('react'), Component = require('./your-component'); // your-component.jsx var YourComponent, React = require('react'), template = require('./templates/your-component.jsx'); module.exports = YourComponent = React.createClass({ render: function() { return template.call(this); } }); // templates/your-component.jsx /** @jsx React.DOM */ var React = require('react'); module.exports = function() { return ( <div> Your template content. </div> ); }; |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
