前端模块化开发--React框架（二）：脚手架&&网络请求框架

//设置安装全局
npm install -g create-react-app
//创建名称为hello-react的脚手架
create-react-app hello-react
//进入到项目的目录
cd hello-react
//运行项目
npm start

ReactNews
	|--node_modules---第三方依赖模块文件夹
	|--public
		|-- index.html-----------------主页面
	|--scripts
		|-- build.js-------------------build打包引用配置
	|-- start.js-------------------start运行引用配置
	|--src------------源码文件夹
		|--components-----------------react组件
		|--index.js-------------------应用入口js
	|--.gitignore------git版本管制忽略的配置
	|--package.json----应用包配置文件 
	|--README.md-------应用描述说明的readme文件

import React, {Component} from 'react'

export default class $className$ extends Component {

    render() {
        return(
            <div>

            </div>
        )
    }
}

- a.封装XmlHttpRequest对象的ajax
- b. promise风格
- c.可以用在浏览器端和node服务器端

- a.不再使用XmlHttpRequest对象提交ajax请求
- b.为了兼容低版本的浏览器, 可以引入兼容库fetch.js

$ npm install axios

//使用axios发送异步的ajax请求
        const url = 'https://api.github.com/search/repositories';

        axios.get(url,{
            params:{
                q:'r',
                sort:'starts'
            }
        }).then(response => {
            const result = response.data
            const {owner={}} = result.items[0]
            this.setState({avatar_url: owner.avatar_url,repoName:'logo'});
        }).catch(error=>{
            console.log(error)
        })
        
// Want to use async/await? Add the `async` keyword to your outer function/method.
        async function getUser() {
          try {
            const response = await axios.get('/user?ID=12345');
            console.log(response);
          } catch (error) {
            console.error(error);
          }
        }

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

fetchRequire(){
    const url = 'https://api.github12.com/search/repositories?q=r&sort=stars';
    fetch(url).then(response=>{
        return response.json()
    }).then(data=>{
        const {owner={}} = data.items[0]
        this.setState({avatar_url: owner.avatar_url,repoName:'logo'})
    }).catch(e=>{
        //请求错误的时候
        console.log(e+'==>请求错误')
    })
}

fetch(url, {
  method: "POST",
  body: JSON.stringify(data),
}).then(function(data) {
  console.log(data)
}).catch(function(e) {
  console.log(e)
})

import PubSub from 'pubsub-js' //引入
componentDidMount() {
  PubSub.subscribe('delete', (msg,data)=>{ }); //订阅  
}
PubSub.publish('delete', data) //发布消息

a.事件名(类型): 只有有限的几个, 不能随便写
b.回调函数

a.用户操作界面
b.事件名(类型)
c.数据()

a.事件名(类型): 任意
b.回调函数: 通过形参接收数据, 在函数体处理事件

a.事件名(类型): 与绑定的事件监听的事件名一致
b.数据: 会自动传递给回调函数

a.常用场景
    * 组件的自定义方法: xxx = () => {}
    * 参数匿名函数
b.优点:
    * 简洁
    * 没有自己的this,使用引用this查找的是外部this