Come esportare componenti per il rendering in lato server Reagire

Question

All:

io sono abbastanza nuovo a reagire, in questo momento sto cercando come fare il rendering lato server, io uso Express.js come mio server, in modo che il codice di è come:

//server.js 
var express = require("express"); 

var ReactDOMServer = require("react-dom/server"); 
var MyCom = require("./components"); 
var domstring = ReactDOMServer.renderToString(MyCom); 

var app = express(); 
app.get("/", function(req, res){ 
    res.json({ 
     name: "new com", 
     dom: domstring 
    }); 
}); 

E

// components.js 
var React = require("react"); 

var MyCom = React.createClass({ 
    render: function(){ 
     return (<h1>Hello, server side react</h1>); 
    } 
}); 

module.exports = MyCom; 

io uso babel a transpile il JSX, ma quando inizio assistente, non so il motivo per cui continuo a ricevere errore come:

Violazione invariante: renderToString(): è necessario passare un Elemento di Reazione valido .

Qualcuno potrebbe dare qualche indizio sul motivo per cui questo non funziona?

Grazie

Answer 1

Il modulo esporta una ReactComponent, e renderToString accetta un ReactElement (vale a dire un istanziato ReactComponent).

Al fine di renderlo, si desidera creare un'istanza in questo modo:

ReactDOMServer.renderToString(<MyCom />); 

Answer 2

Utilizzando una fabbrica permette di avere tutti i componenti in file separati e senza l'utilizzo di un'istanza jsx sintassi nel vostro server. Molto utile per il componente principale del wrapper.

require('babel-core/register')({ 
    presets: ['react'] 
}); 

var express = require('express'); 
var reactDOM = require('react-dom/server'); 
var react = require('react'); 
var app = express(); 

app.get('/', function (req, res) { 
    var mainFile = require('./app.jsx'); 
    var output = reactDOM.renderToString(react.createFactory(mainFile)({ 
    data: yourInitialData 
    })); 
    res.send(output); 
});