Backbone React Requirejs 应用实战(一)——RequireJS管理React

试着用React替换Mustache打造了一个简单的页面，http://backbone-react.phodal.com/，当然Router用的还是Backbone的Router(react-router似乎还没有做准备好做client-side的Router)。

Backbone RequireJS React 组合

组合的情况以及开发环境如下

• IDE: Webstorm(开源license，支持JSX)
• Backbone: Router + Model
• React: react-with-addons
• JSXTransformer
• react.backbone

其他

• loadsh替换underscore
• zepto替换jquery
• RequireJS jsx插件

RequireJS管理React依赖

JSX Requirejs

github上有一个插件是: jsx-requirejs-plugin

A RequireJS plugin for JavaScript files containing JSX. It's r.js friendly (i.e. all files containing JSX will be pre-compiled during the r.js build).

于是，安装jsx-requirejs-plugin

bower install jsx-requirejs-plugin --save-dev

Requirejs JSX使用

1.添加paths

react: 'vendor/react-with-addons.min',"JSXTransformer": 'vendor/JSXTransformer',jsx: 'vendor/jsx','react.backbone': 'vendor/react.backbone',

2.使用jsx!

require(['jsx!app.react'],function (App) {

});

最后我的main.js如下所示:

'use strict';

require.config({
    paths: {
        jquery: 'vendor/jquery.min',react: 'vendor/react-with-addons.min',backbone: 'vendor/backbone',underscore: "vendor/lodash.min",text: 'vendor/text'
    },shim: {
        underscore: {
            exports: '_'
        }
    }
});

require([
    'backbone','jsx!app.react'
],function (Backbone,App) {
    App.initialize();
});

换句话说，我们将app.react.js视作app.react.jsx(这里的.react是为了区分js和jsx)。

下面是我的router.react.js

define([
    'jsx!router.react'
],function (Router) {

    var initialize = function () {
        new Router();
    };

    return {
        initialize: initialize
    };
});

在我们的router里导入了不同的component，下面是一个精简的router

'use strict';

define([
    'underscore','backbone','react','jsx!component/IndexComponent.react',],function(_,Backbone,React,IndexComponent){
    var AppRouter = Backbone.Router.extend({
        index: function(){
            React.render( <IndexComponent />,document.getElementById('main_content'));
        }
        initialize: function() {
            var self = this,routes = [
                    [ /^.*$/,'index' ]
                ];

            _.each(routes,function(route) {
                self.route.apply(self,route);
            });
            Backbone.history.start();
        }
    });

    return AppRouter;
});

到此，我们可以愉快地用Requirejs管理我们的component。

其他

完整的Router

我的router如下所示:

define([
    'underscore','jsx!component/AboutComponent.react','jsx!component/ProductComponent.react','jsx!component/ProjectComponent.react','jsx!component/LibraryComponent.react','model/UserModel','data/libraries'
],IndexComponent,AboutComponent,ProductComponent,ProjectComponent,LibraryComponent,UserModel,libraries){
    var AppRouter = Backbone.Router.extend({
        index: function(){
            React.render( <IndexComponent />,document.getElementById('main_content'));
        },about: function(){
            React.render( <AboutComponent />,product: function(){
            React.render( <ProductComponent />,library: function(){
            React.render( <LibraryComponent items={libraries} />,project: function(){
            var user = new UserModel({name: 'phodal'});
            var UserView = React.createFactory(ProjectComponent);
            var userView = new UserView({model: user});
            React.render(userView,initialize: function() {
            var self = this,'index' ],[ 'about','about' ],[ 'product','product' ],[ 'project','project' ],[ 'library','library' ]
                ];

            _.each(routes,route);
            });
            Backbone.history.start();
        }
    });

    return AppRouter;
});

问题

1. JSXTransformer压缩后的大小>100kb

下一篇: 《Backbone React Requirejs 应用实战(二)——使用Backbone Model》

Github: https://github.com/phodal/backbone-react

（编辑：李大同）

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