转载

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',   "JSXTransformer": 'vendor/JSXTransformer',   jsx: 'vendor/jsx',   'react.backbone': 'vendor/react.backbone',   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',  'backbone',  'react',  'jsx!component/IndexComponent.react',  'jsx!component/AboutComponent.react',  'jsx!component/ProductComponent.react',  'jsx!component/ProjectComponent.react',  'jsx!component/LibraryComponent.react',  'model/UserModel',  'data/libraries' ],function(_, Backbone, React, 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 />, document.getElementById('main_content'));   },   product: function(){    React.render( <ProductComponent />, document.getElementById('main_content'));   },   library: function(){    React.render( <LibraryComponent items={libraries} />, document.getElementById('main_content'));   },   project: function(){    var user = new UserModel({name: 'phodal'});    var UserView = React.createFactory(ProjectComponent);    var userView = new UserView({model: user});    React.render(userView, document.getElementById('main_content'));   },   initialize: function() {    var self = this,     routes = [      [ /^.*$/, 'index' ],      [ 'about', 'about' ],      [ 'product', 'product' ],      [ 'project', 'project' ],      [ 'library', 'library' ]     ];    _.each(routes, function(route) {     self.route.apply(self, route);    });    Backbone.history.start();   }  });  return AppRouter; });