使用React解决问题

1. 任何与用户界面或者用户界面交互有关的任务都可以用React解决
2. 一种思想：考虑一个应用的各个部分怎么实现之前，先了解所有组件如何组合在一起更加重要。因此，先从最顶级的React元素开始，然后实现他的子组件，自顶向下来构建层级。

规划React应用

两个原则：

• 每个组件应该代表一个独立的用户界面元素，应该封装最小的可复用元素
• 多个React组件应该组成一个独立的React组件。最终，整个用户页面应该封装成一个React组件

父组件与子组件的交互机制

1. 父组件传递一个回调函数作为字组件的属性，字组件通过this.props来访问这个回调函数
2. 当字组件想要改变副组件的state的时候，就通过这个回调函数传递必要的参数到父组件的新状态中
3. 父组件更新状态，就会触发render()函数，从而渲染所有必要的子组件

let React = require('react');
let Stream = require('Stream.react');
let Collection = require('Collection.react');

let Application = React.createClass({
    getInitialState: () => {
        return {
            collectionTweets: {}
        }
    },
    AddTweetToCollection: (tweet) => {
        let collectionTweets = this.state.collectionTweets;

        collectionTweets[tweet.id] = tweet;

        this.setState({
            collectionTweets: collectionTweets
        })
    },
    RemoveTweetToCollection: (tweet) => {
        let collectionTweets = this.state.collectionTweets;

        delete collectionTweets[tweet.id];

        this.setState({
            collectionTweets: collectionTweets
        })
    },
    RemoveAllTweetToCollection: () => {

        this.setState({
            collectionTweets: {}
        })
    },

    render: () => {
        return (
            <div className="container-fluid">
                <div className="row">
                    <div className="col-md-4 text-center">
                        <Stream onAddTweetToCollection={this.AddTweetToCollection}/>
                    </div>
                    <div className="col-md-6 text-center">
                        <Collection tweets={this.state.collectionTweets}
                                    onRemoveTweetToCollection={this.RemoveTweetToCollection}
                                    onRemoveAllTweetToCollection={this.RemoveAllTweetToCollection}/>
                    </div>
                </div>
            </div>
        )
    }
});

module.exports = Application;