Ich lerne die Verwendung von "react.js" und habe einige Probleme bei der Verwendung der Ereignishandler. Die letzte Frage wäre: Ist es möglich, serverseitiges Rendering zu verwenden und Ereignishandler automatisch an den Client zu senden?

Hier ist mein Beispiel: Ich habe eine index.jsx, die ich serverseitig rendere und an den Client sende

var React = require("react");
var DefaultLayout = require("./layout/default");

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false}; 
  }, 
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  }, 
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  } 
});

var IndexComponent = React.createClass({
   render: function(){
       return (
           <DefaultLayout title={this.props.name}>
                <div>
                        <h1>React Test</h1>
                </div>

                <div id="testButton">
                    <LikeButton/>
                </div> 

                <script type="text/babel" src="/js/react.js"></script>
           </DefaultLayout>
       )
   }   
});

Aber der "Like Button" hat keine Interaktion. Ich muss diesen Code client-seitig hinzufügen, damit es beim Klicken etwas macht.

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('testButton')
);

Ich habe erst mit react.js angefangen und hier fehlt mir vielleicht nur ein wichtiges Konzept. Aber warum erstellt react.js nicht nur den Code (den ich jetzt manuell zum Client hinzufügen muss), wenn die Seite serverseitig gerendert wird? So habe ich redundanten Code und es fühlt sich so an, als würde dies bei größeren Anwendungen ein Durcheinander sein. Zumindest react.js ist klug genug, nicht zwei LikeButtons zu zeichnen, sondern die erstellte Serverseite an die clientseitige Komponente zu "binden".