零基础学了快两个月的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语法问题)。
写不动了,感兴趣直接看代码吧:
原文链接:/react/305709.html