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 theReact 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语法问题)。

写不动了，感兴趣直接看代码吧：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!