阅读更多

0顶
0踩

Web前端

原创新闻 Backbone和ReactJS的整合

2015-07-24 15:31 by 见习记者 zhangzhaoaaa 评论(0) 有7293人浏览

Hello-React-Backbone

 

地址猛戳这里

目的:做Backbone和ReactJS的整合,该例子使用了Backbone的Model和ReactJS整合,可以认为是ReactJS替换掉了Backbone的View,这个是入门小例子 。

实现内容:通过传递的json数据构建Backbone的Model,将数据展现出来,点击按钮,修改数据,展示修改后的数据,btw,实现组件内部数据回传给外部的功能。

使用组件: 1. jquery 2. underscore 3. backbone 4. reactjs 5. seajs

例子是直接改的SeaJS的Hello的例子,可以看到此例子的痕迹哦。

注意:在此例子中,SeaJS例子已经处理了jquery,underscore,backbone,当然ReactJS也得处理咯,我这里处理相对简单,将ReactJS第一行的typeof define==="function"&&define.amd 改成了typeof define==="function"&&define.cmd即可,也就是将amd改成cmd。

例子目录结构:
app -->helloMessage.html 例子的主页面
myreact --> app.jsx 入口组件
myreact --> components--> HelloMessage.jsx 信息子组件
sea-modules--> 依赖的库
static\hello\src\build-->app.js app.jsx编译后的js文件
static\hello\src\build\components-->HellowMessage.js HellowMessage.jsx编译后的js文件

JSX文件编译:安装nodejs(话说这个是必装的啊),npm install -g react-toolshttps://www.npmjs.com/package/react-tools
执行命令:jsx -w -x jsx myreact/ static/hello/src/build 在主目录下(hello-react-backbone)下执行 -w 是观察文件修改,并自动重新生产js文件到指定的目录下 -x 文件扩展名的处理,默认是js myreact/ 目录是jsx文件的目录, static/hello/src/build 是生产js文件目录

ps:你要想在define作用域内直接使用JSXTransformer.js,请确定能其引入作用域中,我看到github上有人用requirejs做了插件处理,可以直接使用JSXTransformer.js编译Jsx文件,不过最好还是编辑成js文件吧,别老想着让自己认识,你得让机器认识这些代码才行啊。。。 可参考此处:https://github.com/philix/jsx-requirejs-plugin

参考:react-backbone的TodoMVChttps://github.com/tastejs/todomvc/tree/master/examples/react-backbone

