环境配置

开发环境配置，使用webpack

there are really three main steps and three main things Webpack need to know.

1) Webpack needs to know the starting point of your application, or your root JavaScript file.

2) Webpack needs to know which transformations to make on your code.

3) Webpack needs to know to which location it should save the new transformed code.

// In webpack.config.js
module.exports = {
  entry: [
    './app/index.js'
  ]
}

All we do is give our object a property of entry and a value which is an array with a string which points to our root JavaScript file in our app. You might be asking why it’s an array instead of just a string. Webpack allows you to have one or many entry points in your application. If you just have one, you can just use a string. If you have more, you can use an array. I always default to an array so I can easily add more later if needed.

// In webpack.config.js
module.exports = {
  entry: [
    './app/index.js'
  ],
  module: {
    loaders: []
  }
}

Inside of that loaders array is where we’re (obviously) going to put all of our different loaders or transformations we want to take place.

Each loader needs to be composed of three things. The first is which file type to run the specific transformation on. For example, we don’t want to run CSS transformations on a JavaScript file and vice versa. The next item is which directories should be included or excluded from being transformed. An example here is we don’t want to run our transformations on anything in our node_modules folder, so we’d have the node_modules path as an excluded value. The last thing is the specific loader we want to run. Let’s take a look at what this looks like.

// In webpack.config.js
module.exports = {
  entry: [
    './app/index.js'
  ],
  module: {
    loaders: [
      {test: /\.coffee$/, include: __dirname + '/app', loader: "coffee-loader"}
    ]
  },
}

Now that we’ve done steps 1 and 2, we just have one more step. This last step is specifying where Webpack should output the new transformed code.

// In webpack.config.js
module.exports = {
  entry: [
    './app/index.js'
  ],
  module: {
    loaders: [
      {test: /\.coffee$/, include: __dirname + '/app', loader: "coffee-loader"}
    ]
  },
  output: {
    filename: "index_bundle.js",
    path: __dirname + '/dist'
  },
}

If you’re following along you can run npm install –save-dev babel-core babel-loader babel-preset-react. babel-core is babel itself, babel-loader is the webpack loader we’ll use, and babel-preset-react is to get the JSX -> JS transformation going.

First, in the same directory where the webpack.config.js file is (usually the root directory), we’ll need to make a .babelrc file which looks like this

{
  "presets": [
    "react"
  ]
}

if you are going to use es6 with webpack you should run npm install –save-dev and add "presets": ["es2015"] " to .babelrc file which looks like this

{ “presets”: [ “react”,”es2015” ] }

React生命周期

• React Life cycle methods
• componentWillMount
• componentDidMount
• componentWillReceiveProps(object nextProps)
• boolean shouldComponentUpdate(object nextProps, object nextState)
• componentWillUpdate(object nextProps, object nextState)
• componentDidUpdate(object prevProps, object prevState)
• componentWillUnmount()
• React.unmountComponentAtNode(document.body)

参考文档

/** @jsx React.DOM */
console.log('Start')
var App = React.createClass({
    componentWillMount: function(){
      console.log('componentWillMount');
    },

    componentDidMount: function(){
      console.log('componentDidMount');
    },

    getInitialState: function(){
      return { status: true}
    },

    getDefaultProps: function(){
      return {name: 'John'};
    },

    componentWillReceiveProps: function(nextProps){
      console.log('componentWillReceiveProps');
    },

    shouldComponentUpdate: function(nextProps, nextState){
      console.log('shouldComponentUpdate');
      return true;
    },

    componentWillUpdate: function(){
      console.log('componentWillUpdate');
    },

    render: function() {
      console.log('render');
      return <h1 onClick={this.toggleState}>
             {this.state.status.toString()}
             </h1>
    },

    componentWillUnmount: function(){
      console.log('componentWillUnmount')
    },

    toggleState: function() {
      this.setState({status: !this.state.status})
    }
    });

// componentWillMount
// componentDidMount
// componentWillReceiveProps(object nextProps)
// boolean shouldComponentUpdate(object nextProps, object nextState)
// componentWillUpdate(object nextProps, object nextState)
// componentDidUpdate(object prevProps, object prevState)
// componentWillUnmount()
// React.unmountComponentAtNode(document.body)
React.renderComponent(<App name='Vipul'/>, document.body);

组件

React 组件就是一个状态机，它接受两个输入参数： this.props 和 this.state，返回一个虚拟DOM。所有组件必须包裹在一个容器中.React组件是有 类 和 实例的区别的，通过 React.createClass 创建的是类。

JSX

不要在HTML模板中写JS关键字，所以 class 应该用 className，for 应该用 htmlFor,所有的DOM标准属性都是驼峰命名，比如 onClick，但是 data-x 和 aria-x 还是用短横线分隔。style 属性接收的是一个 key-value 的JS对象，而不是字符串。

props

props 是不可变的：它们从父节点传递过来，被父节点“拥有”。

state

为了实现交互，我们给组件引进了可变的 state。this.state 是组件私有的，可以通过调用 this.setState() 来改变它。getInitialState返回一个对象，包含了这个组件所有的初始状态。

DOM操作

react可以允许我们通过 ref 来定位一个组件。但是请注意，这里拿到的只是虚拟DOM，而不是真实的DOM。ReactDOM.findDOMNode()来获取实际Dom

组合组件

var Avatar = React.createClass({
  render: function() {
    return (
      <div>
        <ProfilePic username={this.props.username} />
        <ProfileLink username={this.props.username} />
      </div>
    );
  }
});

var ProfilePic = React.createClass({
  render: function() {
    return (
      <img src={'https://graph.facebook.com/' + this.props.username + '/picture'} />
    );
  }
});

var ProfileLink = React.createClass({
  render: function() {
    return (
      <a href={'https://www.facebook.com/' + this.props.username}>
        {this.props.username}
      </a>
    );
  }
});

ReactDOM.render(
  <Avatar username="pwh" />,
  document.getElementById('example')
);

In the above example, instances of Avatar own instances of ProfilePic and ProfileLink.

组件间通信

React 里，数据通过上面介绍过的 props 从拥有者流向归属者。这就是高效的单向数据绑定(one-way data binding),拥有者通过它的 props 或 state 计算出一些值，并把这些值绑定到它们拥有的组件的 props 上。

而父组件怎么通知子组件呢？ 也是通过 props，直接 setProps 来修改子组件的 props就行了。

react与es6

组件声明周期