史上最全的React学习总结，保你一看就会。(三)

今天主要来讲一下React脚手架，React ajax.

一.使用create-react-app创建react应用

        1.react脚手架：

                （1）xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目

                （2）包含了所有需要的配置（语法检查、jsx编译、devServer…）

                （3）下载好了所有相关的依赖

                （4）可以直接运行一个简单效果

                （5）react提供了一个用于创建react项目的脚手架库: create-react-app

                （6）项目的整体技术架构为:  react + webpack + es6 + eslint

                （7）使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

        2.创建项目并启动：

        第一步，全局安装：npm i -g create-react-app

        第二步，切换到想创项目的目录，使用命令：create-react-app hello-react

        第三步，进入项目文件夹：cd hello-react

        第四步，启动项目：npm start

3.react脚手架项目结构：          

                public ---- 静态资源文件夹

                f avicon.icon ------ 网站页签图标

                index.html -------- 主页面

                 logo192.png ------- logo图

                logo512.png ------- logo图

                manifest.json ----- 应用加壳的配置文件

                robots.txt -------- 爬虫协议文件

                src ---- 源码文件夹

                App.css -------- App组件的样式

                App.js --------- App组件 

                 App.test.js ---- 用于给App做测试

                index.css ------ 样式

                 index.js ------- 入口文件

                logo.svg ------- logo图   

                reportWebVitals.js

                        --- 页面性能分析文件(需要web-vitals库的支持)

                setupTests.js

                        ---- 组件单元测试的文件(需要jest-dom库的支持)

 二.React  ajax:

        1.对React ajax的理解：

                （1）React本身只关注于界面, 并不包含发送ajax请求的代码

                （2）前端应用需要通过ajax请求与后台进行交互(json数据)

                （3）react应用中需要集成第三方ajax库(或自己封装)

        2.常用的ajax请求库：

                （1）jQuery: 比较重, 如果需要另外引入不建议使用

                （2）axios: 轻量级, 建议使用

                        （a）封装XmlHttpRequest对象的ajax

                          (b)   promise风格

                        （c）可以用在浏览器端和node服务器端

        3.axios文档：

                GitHub - axios/axios: Promise based HTTP client for the browser and node.js

        4.相关API：

                （1）GET请求：                

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });


axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

                （2）POST请求：

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

        5.消息订阅-发布机制：

                （1）工具库: PubSubJS

                （2）下载: npm install pubsub-js --save

                 （3）使用：

                        （a）import PubSub from 'pubsub-js' //引入

                        （b）PubSub.subscribe('delete', function(data){ }); //订阅

                        （c）PubSub.publish('delete', data) //发布消息

   6.扩展：Fetch:

                (1)文档：

                        https://github.github.io/fetch/

                         https://segmentfault.com/a/1190000003810652

                （2）特点：

                        （a）fetch: 原生函数，不再使用XmlHttpRequest对象提交ajax请求

                        （b）老版本浏览器可能不支持

        （3）相关API：

                （a）GET请求：

fetch(url).then(function(response) {
    return response.json()
  }).then(function(data) {
    console.log(data)
  }).catch(function(e) {
    console.log(e)
  });

                （b）POST请求：

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

今天到这里就结束了，明天给大家更新React路由哟！​​​​​​​