中文教程:http://reactjs.cn/ 实例: http://www.ruanyifeng.com/blog/2015/03/react.html…

需要注意的问题: 1.组件名称开头字母一定要大写.(PS:原因是 React 的 JSX 里约定分别使用首字母大.小写来区分本地组件的类和 HTML 标签.) 2.this.props.children:表示组件的所有子节点(!没有子节点时就是undefined,如果有一个子节点,数据类型是Object,多个节点时,数据类型就是array 3.因为promise是异步的,所以render时要检测 4.通过 AJAX 加载初始数据,在 componentDidMount 时加载数据.当加载成功,将…

1.Ajax: componentDidMount 方法设置 Ajax 请求,等到请求成功,再用 this.setState 方法重新渲染 UI. /*demo1*/ var Demo1Box=React.createClass({     getInitialState:function(){         return{             username:'',             lastGistUrl:''         };     },     componentDi…

1.依赖的资源: <script type="text/javascript" src='../asset/react.js'></script>   <script type="text/javascript" src='../asset/react-dom.js'></script> <script type="text/javascript" src='../asset/JSXTrans…

1.安装 npm install -g create-react-app create-react-app my-app cd my-app npm start…

1.使用虚拟DOM作为其不同的实现.同时可以由服务器node.js渲染,从而不需要过重的浏览器DOM支持.   2.虚拟DOM:在浏览器端用javascript实现了一套DOM API.用react开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,react都会重新构建整个DOM树,然后将当前整个DOM树和上一次的进行对比,得到区别后,仅仅将需要变化的部分进行实际浏览器的DOM树更新.从而使程序员只需要关心数据整体,两次数据之间的UI如何变化,就交给框架去做.   3. React…

       喽了一眼阮一峰老师的react文章,感觉写的挺棒,这篇只是按照自己思路屡一遍,纯属自学笔记,不承担社会暴乱责任.前几天,打算学vuejs,师兄给了一句话的点播,感觉很醍醐灌顶.总结下,所有这种能够实现数据双向绑定的JS框架,对于业务而言,最大的影响:实现了DOM的自动刷新.实现改了一个地方的数据,与之相关的DOM节点会自动变成对应的样子.不用我们 手动的 跟在 事件 后面 用冗余的JS操作DOM.                                          …

摘要: 发觉在学习react的生态链中,react+react-router+webpack+es6+fetch等等这些都基本搞懂的差不多了,可以应用到实战当中,唯独这个redux还不能,学习redux还学的挺久的. 其中困扰我最久的就是redux的异步数据流的处理.难点主要是概念太多,接触的词太多,而且网上的案例看的头都疼,很容易晕,已经晕了好多次了.后来被我简化之后,终于搞懂了,哈哈.!来来来,今天总结一下,希望对大家有所帮助.不过本人主要是介绍redux的异步操作,如果对redux不是很熟…

什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快,是因为它不直接操作DOM.React将DOM结构存储在内存中,然后同render()的返回内容进行比较,计算出需要改动的地方,最后才反映到DOM中.[为什么用react,它为什么快] 个人感觉: react通过虚拟DOM解决的数据频繁变化造成的DOM节点的频繁渲染.所以,适用于那些数据更新比较快的,…

React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick="activateLasers()"> // onClick = "xxxx()" 激活按钮 </button> react 中的写法: <button onClick={activateLasers}> // onclick = { xxxx…