摘要：
React Router概念 由于对于新版的Router的不熟悉，这节开始转向Router2和webpack1，等待React Router4理解后，我会更新这几章 Router 以上Router采用的是Router2 Router中文是路由的意思。 路由库React Router。它是官方维护的， 阅读全文
摘要：
React Router参数传递 从Header中跳转到list传递数值。 利用在root.js中设置中path="list/id:"。这个为定义的方法 在list中用{this.props.params.id}获取从Header路由传递过来的值 Header中使用 阅读全文
摘要：
CSS模块化 "babel plugin react html attrs": "^2.0.0"让JSX中className能变回原来class webpack要重新配置 // webpack.config.js var webpack = require("webpack"); var path 阅读全文
摘要：
內联式样中的表达式 import React from 'react'; export default class CompomentHeader extends React.Component{ constructor(){ super(); this.state ={ miniHeader:fa 阅读全文
摘要：
独立组件间共享 Mixins ES6不支持Mixin，所以需要相插件来进行支持，npm install save react mixin@2 测试一下Mixin是如何运行的 在src/js/components下创建mixins.js const MixinLog = { componentDidM 阅读全文
摘要：
React 內联式样 通过header.js演示JSX样式控制,直接內联到标签中的style import React from 'react'; export default class CompomentHeader extends React.Component{ render(){ cons 阅读全文
摘要：
组件Refs(操作DOM的2⃣️两种方法) 第一种方式 var mySubmitButton = document.getElementById('submitButton'); console.log(mySubmitButton); ReactDOM.findDOMNode(mySubmitBu 阅读全文
摘要：
可复用组件 类定义完后，追加属性propTypes传入参数userid:React.PropTypes.number，规定userid是一个数字型，如果传入字符型和其他的非数字型，都会报错。 给页面传入默认值 const defaultProps ={username:'这是一个默认的用户名'//默 阅读全文
摘要：
事件与数据的双向绑定 bodyIndex.js代码 import React from 'react'; import BodyChild from './bodychild' export default class BodyIndex extends React.Component { cons 阅读全文
摘要：
Props属性 Props事例 index.js代码 ... render() { return ( ) } ... bodyIndex.js代码 import React from 'react'; export default class BodyIndex extends React.Comp 阅读全文
摘要：
State属性 state状态 state 是组件内部的属性。组件本事是一个状态机，它可以在constructor中通过this.state直接定义它的值，然后根据这些值来渲染不同的UI。当state的值发生改变时，可以通过this.setState方法让组件再次调用render方法，来渲染新的UI 阅读全文
摘要：
1.组件首次加载 getDefaultProps只会在装载之前调用一次，在组件中赋值的数据会被设置到this.props中。 getInitialState只会在装载之前调用一次，这个函数的返回值会被设置到this.state中，需要注意的是，在ES6的写法，只需写在constructor中即可，如 阅读全文
摘要：
JSX内置表达式 JSX 在render方法中有一种直接把HTML嵌套在JS中的写法，它被称为JSX。这种写法类似XML，它可以定义HTML一样简洁的树状结构。这种语法结合了JavaScript和HTML的优点（我理解模版化我们编写的程序，这就是React的初衷）既可以像平常一样使用HTML，也可以 阅读全文
摘要：
生命周期 每个生物😯都有它的生命周期，从出生🐣、少年、成年再到死亡。同理组件也有它特定的生命周期，React用不同的方法来描述它的整个生命周期。现在，要稍微修改一下组件的代码，当组件加载完毕1秒以后，使like的值自动加1 ... componentDidMount(){ setTimeout( 阅读全文
摘要：
React多组件嵌套 webpack dev server环境运行起来,这里主要是明白了React如何做嵌套 src/js/components下创建header.js书写代码✍️ import React from 'react'; import ReactDOM from 'react dom' 阅读全文
摘要：
HTML标签与React组件 React可以直接渲染HTML类型的标签，也可以渲染React的组件 HTML类型的标签第一个字母用小写来写表示。 import React from 'react'; //当一个标签里面为空的时候，可以直接使用自闭和标签 //注意class是一个JavaScript保 阅读全文
摘要：
React组件 组件是React的基石，所有的React应用程序都是基于组件的。 之前React组件，使用React.createClass来进行声明 var List = React.createClass({ getInitialState: function(){ return['a','b' 阅读全文
摘要：
React虚拟DOM概念 虚拟DOM的结构 在传统的 Web 应用中，我们往往会把数据的变化实时地更新到用户界面中，于是每次数据的微小变动都会引起 DOM 树的重新渲染。如果当前 DOM 结构较为复杂，频繁的操作很可能会引发性能问题。React 为了解决这个问题，引入了虚拟 DOM 技术。 虚拟 D 阅读全文
摘要：
React开发相关Atom插件配置 在Packages中直接安装，这几个比较不错的插件！！！ atom ternjs atom beautify open in browser emmet file icons highlight line highlight selected 阅读全文
摘要：
WebPack 热加载配置(下) webpack dev server的使用 不用每次都去用WebPack一遍 webpack watch自动监听编译，但是需要手动刷新浏览器 如果采用在Mac终端中项目根目录下webpack dev server这样可以浏览器中自动刷新，一边写代码，保存后自动刷新。 阅读全文