I am creating an isomorphic app with Webpack, React-Engine, express using the React-Engine example. I finally worked it out so the code renders properly but I've come across a new problem standard events are not firing. I click on the button and "clicked" should be written to the console, but it doesn't work. The code is in bundle.js, and I added a breakpoint on the function, but nothing is happening. This is not my first React app, but it is my first time using React-Engine so I am willing to bet it has something to do with the way I have uses React-Engine, and React-Router. The functions in public/index.js, which I presume is meant to load new view files, are never called in my project. Can you see why my events won't fire?
Server.js
require('node-jsx').install();
var express = require('express'); // call express
var app = express(); // define our app using express
...
var renderer = require('react-engine');
...
var engine = renderer.server.create();
app.engine('.jsx', engine);
app.set('views', __dirname + '/public/views');
app.set('view engine', 'jsx');
app.set('view', renderer.expressView);
app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res) {
res.render('app', {
title: 'React Engine Express Sample App',
});
});
public/index.js
var client = require('react-engine').client;
var Routes = require('./routes.jsx');
var AppHandler = require('./views/appHandler.jsx');
// boot options
var options = {
routes: Routes,
// supply a function that can be called
// to resolve the file that was rendered.
viewResolver: function(viewName) {
console.log(viewName)
return require('./views/' + viewName);
}
};
document.addEventListener('DOMContentLoaded', function onLoad() {
client.boot(options);
});
public/routes.js
var React = require('react');
var Router = require('react-router');
var AppHandler = require('./views/appHandler.jsx');
console.log(AppHandler);
//var Account = require('./views/account.jsx');
var routes = module.exports = (
<Router.Route path='/' handler={AppHandler}></Router.Route>
);
public/views/appHandler.jsx
var React = require('react');
var RouteHandler = Router.RouteHandler;
var App = require('./app.jsx');
var AppHandler = React.createClass({
render: function() {
return (
<App {...this.props} ></App>
);
}
});
module.exports = AppHandler;
public/views/app.jsx
var React = require('react');
module.exports = React.createClass({
clicked: function () {
console.log("clicked");
},
render: function render() {
return (
<html>
<body>
{this.props.title}
<button onClick={this.clicked}>button</button>
</body>
<script src='/bundle.js'></script>
</html>
);
}
});
i am stuck in same place, so i think there may be problem wit setup of project, maybe react-engine, or even the approach (which can be server side rendering - that's why you are getting page and events aren't rendered there to fire)
did you meantime solved your problem?
EDIT: i found workaround, that actually can help. The key is to move scripts to client side in app.jsx should be in render method that has libraries in header and calls run_script.js script
}
and the run_script.js looks (in my case) like
hope this helps