react js jsfiddle怎么使用reactjs的网站

react不是框架, 可以在这里看到他的介绍。 所以这两者不适合在框架这个层面比较。angular 是MV* 框架, react是用来构建可重复使用的UI组件的, 可以看成是个提供工具的library。react 可以和 angular 的 directive做比较。 这样比较的话, react是比angular directive 在组建UI上更powerful的。angular 是最适合CRUD的SPA 单页面的应用程序。 和 angularUI 一起使用就可以搭建还不错的web app.要真正理解react和angular 还要对比使用才可见一斑。 可以参见这个博客, 这个博主把react tutorial里面的一个例子用angular重新写出来了这个angular 写的源代码在这里 原来的tutorial 用 react 写在这里在这里,这个tutorial
的源代码在这里 我觉得两者比较区别还是非常明显的, angular 从 MV* 这个角度看很清晰。 我没使用过react, 所以可能对他的好处看不太出来。 就这个例子来讲, 我会直接用angular, 不会考虑使用 react. 希望有用过react的业界其他人士补充一下。
对于 Angular 没有在项目中使用过, 只用过同为 MVVM 的 Vue.&br&我花了很多时间在 React 上, 可以看下边两个网站相关的内容&br&React 中文微博: &a href=&///?target=http%3A///reactchina& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/reactchina&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&&br&React 中文论坛 &a href=&///?target=https%3A//react-china.org/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&react-china.org/&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&&br&&br&Angular 和 React 相同的是 Model Driven View 的套路, 自动维护 View, 减少手工状态维护.&br&把两者都当作是对 Backbone MVP 模式的改进的话, 上边这一点差不多的.&br&不同的地方是 React 采用的方案有点像函数式的做法, Component, Immutable data 等等&br&更着重于将 DOM 封装可以相互组合的 Component, 并且将 DOM 操作抽象为状态的改变.&br&这样抽象之后, 学习和编写复杂应用的成本降下来很多&br&&br&React 的问题主要在它实现功能近似与 jQuery 的 DOM 操作和事件监听,&br&要写完整的应用需要 MVC, 对 React 来说就是后来发布的 Flux 模型,&br&而 Flux 并不是完整的一个框架, 只是 Facebook 发布的一套架构体系&br&所以要写完整的大应用估计还有不少坑要淌过去.. 在这方面 Angular 东西多多了.
对于 Angular 没有在项目中使用过, 只用过同为 MVVM 的 Vue.我花了很多时间在 React 上, 可以看下边两个网站相关的内容React 中文微博: React 中文论坛 Angular 和 React 相同的是 Model Driven View 的套路, 自动…
&a data-hash=&4e31f4f2b35b036a888f& href=&///people/4e31f4f2b35b036a888f& class=&member_mention& data-tip=&p$b$4e31f4f2b35b036a888f&&@空空&/a& 我算是用过React没用过Angular,所以正好补充下。&br&&br&首先我现在的经验是Angular和Ember都只玩过TODOMVC的tutorial,React的话自己正在写一个Chrome的App和公司的一个小项目。&br&最近正好有个新项目在评估用&b&Angular&/b&,&b&Ember&/b&还是&b&React(+Flux)&/b&,我随便谈一点自己的浅见。&br&&br&&b&Angular.js&/b&&br&首先Angular的背后是Google(难道这就是官网被墙的原因?),所以社区基础是不用担心的,整个生态也已经是非常的完整了,从最基本的Tutorial到StackOverflow的问题数到框架本身的剖析都有非常非常多,所以从这个角度看起来Angular应该算是上手比较容易的。&br&&br&不过Angular目前的问题看起来也很明显&br&1. 性能 &br&
同样是TODOMVC的Sample,Angular完全载入用了1.1s(&a href=&///?target=http%3A//www.webpagetest.org/video/compare.php%3Ftests%3D141120_RG_14H8%2C_14H9%2C141120_VR_14HA%2C_14HB%2CB_14HC%2CE_14HD%2C141120_RX_14HE%2C141120_NF_14HF%2C141120_WZ_14HG& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&WebPagetest - Visual Comparison&i class=&icon-external&&&/i&&/a&)。目前我用到的基于Angular的就是&b&Kibana&/b&,不得不说,确实挺慢的。。&br&2. Angular 2.0&br&
Angular的2.0几乎是一个推翻重做的框架,估计不会有1.X的upgrade方案。所以如果现在新开始的项目采用Angular的话,会是一个很尴尬的时机。同样,如此大的改动似乎也反面印证了1.X并不是那么好。这篇文章推荐去看看&a href=&///?target=https%3A///%40mnemon1ck/why-you-should-not-use-angularjs-1df5ddf6fc99& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Why you should not use AngularJs&i class=&icon-external&&&/i&&/a&&br&&br&&br&&b&React.js&/b&&br&React很大的特点就是“轻”,再加上&a href=&///?target=http%3A//facebook.github.io/react/docs/glossary.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&VDOM&i class=&icon-external&&&/i&&/a&这个很好的idea让React非常非常快(在上面那个测试里面0.3s左右就载入完毕)。另外React和Angular一个很大的不同就是React采用的是one-way data flow。&br&&br&React的缺点嘛,大概就是现在还太新了很难说将来有没有大的API变化,目前在大的稳定的项目上采用React的,我也就只知道有Yahoo的Email。所以现在很少有批评React的声音也许不是他真的就没有坑,而是那些坑还没有被踩出来而已。&br&&br&还有就是React本身只是一个V而已,所以如果是大型项目想要一套完整的框架的话,也许还需要引入Flux和routing相关的东西。React的&a href=&///?target=https%3A///rackt/react-router& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&routing&i class=&icon-external&&&/i&&/a&我没有研究过,但是Flux的话已经有出现一些&a href=&///?target=http%3A//spoike.ghost.io/deconstructing-reactjss-flux/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&批评的声音&i class=&icon-external&&&/i&&/a&了。&br&&br&&br&&br&&b&总结&/b&&br&Angular是真正的大而全的framework,他有自己一套思路,基本你follow这个思路往里面填代码就OK。&br&React是一个简短有力的library,他只负责解决你某个单一的“痛点”。
我算是用过React没用过Angular,所以正好补充下。首先我现在的经验是Angular和Ember都只玩过TODOMVC的tutorial,React的话自己正在写一个Chrome的App和公司的一个小项目。最近正好有个新项目在评估用Angular,Ember还是React(+Flux),我随便谈一点自…
已有帐号?
无法登录?
社交帐号登录
知行合一的道路上艰苦爬行React入门指南_博客园
当前位置: >
>React入门指南
React入门指南
& 作者:邢政 & 来源: 博客园-betree &
原文地址:
React入门指南
实验React最便捷的途径就是开始摆弄下面这个小例子:Hello World。
下载示例开始体验:在示例项目的根目录中,创建helloworld.html文件,并输入以下内容:
&!DOCTYPE html&
&script src=&build/react.js&&&/script&
&script src=&build/JSXTransformer.js&&&/script&
&div id=&example&&&/div&
&script type=&text/jsx&&
React.render(
&h1&Hello, world!&/h1&,
document.getElementById('example')
JavaScript脚本中嵌入的类xml代码我们称作JSX;通过&&文档来深入了解它吧。要在浏览器中把JSX代码转化为清香的Javascript,我们需要使用&script type=&text/jsx&&标签并引入JSXTransformer.js库。
独立脚本文件
你的JSX代码可以放入单独的文件中。创建src/helloworld.js,如下:
React.render(
&h1&Hello, world!&/h1&,
document.getElementById('example')
然后在helloworld.html中引用。
&script type=&text/jsx& src=&src/helloworld.js&&&/script&
对JSX脱机转码
首先安装命令行工具(依赖):
npm install -g react-tools
之后就可以把helloworld.js翻译为纯javascript了。
jsx --watch src/ build/
修改JSX的同时,会被自动翻译为javascript。
React.render(
React.createElement('h1', null, 'Hello, world!'),
document.getElementById('example')
更新我们的HTML文件,不再需要JSXTransformer.js。
&!DOCTYPE html&
&title&Hello React!&/title&
&script src=&build/react.js&&&/script&
&!-- 无需引入 JSX 转换库 --&
&div id=&example&&&/div&
&script src=&build/helloworld.js&&&/script&
喜欢CommonJS?
如果你想结合browserify,webpack或者其他包管理工具来使用React,那就使用react npm包吧。此外,可以十分方便地把jsx构建工具整合到很多包管理系统中(不仅仅是CommonJS)。
通过新手工具包examples目录下的教程和例子来深入了解react。我们还建立了wiki,这里有来自社区贡献的各种工作流、界面组件、路由和数据管理实践等等。react欢迎你,并祝你好运。
相关阅读:
Pre-architecture—阅读二
来源:(微信/QQ:,微信公众号:makaidong-com) &&&&&& 欢迎分享本文,转载请保留出处!
&&&&&& 【原文阅读】:
上一篇:没有了
【相关文章】
Pre-architecture—阅读二
每日最新文章
每日最热文章
本周最热文章
本月最热文章
本年最热文章
Powered by
Copyright &
, All Rights Reserved同为javascript框架,react和angular各有什么优缺点,各自又适合.2015年_百度知道
同为javascript框架,react和angular各有什么优缺点,各自又适合.2015年
提问者采纳
react是比angular directive 在组建UI上更powerful的, 我会直接用angular, 这个博主把react tutorial里面的一个例子用angular重新写出来了  Facebook’s New React JavaScript Library Tutorial Rewritten in AngularJS  这个angular 写的源代码在这里 Edit fiddle - JSFiddle  原来的tutorial 用 react 写在这里在这里。 就这个例子来讲。  angular 是最适合CRUD的SPA 单页面的应用程序;react-tutorial 路 GitHub  我觉得两者比较区别还是非常明显的?  所以这两者不适合在框架这个层面比较.  要真正理解react和angular 还要对比使用才可见一斑。 可以参见这个博客,  React | Tutorial  这个tutorial 的源代码在这里 petehunt&#47, 所以可能对他的好处看不太出来。 和 angularUI 一起使用就可以搭建还不错的web app。 我没使用过react。 React | Why did we build React. 希望有用过react的业界其他人士补充一下, react是用来构建可重复使用的UI组件的, 可以在这里看到他的介绍。 这样比较的话。  react 可以和 angular 的 directive做比较, 不会考虑使用 react。  angular 是MV* 框架  react不是框架, angular 从 MV* 这个角度看很清晰, 可以看成是个提供工具的library
资深电脑人
其他类似问题
为您推荐:
react的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁ReactJS | Using React.Js for writing powerful UI applications
您当前位置: &
[ 所属分类
| 时间 2015 |
作者 红领巾 ]
What is React ? React.js is a library maintained and created by developers at Facebook. The key takeaway from React.js: it's just concerned about the UI, it uses a Virtual DOM and smart algorithms for minimising slow DOM operations and manipulations. It only actually changes the DOM if there is a change from the Virtual DOM.
React is considerably fast in handling UI manipulation and performance tested by many authors see here and here , where the compared with +AngularJS
I discussed in detail with +Raja Rao about React framework, that excited me about future potential of framework, clearly I see +Jeff Douglas have written some cool post and as well +Christophe Coenraets have written another .
I am writing this post, to document my learning experience with +Reactjs and my vision to scale it to visualforce pages and later to lighting pages/components, considering performance.
What is unique with React ?
React not only perform on client side but can also be rendered on server side, this uses Virtual DOM that can selectively renders sub-nodes based on state changes, which allow minimum DOM manipulation. In other words, without refreshing pages, you can refresh contents by manipulating DOM structure through .
Getting Started
To jump start, you can use JSFiddle (see this ) and Codepen (see here , there is trick involved).
Application Structure
Include reactjs on your html page and JSXTransformer.js and when you write the components your script type should be script type="text/jsx"
Designing your Hello World component
Simply you can create component by using
React.CreateClass and then call
React.render() method to bind the dom object where you want to bind it
Now call the event by simply invoking it and attaching to specific div
Isn't it cool enough to see all code written through Javascript and barely any HTML code.
Using Props
Let's create the Comment component, which will depend on data passed in from its parent. Data passed in from a parent component is available as a 'property' on the child component. These 'properties' are accessed through this.props . Using props, we will be able to read the data passed to the Comment from the CommentList, and render some markup:
We access named attributes passed to the component as keys on this.props and any nested elements as this.props.children .
Every component in React has a props and state object, here is how you can set the state of a component using setStateMethod
本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题:本站链接:
分享请点击:
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
走得再慢,也比站在原地成功。
手机客户端
,专注代码审计及安全周边编程,转载请注明出处:http://www.codesec.net
转载文章如有侵权,请邮件 admin[at]codesec.net}

我要回帖

更多关于 使用reactjs的网站 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信