今天开始学习React，todo-list的实现、项目初始化、react-redux的使用

[code]class Todo extends React.Component {
constructor(props) {
super(props)
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this)
this.state = {
list: []
}
}
handleKeyUp(e) {
if (e.keyCode === 13) {
this.setState({
list: [...this.state.list, e.target.value]
})
e.target.value = ''
}
}
handleClick(index, e) {
this.setState({
list: [...this.state.list.slice(0, index), ...this.state.list.slice(index + 1)]
})
}
render() {
return (<div>
<div className='todo-warpper'>
<input className='todo-input' onKeyUp={this.handleKeyUp.bind(this)}/>
</div>
<ul className='todo-list'>
{(this.state.list || []).map((item, index) =>
<li onClick={this.handleClick.bind(this, index)} key={index}>{item}</li>)
}
</ul>
</div>)
}
}
ReactDOM.render(
<Todo/>,
document.getElementById('root'));

（1）react项目的初始化：

npm install -g create-react-app

create-react-app 项目名称

npm install react-redux redux

（2）项目结构：

actions--->用户行为
components--->组件
containers--->容器
reducer---> store里面负责分发action行为
index.html ---> 模板文件
server.js---> 构建项目相关配置文件
webpack---> 打包配置文件

（3）react-redux

智能组件和木偶组件：