React.js服務器渲染實例(React server side rendering example)

零基礎學了快兩個月的React了(React-native + React.js)，所謂的000基礎是指徹底不懂JS，CSS，HTML5還有任何相關概念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引用

問題一：名字我已經起不出來了，每個頁面即有.jade和.jsx, 本身寫的都容易看暈

./views/<layout.jade>

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/<index.jade>

extends layout

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

./views/<index.jsx>

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

問題二：須要把變量轉爲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;

問題三: react-native支持es6, 但express默認es5，更況且瀏覽器支持至關差, 同一個項目用量終於發現寫特別鬧騰，能不能講react.js項目語法升級下呢？

問題四：加載速度，這也偏偏是服務器渲染能解決的，不過另外一個好處SEO，這個我目前到不在乎。

---

改版後：

Express框架，使用模版引擎express-react-views。由webpack負責將.jsx翻譯成對應的.js文件(webpack順帶解決了es6語法問題)。

寫不動了，感興趣直接看代碼吧：