React环境+React基础+fetch网络请求

react脚手架

第一种方案：

npx create-react-app my-app

cd my-app
 npm start

第二种方案：

 npm install -g create-react-app
  create-react-app my-app

  cd my-app
  npm start

1.语法糖

jsx就是JavaScript新的语法糖
typescript也是JavaScript的语法糖
语法糖是指是基于js提出的语言，最终被转换为js语言编译服务器
注意：必须写成<img/>双标签符合规范

2.component和props是只读属性

component是组件，props用于组件之间相互调用
注意：组件的命名必须符合驼峰规则

3.props的验证

目的：类型检查的作用是增强程序的健壮性！！！

import PropTypes from 'prop-types'
//验证类型：引入包

// 验证类型
User.propTypes = {
    name:PropTypes.string
}
//可以指定多种类型：具体可查react官网

//验证必选项
User.propTypes = {
  name: PropTypes.string.isRequired
}
//说明了类型，且为必选项，当不传信息时会报警告

//默认值：没有传信息时选择默认值
User.defaultProps = {
  name:"默认值"
}

4.state和生命周期

1.state状态构造函数：当前类的初始化状态，state状态(组件内部的数据传递 )都要放在构造函数当中：初始化

export default class Login extends Component{  
	//构造函数
    constructor(){
        super();
        this.state={
            time:"2018/8/1",
            chengpinInfo:[
                {
                    title:"",
                    content:"",
                    img:"",
                }
            ]
            }
    }

2.生命周期lifecycle：在不同的生命周期中执行函数
注意：bind绑定，使this指向当前组件对象

componentDidMount(){
    console.log("组件渲染之后");
    $.ajax({
        type:"get",
        url:"http://www.wwtliu.com/sxtstu/blueberrypai/getChengpinInfo.php",
        success:function (data) {
            this.setState({