Renderização do servidor React.js e manipuladores de eventos
Estou aprendendo a usar o react.js e tenho alguns problemas para usar os manipuladores de eventos. A pergunta final seria: É possível usar a renderização no servidor e enviar manipuladores de eventos para o cliente automaticamente?
Aqui está o meu exemplo: Eu tenho um index.jsx que processo do lado do servidor e envio ao cliente
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>
)
}
});
Mas o "botão Curtir" não possui nenhuma interação. Para fazer algo clicar, eu tenho que adicionar esse código do lado do cliente.
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')
);
Eu só comecei com o react.js e talvez esteja perdendo algum conceito importante aqui. Mas por que o react.js não apenas cria o código (que agora preciso adicionar manualmente ao cliente) ao renderizar o servidor de páginas? Assim, eu tenho código redundante e parece que isso será uma bagunça em aplicativos maiores. Pelo menos react.js é inteligente o suficiente para não desenhar dois LikeButtons, mas para "vincular" o lado do servidor criado ao componente do lado do cliente.