0
0
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • hello-react-backbone:Backbone和ReactJS的整合,该项目使用了Backbone的Model和ReactJS进行整合使用,可以认为是ReactJS替换掉了Backbone的View,这个是入门小例子

    #Hello-React-Backbone**目的:**做Backbone和ReactJS的整合,该例子使用了Backbone的Model和ReactJS整合,可以认为是ReactJS替换掉了Backbone的View,这个是入门小例子 。**实现内容:**通过传递的json数据构建...

  • react前端面试题整合

    它用于处理网页和移动应用程序的视图层。React 是由 Facebook 的软件工程师 Jordan Walke 创建的。在 2011 年 React 应用首次被部署到 Facebook 的信息流中,之后于 2012 年被应用到 Instagram 上。 React 的主...

  • 10个最佳的ReactJS实例教程[译文]

    在这份教程中,Alex 讲述了使用Flux和backbone来构建ReactJS应用的 最有效的概念和模式。 Backbone库是用来填充flux架构之间的空隙的,如果你已经有亲手使用Flux构建ReactJS应用的经验,那么你可以快速掌握它。 ...

  • Backbone 中的继承

    最近又看了reactjs,很羡慕继承,想整合到项目中,但是用reactjs目前还不现实,多希望Backbone 也能拥有这样的特性,于是就查看Backbone中的继承到底是怎么回事。 以下是Backbone 中的extend源码部分 ...

  • 基于Reactjs实现webapp(加精)

    由于最近的reactjs实在太火,而且距离第一版已经快2年的时间了,已经相对稳定和成熟了,基于这两个前提下,团队对reactjs及其他开源技术进行了相关调研,发现落地是可行的,我们有4名前端同学,从调研到上线,大概花...

  • react框架和vue框架的区别以及相同之处

    React与当时流行的jQuery,Backbone.js和Angular 1等框架不同,它的诞生改变了JavaScript的世界。其中最大的变化是React推广了Virtual DOM(虚拟DOM)并创造了新的语法——JSX,JSX允许开发者在JavaScript中书写HTML...

  • ReactJS ,是否言过其实?

    这“百鸟”中,数ReactJS尤其火热,出身高贵,一面世就引起关注! 之后Facebook更是宣称支持构建安卓以及苹果原生应用,这对很多烦恼于多平台的企业更是一场及时雨! 但是事实真的如此吗?我在【如何选择框架】...

  • react与框架整合

    结合网络相关文档,记载react如何与线下框架整合,大神请绕道 gulp+require+backbone+react,借鉴github上demo梳理一下 大神github地址 https://github.com/phodal/backbone-react 1.页面结构  与传统搭建...

  • node.js、React和VUE的纯理论

    2.Instagram是一个’single page’网页应用完全由React和Backbone.Router构建的。设计者可以像通常一样使用JSX编写React代码。 3.我构建内部的应用雏形运行React在一个web工作站上,使用React去驱动本地ios视图通过...

  • 百度母婴技术团队—基于Reactjs实现webapp #1

    由于最近的reactjs实在太火,而且距离第一版已经快2年的时间了,已经相对稳定和成熟了,基于这两个前提下,团队对reactjs及其他开源技术进行了相关调研,发现落地是可行的,我们有4名前端同学,从调研到上线,大概花...

  • Vue与React两个框架的区别和优势对比

    React与当时流行的jQuery,Backbone.js和Angular 1等框架不同,它的诞生改变了JavaScript的世界。其中最大的变化是React推广了Virtual DOM(我们稍后探究)并创造了新的语法——JSX,JSX允许开发者在JavaScript中书写...

  • MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是将 M 和 V 的实现代码分离,从而使同一个程序可以使用不同的表现形式。 交互方式(所有通信都是单向的): ...

  • React.js: web开发者的14个工具和资源

    自从Facebook在2013年发布了库之后,React.js正在快速被...本文为广大开发者介绍了14个工具和资源,助力web开发。 作者:鲁行云来源:SDK.cn|2017-02-09 15:19  移动端  收藏  分享 CTO训练

  • 基于React.js实现webapp的技术实践

    由于最近的reactjs实在太火,而且距离第一版已经快2年的时间了,已经相对稳定和成熟了,基于这两个前提下,团队对reactjs及其他开源技术进行了相关调研,发现落地是可行的,我们有4名前端同学,从调研到上线,大概花...

  • 一大波前端干货整合【技术社区、博文、资源、工具】

    ...RequireJS与Backbone简单整合   RequireJS  RequireJS中文网 AngularJS  Angular中文网   angular-ui-router   AngularJS移动开发中的坑汇总 ReactJS  深入理解 React官博文   ...

  • 免费的防止锁屏小软件,可用于域统一管控下的锁屏机制

    免费的防止锁屏小软件,可用于域统一管控下的锁屏机制

  • Python代码实现带装饰的圣诞树控制台输出

    内容概要:本文介绍了一段简单的Python代码,用于在控制台中输出一棵带有装饰的圣诞树。具体介绍了代码结构与逻辑,包括如何计算并输出树形的各层,如何加入装饰元素以及打印树干。还提供了示例装饰字典,允许用户自定义圣诞树装饰位置。 适用人群:所有对Python编程有一定了解的程序员,尤其是想要学习控制台图形输出的开发者。 使用场景及目标:适用于想要掌握如何使用Python代码创建控制台艺术,特别是对于想要增加节日氛围的小项目。目标是帮助开发者理解和实现基本的字符串操作与格式化技巧,同时享受创造乐趣。 其他说明:本示例不仅有助于初学者理解基本的字符串处理和循环机制,而且还能激发学习者的编程兴趣,通过调整装饰物的位置和树的大小,可以让输出更加个性化和丰富。

  • 白色大气风格的设计师作品模板下载.zip

    白色大气风格的设计师作品模板下载.zip

  • 电商平台开发需求文档.doc

    电商平台开发需求文档.doc

Global site tag (gtag.js) - Google Analytics