試著用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; });

問題

JSXTransformer壓縮后的大小>100kb

下一篇: 《Backbone React Requirejs 應用實戰(二)——使用Backbone Model》

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

總結

以上是生活随笔為你收集整理的Backbone React Requirejs 应用实战(一)——RequireJS管理React依赖的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。