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

写不动了,感兴趣直接看代码吧:

阅读 3.8k

320 声望
16 粉丝
0 条评论
320 声望
16 粉丝
文章目录
宣传栏