Here's a simple react file that handles click:
//src/react/components/list.js
/** @jsx React.DOM */
var React = require('react/addons');
var List = React.createClass({
displayName: 'List',
handleClick: function() {
console.error('click');
var resultData = {
name: 'test',
version: '0.0.1'
};
},
render: function() {
return (
<div>
List
<button onClick={this.handleClick}>Add</button>
</div>
);
}
});
module.exports = List;
Button renders with no problem but nothing happens when I clicked it. I suppose it means server-side rendering works but client-side rendering is not working? I'm using grunt and browserify, and this is my Gruntfile.js:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
browserify: {
client: {
src: ['src/react/**/*.js'],
dest: 'public/js/react/main.js'
},
options: {
debug: true,
transform: ['reactify']
}
},
watch: {
js: {
files: ['src/react/**/*.js'],
tasks: ['browserify']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browserify');
grunt.registerTask('default', ['browserify', 'watch']);
};
And then I confirmed code in src/react/components/list.js is built into /public/js/react/main.js. So what could the problem be? Any help is appreciated!
