legos-react

[dearlordchen]

Legos-React

上周《永不止步的前端》分享之后，从同学们的反馈来看，普遍都觉得react很酷，很值得尝试，但是webpack+gulp的方案有点重，有点颠覆现在的开发模式，所以贴心的罗德大神连夜折腾了一个legos4+reactjs的方案，目前已经在开发环境搭建完毕，亲测体验很ok，现在把使用文档丢出来：

legos增加react模块

已经在公共模块增加react模块如下图：

我写的demo业务模块如下图：

调用react模块代码如下（跟其他公共模块没什么两样^_^）：

define('test.react', function(require, exports, module){
    var _cacheThisModule_;
    var React = require('react');
    var $ = require('zepto');

    exports.init = function() {
        /**
         * Created by lordchen on 15/5/18.
         */

        var Timer = React.createClass({displayName: "Timer",
            getInitialState: function() {
                return {secondsElapsed: 0};
            },
            tick: function() {
                this.setState({secondsElapsed: this.state.secondsElapsed + 1});
            },
            componentDidMount: function() {
                this.interval = setInterval(this.tick, 1000);
            },
            componentWillUnmount: function() {
                clearInterval(this.interval);
            },
            render: function() {
                return (
                    React.createElement("div", null, "Seconds Elapsed very fast: ", this.state.secondsElapsed)
                    );
            }
        });

        React.render(React.createElement(Timer, null), document.body);

    }
});

恭喜大家，基于legos的一个酷酷的计时器react应用已经开发完成了

但是了解react的人应该都知道上面这种不是基于JSX的代码写起来太low了，而且html标签的优势也都消失殆尽了，需要把jsx模板转换的工具也集成进来，操作步骤如下：

1. 在static/js 目录下新建目录jsx
2. 下载安装nodejs
3. 安装react-tools

npm install -g react-tools

1. 设置jsx自动编译(记得关注文件路径，要先进入你本机代码所在目录)

jsx -w ./jsx ./module

看到上面的截图，表示jsx已经在watch./jsx 目录下地文件修改，并且实时在module目录下生成一个同名的编译后的js文件，接下来应该怎么做，相信大家都懂了。

不要犹豫了，赶紧尝试一下，有任何问题请随时咨询罗德大神，妹子优先~~

[jiguang]

牛逼！