真正react开发环境+多组件嵌套实际项目-莞式服务包爽版
昨天写的教程有个好处就是让你知其然的同时也让你知其所以然，然而但是可但是但可是，作为一个小白我有必要知道react怎么引入么？我有必要知道babel怎么配置么？bower又是啥破玩意？我想两分钟完事儿，别给我扯那些没用的。
我希望几个命令就把全部开发环境给我配置好了，让我直接开发核心功能就行了。具体怎么配置我不关心。
这就好比我现在学开车去了，你告诉我车座怎么调整舒服，手动挡怎么切换，这些有用，但是，我更关心的是既然有自动挡，你为啥不让我先把车能开起来让我能去我想去的地方，而我车玩熟了自然学手动挡也快了。（仅供举例子，学车你还得按照教练的指导学）。
好吧，换个比较污的例子，但是能够说明问题。
你想去体验莞式服务了，然后进来个妹子跟你说你下楼去买个TT，回来她跟你说过来给我床收拾下，这时候估计你一大巴掌呼死她，我是来享受服务的不是服务员。
好，告诉你结论，你的想法是对的，下面我就带你体验下react里面的莞式开发环境，包爽。
1分钟极速搭建正确环境
正确姿势，进入cmd随便切换到一个盘的根目录下输入：
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start
配置完毕！你是不是想说我裤子都脱了你就让我看着？我先告诉你结果：
1.根本不用你配置 bebel webpack ESLint等都给你配好了，而且实时刷新。
2.使用的是移动单页模板，同时采用了class开发方式。
3.可以通过使用 npm build命令直接产生上线程序。
咋玩：
1.npm start 然后在URL里面输入 http://localhost:3000你就看到了
2.你打开app.js就可以看见app这个类，你可以随便加自己的组件。查看index.js你就可以看到类怎么加入到静态页面的。
3.使用npm build 产生上线代码。
以上配置过程绝逼不超过一分钟，开始接着上节课的说正题多组件嵌套的使用，这里不废话上三段代码。一看你就懂看。
这里写一个留言板，注意这个就是官网的待办事项的例子，但是它的例子不好而且不全，这里我做了实际可用的优化，不废话上代码。
重点看class怎么写，还有各个组件怎么嵌套，以及文件怎么拆分。
index.js 这个页面是控制具体的index.html页面怎么显示的，注意 即使是图片和css也要import进来。因为用webpack打包。
import React from 'react';
import ReactDOM from 'react-dom';
import TodoApp from './TodoApp';//只有这句是我自己加的，其余都是自动生成的,一个独立功能就是一个组件
import './index.css';
ReactDOM.render(
<div>
<TodoApp />
</div>,
document.getElementById('root')
);
下面我们看下 TodoApp.js一个类就是一个文件
import React, { Component } from 'react';
import TodoList from './TodoList';//我这里引入了另外一个组件，下面嵌套用到了，注意导出才能用ES6语法不墨迹
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {items: [], text: ''};
}
render() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<input onChange={this.handleChange} value={this.state.text} />
<button>{'Add #' + (this.state.items.length + 1)}</button>
</form>
</div>
);
}
handleChange(e) {
this.setState({text: e.target.value});
}
handleSubmit(e) {
e.preventDefault();
var newItem = {
text: this.state.text,
id: Date.now()
};
this.setState((prevState) => ({
items: prevState.items.concat(newItem),
text: ''
}));
}
}
export default TodoApp;
TodoList.js这个文件就相当简单了
import React, { Component } from 'react';
class TodoList extends Component {
render() {
return (
<ul>
{this.props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}
}
export default TodoList;
上线打包：
npm run build
然后你就能看到hello-world\build 文件夹，这个文件夹上传就行了，我想看看打包结果怎么办也可以，预览下再发布
npm install -g pushstate-server
pushstate-server build
总结：
1.这个文章扫平了你学习react的开发环境障碍
2.这个例子没有跟数据后台对接其实react跟哪个后台对接跟前端没半毛钱关系
3.如果想详细配置，直接看package.json就行
4.你看不懂上面三段代码不是你react不会，是因为你ES6不会玩。
最后一句，JS大法好，信leo得永生。
