（一）初始化一个项目
拿到一个框架，最高兴的是什么，就是执行完所有的npm 然后“嘣”，跳出一个欢迎页面。
但是如果你之前接触了webpack，babel等这些前端自动化构建工具的话，那么你会发现，完成到这一步实际上是很繁琐的，我们只是想学习react，最好希望不触碰到这些内容，所以这里我们就会用到create-react-app，他准备好了一切，就等着你就位用餐了。
npm install create-react-app -g
create-react-app projectname(项目名称)
cd projectname
npm start
这就是我们成功初始化一个项目的界面
这第一步，信心满满了不是！easy！然后我们再来尝试着写一个组件
（二）增加一个组件
看一下项目目录src的结构，我们会发现src里几乎没有什么内容，
logo.svg可以忽略，剩下的就是index和App两个部分的内容
再看index.js文件引入了App，可见App就是我们通常所说的组件，而这个index.js就是入口文件。
那么也就是说我们要写一个计数器组件只需要把index.js组件中的App中换一下就好了。
那么我们就试一下吧
我们在目录下创建一个ClickCount组件
import React, { Component } from 'react';
class ClickCount extends Component {
render() {
return (
<div className="ClickCount">
<button>点我点我，心想啥事</button>
</div>
);
}
}
export default ClickCount;
修改index.js文件
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import ClickCount from './ClickCount';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<ClickCount />, document.getElementById('root'));
registerServiceWorker();
组件效果
这个时候我们发现，是有了一个button，但是我们要怎么添加点击事件呢？
我们修改下代码再来看看
import React, { Component } from 'react';
class ClickCount extends Component {
constructor(props) {
super(props);
this.onClickButton = this.onClickButton.bind(this);
this.state = {count:0};
}
onClickButton(){
this.setState({'count':this.state.count + 1});
}
render() {
return (
<div className="ClickCount">
<button onClick={this.onClickButton}>点我点我，心想啥事</button>
<p>你点了我：{this.state.count}次</p>
</div>
);
}
}
export default ClickCount;
组件实现点击事件
又增加了点信心。
（三）React的数据操作
如果你是第一次接触react，那么上面的代码一定有你不了解的地方。首先说，最近我们总是会听到数据驱动这个词。我们的产品或是决策都依靠于数据。我们会分析数据进而做出开发决策甚至是商业决策，在React里也涉及到数据驱动的部分，数据驱动渲染。
react数据操作分为prop和state，无论是哪个改变都会引起组件的重新渲染。
同样是数据操作，为什么又要分为prop和state呢？我们什么时候用prop，什么时候用state呢？
prop是对外接口，而state是对内的接口。也就是说什么呢，prop是从外面来的，我只要在组件内部定义谁能来，我家大门就对谁敞开，state是组件内部的数据变化。
props
prop既可以传递数据也可以传递函数，当他传递函数的时候从本质上来讲其实就相当于给对方传递了一个回调函数。为了良好的编程规范，组件最好不要改变props的值。
赋值
实际上我们在自定义组件上通过书写类似属性的方式和组件内部的prop进行数据的交互
读取
组件创建时，如果需要props的操作，那么构造函数中必须要有super(props),否则你不可能通过this.props拿到数据
检测
定义propTypes，但是propTypes只适合在开发环境中使用，这种检测也消耗性能，所以不太适合在线上使用。
http://www.css88.com/react/docs/typechecking-with-proptypes.html
propTypes的变动.png
实践一下
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import ClickCount from './ClickCount';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<ClickCount parentsName="app" />, document.getElementById('root'));
registerServiceWorker();
clickCount.js
import React, { Component } from 'react';
class ClickCount extends Component {
constructor(props) {
super(props);
this.onClickButton = this.onClickButton.bind(this);
this.state = {count:0};
}
onClickButton(){
this.setState({'count':this.state.count + 1});
console.log(this.props.parentsName);
}
render() {
return (
<div className="ClickCount">
<button onClick={this.onClickButton}>点我点我，心想啥事</button>
<p>你点了我：{this.state.count}次</p>
</div>
);
}
}
export default ClickCount;
propTypes验证.png
默认值 defaultProps
图片.png
clickCount.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class ClickCount extends Component {
constructor(props) {
super(props);
this.onClickButton = this.onClickButton.bind(this);
this.state = {count:0};
}
onClickButton(){
this.setState({'count':this.state.count + 1});
console.log(this.props.parentsName);
}
render() {
return (
<div className="ClickCount">
<button onClick={this.onClickButton}>点我点我，心想啥事</button>
<p>你点了我：{this.state.count}次</p>
</div>
);
}
}
ClickCount.defaultProps = {
parentsName: "homepage"
}
ClickCount.propTypes = {
parentsName:PropTypes.string
}
export default ClickCount;
state
首先说state必须是一个对象，需要在construct里进行初始化，初始化涉及到一个默认值的问题，这个问题需要使用defaultProps解决。
读取和设置
初始化：state的初始化和props的不太一样，state的初始化需要在construct里完成。
读取：this.state.xx读取
设置：this.setState({xx:xxx})
关于这一部分内容我们就不需要再实践了，因为在最开始找自信的时候，我们就已经完成了上面的所有操作
state相关操作.png
网友评论