Skip to content

Instantly share code, notes, and snippets.

@prashanta
Last active June 3, 2016 08:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save prashanta/f618bfe718b8e75108dfdcdac6fe1891 to your computer and use it in GitHub Desktop.
Save prashanta/f618bfe718b8e75108dfdcdac6fe1891 to your computer and use it in GitHub Desktop.
Reusing ES6 React Component on Server Side (yup, node.js does not support ES6 yet, so this is a hack using Babel)
var express = require('express');
var router = express.Router();
var babel = require("babel-core");
var React = require('react');
// Get ReactDOMServer for server side rendering
var ReactDOMServer = require('react-dom/server');
// Compile code transformed by babel.transformFileSysnc
module._compile(babel.transformFileSync('./public/js/components/header.js').code);
// Save it to a accessible header before moudle.exports gets replaaced
var Header = module.exports;
// Create markup from newly acquired React Component
var headerMarkup = ReactDOMServer.renderToStaticMarkup(React.createFactory(Header)());
module.exports = function (app) {
app.use('/', router);
};
router.get('/help', function(req, res) {
res.render('help', {header: headerMarkup});
});
router.get('/about', function(req, res) {
res.render('about', {header: headerMarkup});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment