现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（Virtual DOM）和组件化的开发深深的吸引了我，下面来跟我一起领略ReactJs的风采吧~~ 文章有点长，耐心读完，你会有很大收获哦~一、ReactJS简介React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。ReactJS官网地址：http://facebook.github.io/react/Github地址：/facebook/react 二、对ReactJS的认识及ReactJS的优点首先，对于React，有一些认识误区，这里先总结一下：React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；React的服务器端Render能力只能算是一个锦上添花的功能，并不是其核心出发点，事实上React官方站点几乎没有提及其在服务器端的应用；有人拿React和Web Component相提并论，但两者并不是完全的竞争关系，你完全可以用React去开发一个真正的Web Component；React不是一个新的模板语言，JSX只是一个表象，没有JSX的React也能工作。1、ReactJS的背景和原理在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因（如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标）。React为此引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，然后又从B变成A，React会认为UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何Render的。如果你像在90年代那样写过服务器端Render的纯Web页面那么应该知道，服务器端所要做的就是根据数据Render出HTML送到浏览器端。如果这时因为用户的一个点击需要改变某个状态文字，那么也是通过刷新整个页面来完成的。服务器端并不需要知道是哪一小段HTML发生了变化，而只需要根据数据刷新整个页面。换句话说，任何UI的变化都是通过整体刷新来完成的。而React将这种开发模式以高性能的方式带到了前端，每做一点界面的更新，你都可以认为刷新了整个页面。至于如何进行局部更新以保证性能，则是React框架要完成的事情。借用Facebook介绍React的视频中聊天应用的例子，当一条新的消息过来时，传统开发的思路如上图，你的开发过程需要知道哪条数据过来了，如何将新的DOM结点添加到当前DOM树上；而基于React的开发思路如下图，你永远只需要关心数据整体，两次数据之间的UI如何变化，则完全交给框架去做。可以看到，使用React大大降低了逻辑复杂性，意味着开发难度降低，可能产生Bug的机会也更少。2、组件化虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑，同时也带来了组件化开发的思想，所谓组件，即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。例如，Facebook的整站都采用了React来开发，整个页面就是一个大的组件，其中包含了嵌套的大量其它组件，大家有兴趣可以看下它背后的代码。如果说MVC的思想让你做到视图-数据-控制器的分离，那么组件化的思考方式则是带来了UI功能模块之间的分离。我们通过一个典型的Blog评论界面来看MVC和组件化开发思路的区别。对于MVC开发模式来说，开发者将三者定义成不同的类，实现了表现，数据，控制的分离。开发者更多的是从技术的角度来对UI进行拆分，实现松耦合。对于React而言，则完全是一个新的思路，开发者从功能的角度出发，将UI分成不同的组件，每个组件都独立封装。在React中，你按照界面模块自然划分的方式来组织和编写你的代码，对于评论界面而言，整个UI是一个通过小组件构成的大组件，每个组件只关心自己部分的逻辑，彼此独立。React认为一个组件应该具有如下特征：（1）可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件；（2）可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景；（3）可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护； 二、下载ReactJS，编写Hello，worldReactJs下载非常简单，为了方便大家下载，这里再一次给出下载地址http://facebook.github.io/react/downloads.html,下载完成后，我么看到的是一个压缩包。解压后，我们新建一个html文件，引用react.js和JSXTransformer.js这两个js文件。html模板如下(js路径改成自己的):&!DOCTYPE html&&html&
&script src=&build/react.js&&&/script&
&script src=&build/JSXTransformer.js&&&/script&
&div id=&container&&&/div&
&script type=&text/jsx&&
// ** Our code goes here! **
&/body&&/html&这里大家可能会奇怪，为什么script的type是text/jsx,这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type=&text/jsx& 。 其次，React 提供两个库： react.js 和 JSXTransformer.js ，它们必须首先加载。其中，JSXTransformer.js 的作用是将 JSX 语法转为 JavaScript 语法。这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。到这里我们就可以开始编写代码了，首先我们先来认识一下ReactJs里面的React.render方法：React.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。下面我们在script标签里面编写代码，来输出Hello，world，代码如下：React.render(
&h1&Hello, world!&/h1&,
document.getElementById('container')
);这里需要注意的是，react并不依赖jQuery，当然我们可以使用jQuery，但是render里面第二个参数必须使用JavaScript原生的getElementByID方法，不能使用jQuery来选取DOM节点。然后，在浏览器打开这个页面，就可以看到浏览器显示一个大大的Hello，world,因为我们用了&h1&标签。到这里，恭喜，你已经步入了ReactJS的大门~~下面，让我们来进一步学习ReactJs吧~~ 三、Jsx语法HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写，了解过AngularJs的看到下面的代码一定会感觉很熟悉的，我们来看代码：var names = ['Jack', 'Tom', 'Alice'];
React.render(
names.map(function (name) {
return &div&Hello, {name}!&/div&
document.getElementById('container')
);这里我们声明了一个names数组，然后遍历在前面加上Hello,输出到DOM中，输出结果如下：JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员，代码如下：var arr = [
&h1&Hello world!&/h1&,
&h2&React is perfect!&/h2&,
React.render(
&div&*{arr}*&/div&,
document.getElementById('container')
);显示结果如下：这里的星号只是做标识用的，大家不要被她迷惑了~~你看到这里，说明你对React还是蛮感兴趣的，恭喜你，坚持下来了，那么下面，我们开始学习React里面的&真功夫&了~~ Are　you ready? 四、ReactJS组件1、组件属性 前面说了，ReactJS是基于组件化的开发，下面我们开始来学习ReactJS里面的组件，React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。下面，我们来编写第一个组件Greet，有一个name属性，然后输出hello + name的值，代码如下：var Greet = React.createClass({
render: function() {
return &h1&Hello {this.props.name}&/h1&;
React.render(
&Greet name=&Jack& /&,
document.getElementById('container')
);看到这段代码，接触过AngularJS的朋友们是不是有一种熟悉的感觉，不过这里有几点需要注意：　　1、获取属性的值用的是this.props.属性名　　2、创建的组件名称首字母必须大写。　　3、为元素添加css的class时，要用className.　　4、组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}2、组件状态组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI 。下面我们来编写一个小例子，一个文本框和一个button，通过点击button可以改变文本框的编辑状态，禁止编辑和允许编辑。通过这个例子来理解ReactJS的状态机制。先看代码：var InputState = React.createClass({
getInitialState: function() {
return {enable: false};
handleClick: function(event) {
this.setState({enable: !this.state.enable});
render: function() {
&input type=&text& disabled={this.state.enable} /&
&button onClick={this.handleClick}&Change State&/button&
React.render(
&InputState /&,
document.getElementById('container')
);这里，我们又使用到了一个方法getInitialState,这个函数在组件初始化的时候执行，必需返回NULL或者一个对象。这里我们可以通过this.state.属性名来访问属性值，这里我们将enable这个值跟input的disabled绑定，当要修改这个属性值时，要使用setState方法。我们声明handleClick方法，来绑定到button上面，实现改变state.enable的值.效果如下：原理分析：　　当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。这里值得注意的几点如下：　　1、getInitialState函数必须有返回值，可以是NULL或者一个对象。　　2、访问state的方法是this.state.属性名。　　3、变量用{}包裹，不需要再加双引号。3、组件的生命周期　　组件的生命周期分成三个状态：Mounting：已插入真实 DOMUpdating：正在被重新渲染Unmounting：已移出真实 DOMReact 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。componentWillMount()componentDidMount()componentWillUpdate(object nextProps, object nextState)componentDidUpdate(object prevProps, object prevState)componentWillUnmount()此外，React 还提供两种特殊状态的处理函数。componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用下面来看一个例子： var Hello = React.createClass({
getInitialState: function () {
opacity: 1.0
componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.
opacity -= .05;
if (opacity & 0.1) {
opacity = 1.0;
this.setState({
opacity: opacity
}.bind(this), 100);
render: function () {
&div style={{opacity: this.state.opacity}}&
Hello {this.props.name}
React.render(
&Hello name=&world&/&,
document.body
);上面代码在hello组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。4、组件的嵌套React是基于组件化的开发，那么组件化开发最大的优点是什么？毫无疑问，当然是复用，下面我们来看看React中到底是如何实现组件的复用的，这里我们还写一个例子来说吧，代码如下：var Search = React.createClass({
render: function() {
{this.props.searchType}:&input type=&text& /&
&button&Search&/button&
var Page = React.createClass({
render: function() {
&h1&Welcome!&/h1&
&Search searchType=&Title& /&
searchType=&Content& /&
React.render(
document.getElementById('container')
);这里我们创建了一个Search组件，然后又创建了一个Page组件，然后我们在Page组件中调用Search组件，并且调用了两次，这里我们通过属性searchType传入值，最终显示结果如图：五、ReactJs小结关于ReactJS今天就先学习到这里了，下面来总结一下，主要有以下几点：　　1、ReactJs是基于组件化的开发，所以最终你的页面应该是由若干个小组件组成的大组件。　　2、可以通过属性，将值传递到组件内部，同理也可以通过属性将内部的结果传递到父级组件(留给大家研究)；要对某些值的变化做DOM操作的，要把这些值放到state中。　　3、为组件添加外部css样式时，类名应该写成className而不是添加内部样式时，应该是style={{opacity: this.state.opacity}}而不是style=&opacity:{this.state.opacity};&。　　4、组件名称首字母必须大写。　　5、变量名用{}包裹，且不能加双引号。CSDN移动将持续为您优选移动开发的精华内容，共同探讨移动开发的技术热点话题，涵盖移动应用、开发工具、移动游戏及引擎、智能硬件、物联网等方方面面，如果您有想分享的技术、观点，可通过电子邮件（tangxy#csdn.net，请把#改成@）投稿。点击“阅读原文”可查看全文并参与讨论。如果您喜欢这篇文章，可以点击右上角“...”将本文分享给你的朋友。第一时间关注最新移动开发相关信息和技术，请关注mobilehub公众微信号（ID: mobilehub)。　
　文章为作者独立观点，不代表微头条立场
的最新文章
《近匠》第119期，云计算风生水起的发展过程中也出现了云计算的虚假伪装者、质量不过关、抑或是服务缺陷严重，对于云计算的进步有着很深远的负面影响，本期我们采访了小鸟云计算CTO周胜强聊聊这半年中如何在IaaS领域脚踏实地。海量数据的产生让如何挖掘数据的深层价值变得尤为重要，然而复杂的数学内容却使很多人望而却步。友盟高级数据挖掘工程师 王琪以实例针对性别预测分类问题，详谈数据挖掘基本的处理流程，常见的算法及其选择等。不同厂商会不同程度地修改Android framework层对应的原生模块代码，来达到自己的目的。为了更好地适配，开发人员不得不对framework层进行反编译，在Android更新到5.0后，对framework的反编译也出现了新的变化。《近匠》第117期：最近几年各种团队协作工具层出不穷，相信很多人都知道Slack等等国外知名团队协作工具。本期我们邀请到易成时代的创始人兼CEO王涛，他向我们分享了Worktile的技术架构与产品理念。如今应用于不同用途的GIS（地理信息系统）工具种类繁多，本文作者推荐了三大支持网页地图GIS的谷歌地图开源API——Leaflet、Modest Maps和Polymaps，供开发者选择使用。本文为“拥抱Android Studio”系列第二篇。在读者们已经开始熟悉和爱上Android Studio之后，作者列举了一些较为深入又比较实用的功能，并分享了自己以及在帮助用户集成过程中遇到的坑，相信对初学者大有裨益。本文总结了来自Skyport Systems、Ceridian、Tasktop还有Travel Tripper公司的专家所分享的针对2016年的预测观点：告别以软件为中心的安全系统、软件故障将成为大家的问题、敏捷开发终于形成规模等。“2015开发工具及服务年度大奖评选”活动已有200余款产品、156个团队的小伙伴参与到本次评选活动。日至日为线上征集期，还没有加入的小伙伴们抓紧时间参与进来吧！本文作者在帮助用户集成Android SDK的过程中，发现很多遗留项目依旧没有从ADT迁移过来，依然有很多用户对Android Studio怀着恐惧与不信任。由此，撰写了系列博文，希望能够帮助更多的开发者拥抱变化。友盟正式发布2015年第二、三季度中国移动互联网趋势报告，对当下中国移动互联网市场进行了最新的行业生态解读。报告显示，活跃设备增幅放缓，Android占比较高，用户下载应用频次下降，教育、金融类App留存率较高。Android的开发生态系统发展迅速，本文作者在开发Android应用超过三年的时间里，用来构建Android应用的架构与技术一直在不断进化，具体阐述这些架构变更背后的经验、失误还有推论。《近匠》第116期：办公室沟通基本靠吼？NoNoNo，“主要看气质”的时代，大家可以做到更理性实用。本期我们邀请到了一熊科技的联合创始人兼CEO李蠡，一起与大家分享他的创业故事和理想。Swift正式开源的同时，还开源了Swift核心库项目和全新的Swift包管理器项目。使用Swift包管理器可以创建一个强大的、用户友好的工具来构建和共享Swift代码，本文作者结合自身实践，详解如何快速上手。本文盘点的十大精品游戏API涵盖各种丰富内容，基于热度、潜力、文档、便捷、功能进行对比，包括（但不仅限于）检索视频游戏数据，游戏货币化，视频游戏串流和录像，视频游戏评论和模型等等。神经网络和机器学习在过去几年一直是高科技领域最热门的话题之一。这一点很容易看出，因为它们解决了很多真正有趣的用例，如语音识别、图像识别、甚至是乐曲谱写。本文总结了一些很好的Python机器学习库的清单。Android应用程序发布后，用户仍会遇到很多崩溃现象，而发布者却很难掌握当时的场景。甚至无法得知App崩溃，这严重阻碍了产品质量的提升。本期课程将对Java崩溃和Native崩溃的捕获机制进行分析，并结合简单的实例演示实现方法。无论是只将编程当兴趣的业余爱好者，还是正想方设法建立应用帝国的成熟开发者，都可以从本文找到从零开始打造Android应用的方法。《近匠》第114期：奇点机智的DeepShare是一个Deferred Deep Linking服务，比单纯的Deep Linking（深度链接）更加有效。它能帮助开发者和运营者更好地传播产品内原生内容，实现更快的用户增长，并监测流量渠道。《近匠》第113期：现在资本市场对虚拟现实比较认可，这会极大的推动虚拟现实产业的发展，现在国内是除了北美之外，对于虚拟现实最为狂热的区域。那么虚拟现实行业应用是否会首先兴起，带动个人消费品？虽然越来越多的公司开发了内部应用来支持日常活动，但企业级应用市场依旧供不应求。为什么需求如此强劲？为什么投资企业级应用物有所值？本文通过图表来分析一下现象背后的原因。应用图标是产品的视觉锚点，不仅在视觉上需要有吸引力、与众不同，理想状况下甚至要能诠释应用的核心本质。本文作者就“应用图标设计的5个核心方面”进行了讨论，同时展示一些实际处理中的案例。今天是让无数iOS开发者欣喜若狂的一天，苹果于去年推出全新的编程语言Swift，并在2015年成为iOS开发的热门所在，经过今年的不断进化与折腾之后，Swift进入了开源的新篇章。移动互联网走到今天，App寡头化的趋势愈加明显，同时用户的口味也越来越高，这对移动App开发者提出了更高的要求。本文作者，Testin云测总裁徐琨结合自身的丰富经验，剖析了移动App测试的现状与挑战，及解决方案。2015年国内各种开发技术领域如移动、云计算中，都有哪些新的趋势、动态？其他国家地区的开发者情况如何？15分钟填写调查问卷，不仅可以得到报告数据而对一切了若指掌，更有iPhone 6S等你来拿！学习设计模式，是程序员自我修炼、提升实力过程中必不可少的一关。作者从面向对象六大原则开始，通过具体的示例讲解其定义与作用，让读者对面向接口编程以及OOP的基本原则有一个深入的认识。《近匠》第112期：自2007年iPhone发布后，云计算和移动领域开始发生了翻天覆地的变化，但沟通和协作方式还停留在10年前，下一代基于云和移动的面向商务的沟通协作体验会是怎样的形态？企业移动办公领域一直是各方争夺的中心战场，在TO B领域，还没有出现像微信在C端那样绝对领导者地位的厂商，本文我们为您盘点了10款企业团队沟通的工具。到底哪些工具会异军突起，让我们拭目以待。10月24日，百度移动联盟开始举办“变现达人大赛”。 截至今日，已有数百人报名。本次大赛从11月起，每周都会React-Native指南汇集了React-Native学习资源与各类开源App、组件及工具等。《近匠》第111期，好雨云平台为团队提供一站式，开发、部署、运行和伸缩任何类型应用的云平台，同时提供数据服务、开发工具和企业信息服务，为产品和企业发展提供全方位支持。脱胎于Multi-Touch的3D Touch将电容传感器与显示屏背光源整合在一起，可快速准确且连续检测人们指尖的按压。这项神奇的技术究竟然并卵还是创新？本文介绍了一些较为出彩的3D Touch应用，并探讨其未来发展的可能性。由CSDN主办的“2015开发工具及服务年度大奖评选”活动正式启动啦，小伙伴们快快报名参与。CSDN希望为企业与开发者寻找到开发中最夯的武器，“与最会玩的人，做最简单的事”。《近匠》第109期，随着传统客服系统的弱点逐渐暴露，投入SaaS客服市场的团队逐渐脱颖而出。新型的云客服产品将提供方案以解决工单处理、统计挖掘和人员管理等等令以往客服头痛不已的问题。随着网络基础设施越来越完备，以及“互联网+”模式的深入探究，未来几年，SaaS模式软件将成为企业应用的主流。CSDN结合行业数据与用户反馈，绘制出了中国SaaS产业生态图谱2015，以便于相关企业参考、应用。在SDCC 2015全体大会现场，CSDN数据平台部研发总监左建平发布《2015年中国软件开发者白皮书》。基mobilehub欢迎关注 mobilehub 了解移动开发那些事儿，让我们更好的帮助移动开发者了解当前移动开发前沿技术、发展趋势、先进经验和各移动平台理念！ 历史消息查看请打开公众账号-点击又上角人像按钮-点查看历史消息。热门文章最新文章mobilehub欢迎关注 mobilehub 了解移动开发那些事儿，让我们更好的帮助移动开发者了解当前移动开发前沿技术、发展趋势、先进经验和各移动平台理念！ 历史消息查看请打开公众账号-点击又上角人像按钮-点查看历史消息。AngularJS和ReactJS分别是干什么的？不会Javascript是否可以学习
本人完全不懂编程，最近有兴趣想学习一下前端开发。之间有一些HTML CSS的基础，也略懂一些Jquery的效果。听朋友说近来 AngularJS和ReactJS很火，不知道具体这两种技术有什么区别？ 直接学习对完全不懂JS的人来说难度大吗？
按投票排序
本人完全不懂编程，最近有兴趣想学习一下前端开发。之间有一些HTML CSS的基础，也略懂一些Jquery的效果。听朋友说近来 AngularJS和ReactJS很火，不知道具体这两种技术有什么区别？ 直接学习对完全不懂JS的人来说难度大吗？本人完全不懂机动车驾驶，最近有兴趣想学习一下开车。之间有一些 油门 刹车 的基础，也略懂一些转弯的效果。听朋友说近来 法拉利和兰博基尼很火，不知道具体这两种车有什么区别？ 直接坐进去开对完全不懂开车的人来说难度大吗？难度不大，但死的比较糊涂。
要学习 JS，先混熟 HTML/CSS/DOM。JS 起步可以先上 jQuery，然后再回头学习 JS core(ECMA script) 部分。Angular.js/React.js 都是高端的东西，没摸过方向盘，就别想着开飞机了。
AngularJS与ReactJS都是框架.自己写0开始网页, 会死人的哩.区别嘛, 简单说说: Angularjs 是MVC, 最出名于data-bindingReactJS 是V, 最出名于 Virtual DOM--------------------其实是毫无问题的.我就是直接学AngularJS的.只要有基本编程能力, 要理解Javascript没多大难度, 不对, 应该说是0难度.此时我推荐一本书:要钱, 不过挺详细的. 看完了就大概会自己写了.除此之外, 好好利用stackoverflow和google.顺便po个炫酷的angularjs 库吧:里面有蛮多基本的directive, 都很容易用, 要是觉得不够, 可以自己改啊! :)
踏实点比什么都好…
本人完全不懂数学，最近有兴趣想学习一下高数。之间有一些解一元一次方程的基础，也略懂一些二元二次方程的解法。听朋友说近来高等数学和工程数学很火，不知道具体这两种学科有什么区别？ 直接学习对完全不懂数学的人来说难度大吗？
ReactJS没用过，目前在搞angular。不学js的话基本不大可能。如果觉得入门太陡峭，可以先看看avalon，国人开发的mvvm框架，社区也够活跃。有avalon基础后再看angular就会比较简单。不过个人觉得angular比avalon要好。
关键是你这样学，“会”了也没用啊
难度很大！Angular 本来就是一个学习曲线很陡的框架，如果不会 js ，那要学会 Angular ，几乎不可能。react 专注于界面渲染，如果不知道浏览器渲染页面的基本原理和性能瓶颈，就无法理解为什么要实现虚拟 DOM 。
react没用过 angular的第一个完整的项目是在我对JS一知半解的情况下独自搞定的（虽然写得有点糟七糟八）..我觉得如果你学过任何一门语言（最好是面向对象的）的话+对DOM有所了解 ，JS不太懂直接学Angular不是问题。先看两遍code school的教程，然后直接开始写项目。遇到问题的话stackoverflow是最好的老师。
虽然这两个框架本身是可以让你尽量减少js的麻烦，但不会js的话，你无法完全学会这两个框架，更没有可能用这两个框架做出完整的web app。所以不要急于求成，技能树要一级一级的点
《Professional JavaScript for Web Developers》看完再说！
不能。难度挺大的。
先会跑才能会飞，js学问很深，你先问问自己oop怎么实现，数据类型怎么转换，虚拟继承重载都怎么实现，再考虑ng或是react。
建议你从js原生起步，学到一定程度之后就可以学习jquery的模块划分已经对应的设计之美，至于所谓的动态还有框架使用实在是太简单了，学到最后你发现自己欠缺的是算法，但是一开始让你就去学算法的人肯定是在忽悠你。没有意识到问题怎么去解决问题呢？自己都说服不了自己吧。楼主在补算法中。
这么说吧，你看书可以有的了这两东西，因为照书作。但是你要在上面加上自己需要的功能不行，因为你不会JavaScript啊，HTML、CSS这些基础的东西还是要会的，H\C一天搞定，JavaScript基本一周不停的用不停的学习，作出自己的东西是完全不成问题的。
我是从数据库方向转的前端，因为项目需要使用angularjs ，所以也就直接跳过了jquery 这种伟大的框架，直接学angularjs（其实两者关系并不大）。在学习（工作）过程中，因为自身前端技术匮乏，所以又疯狂恶补js,css样式。总体来说：要想学好ng,js的基础是必须的。推荐一下国内ng牛人，大漠穷秋，应该是国内ng首屈一指的人，有个慕客网上面有许多ng的教程。如果有条件，翻墙上也不错，有许多好的实例教程。
你这问题就相当于“我不会数学能学习微积分吗？”当然可能没高数那么难，你当然也可以学不过你得先学会Javascript
新闻联播百句集锦和红旗下讲话是什么，不会中文可以学习吗？
学不难。教你比较难。学会比较难。}