Last active
June 3, 2016 08:00
-
-
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)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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