一，react单文件组件的开发方式
1.安装脚手架工具 (安装成功只需要一次)
npm install -g create-react-app / cnpm install -g create-react-app
2.创建项目
create-react-app 项目名称 (创建项目的时候自动安装依赖)
cd 项目名称
3，npm start 启动项目
举例：
create-react-app reactdemo01
cd reactdenmo01
npm start
https://reactjs.org/docs/installation.html#creating-a-new-application
二，react 路由
1，安装
cnpm install react-router-dom --save
2，引入
import {
BrowserRouter as Router,
Route,
Link,
} from 'react-router-dom';
3，定义组件引入组件
例如： import home from './components/home.js';
4，配置路由
例如：
render(
<Route>
<Route path="/home" component={home}/>
<Route exact path="/" component={home}/>（ 配置 默认路由）
</Router>
)
配置 子路由
在该跳转的路由的页面上配置
import home01 from './1.js';
import home02 from './2.js';
<Route path={`${this.props.match.url}/1`} component={home01}/>
<Route path={`${this.props.match.url}/2`} component={home02}>
5，路由调转
import {
Link
} from 'react-router-dom';
<Link to="/home">xxxxx</Link>
js: this.props.history.push('/home');
如果报错
static contextTypes = {
router: PropTypes.object
}
this.context.router.history.push('/homer')
6，动态路由的传值
①在配置路由的时候像这样
<Route path="/xq/:aid" component={xq}/>
②在路由 调转时
<Link to="/xq/123">xxxxx</Link>
③获取值
var aid=this.props.match.params.aid;
三，引入组件
import Foot from './foot.js'; (Foot一定要大写)
<Foot></Foot>
四，请求数据（以 axios 为列）
cnpm install axios --save
import axios from 'axios';
链接 axios
五，模版(参考)
import React from 'react';
class My extends React.Component{
constructor(props){
super(props);
this.state={
msg:'这是一个组件'
}
} render(){
return(
<div>my</div>
) }
componentDidMount(){
}
}
export default My;
六，常用的一些内容
点击事件 onClick={this.zc.bind(this)}
获取值：
例如：
先在this.state 里定义tel=' ',
<input type='text' defaultValue={this.state.tel} onChange={this.tel.bind(this)}/>
tel(e){
this.setState({tel: e.target.value});
}（注：this.setState是设置值）
然后就能得到值console.log(this.state.tel);
