Bolboa Bolboa - 3 months ago 10
Jade Question

React- How to preserve javascript when rendering server side

I am rendering my react component as so...

var express = require('express');
var router = express.Router();

var React = require('react');
var reactDom = require('react-dom/server');
var App = React.createFactory(require('../components/index'));

router.get('/', function(req,res) {
var reactHtml = reactDom.renderToString(App({}));
res.render('../../tutorHub/views/index.jade', {reactOutput: reactHtml});
});
module.exports = router;


Notice I am using
renderToString
. Now, on my jade file, the component is rendered as so...

<!DOCTYPE html>
html(lang="en")
head

link(rel="stylesheet", type="text/css", href="style.css")
link(rel="stylesheet", href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css")
body
!{reactOutput}

script(type="text/javascript", src="../index.js")


This renders fine, but none of the even handlers are called. I did some research and it turns out that using
renderToString
does not preserve the javascript in my react component.

How can I render this component server side and still preserve the event handlers?

I am using webpack, do I need to change the webpack.config? If so, how can I do that, my webpack skill are still pretty basic.

Answer

The solution was very simple. In my jade file, I was rendering it as...

!{reactOutput}

So what I did was change it to...

#app != reactOutput

and all the event handlers worked