React.jsサーバレンダリングインスタンス(React server side rendering example)

ゼロベースはもうすぐ2ヶ月のReactを学びました(React-native+React.js)、000ベースとはJS、CSS、HTML 5に関連する概念Dom、Server renderingなどが全く分からないことを指します.PS:ここでサーバーレンダリングというのは、誤打誤突で、Jade Templateを交換したいだけです.
もともと私はモバイル端末を持っていて、Reactと.jsは関係ありませんが、私が学んだときReact-native(0.25)のチュートリアルに「Reactjsに関する経験があると思います.なければ、勉強してもいいです」とありました.原文は以下の通りです.
"We assume you have experience writing applications with React. If not, you can learn about it on the React website."
技が多くて深まらないのか、大神が言った以上、ちょうどアリ雲が手を練習することができて、やります!!!
改版前:
Expressフレームワーク、デフォルトのテンプレートエンジンJade(新版はPugと改名)を使用します.express-jsxが担当する.jsxは対応するように翻訳する.jsファイルはjadeで参照できるようにします
質問1:名前はもう起きられません.ページごとにあります.JAdeと.jsx、自分で書いたのはすべてめまいがしやすいです
./views/

doctype html
html
  head
    title=title
    link(rel='stylesheet', href='/css/style.css')
    link(rel='stylesheet', href='/css/bootstrap.min.css')
    block head
  body
    script(src='/js/react.min.js')
    script(src='/js/react-dom.min.js')
    block content
    script(src='/js/jquery.min.js')
    script(src='/js/bootstrap.min.js')
    

./views/

extends layout

block content
    

    script(src='index.js')
    script.
        'use strict';
        var result = !{param};
        ReactDOM.render(React.createElement(Index, { name: result }), content);

./views/

var Index = React.createClass({
  getInitialState: function () {
    return { count: 0 };
  },
  handleClick: function () {
    this.setState({
      count: this.state.count + 1,
    });
  },
  render: function () {
    return (
      
        Click {this.props.name.name}! Number of clicks: {this.state.count}
      
    );
  }
});

問題2:変数をjsonに変換してjadeに渡し、jadeからreactに渡す必要がある.js
./routes/index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  var jsonStr = JSON.stringify({'name': 'here'}, {indent: true});
  res.render('index', { param: jsonStr });
});

module.exports = router;

問題3:react-nativeはes 6をサポートしているが、expressのデフォルトes 5は、ましてブラウザのサポートがかなり悪いので、同じプロジェクトの使用量がやっと書くのが特に騒がしいことを発見し、reactを話すことができるかどうか.jsプロジェクトの文法のアップグレードは?
問題4:ロード速度、これもちょうどサーバーレンダリングで解決できますが、もう一つのメリットSEOは、私は今まで気にしていません.
改版後:
Expressフレームワークで、テンプレートエンジンexpress-react-viewsを使用します.Webpackが担当します.jsxは対応するように翻訳する.jsファイル(webpackはes 6構文の問題をついでに解決した).
書けなくなったので、興味を持ってコードを直接見ましょう.