react-engine – Reactでサーバサイドレンダリングするnode用ライブラリ // MOONGIFT Archived

Reactの魅力の一つにnodeを使ってサーバサイドレンダリングができるというのがあります。サーバサイドレンダリングを使うことで、初期表示はサーバサイドに任せつつ、その後の処理はクライアントサイドに任せることができるようになります。今のところExpressが手軽に対応しているようなのですが、Paypal社が開発したのがreact-engineです。これはExpress（に限らないでしょうが）のビューをReactで行ってくれるライブラリです。

react-engineの使い方

react-engineを使ったレンダリング処理部分です。見たとおりReactです。レイアウトをサポートしています。

'use strict';

var React = require('react');
var React = require('../../../../node_modules/react/react');

module.exports = React.createClass({

  render: function render() {

    return (
      <html>
        <head>
          <meta charSet='utf-8' />
          <title>
            {this.props.title}
          </title>
        </head>
        <body>
          {this.props.children}
        </body>
        <script src='/bundle.js'></script>
      </html>
    );
  }
});

さらにこちらはReactのビュー処理部分です。

'use strict';

var Layout = require('./layout.jsx');
var React = require('../../../../node_modules/react/react');
var Router = require('../../../../node_modules/react-router/lib');

module.exports = React.createClass({

  render: function render() {

    return (
      <layout {...this.props}>
        <router .RouteHandler {...this.props}/>
      </layout>
    );
  }
});

最後にReactの処理部分です。renderを使ってレンダリング処理を行います。

// set the engine
app.engine('.jsx', engine);

// set the view directory
app.set('views', __dirname + '/public/views');

// set js as the view engine
app.set('view engine', 'jsx');

// finally, set the custom view
app.set('view', renderer.expressView);

app.get('/', function(req, res) {
  res.render(req.url, {
    title: 'React Engine Express Sample App',
    name: 'Jordan'
  });
});

react-engineはあくまでもサーバサイドのレンダリングなので、クライアント側でのレンダリングおよびデータの受け渡しは別途処理を作る必要があるでしょう。nodeとReactを使って作る際にはぜひ参考にしてみてください。

react-engineはnode/JavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。

paypal/react-engine