前端模块化开发--React框架(二):脚手架&&网络请求框架
一、React脚手架
1、react脚手架说明
- 1)xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
1
2
3- a.包含了所有需要的配置
- b.指定好了所有的依赖
- c.可以直接安装/编译/运行一个简单效果 - 2)react提供了一个用于创建react项目的脚手架库: create-react-app
- 3)项目的整体技术架构为: react + webpack + es6 + eslint
- 4)使用脚手架开发的项目的特点: 模块化, 组件化, 工程化
2、使用命令
1 | //设置安装全局 |
3、react脚手架项目结构
1 | ReactNews |
4、WebStorm配置代码模板
1 | import React, {Component} from 'react' |
二、react ajax
1、说明
- 1)React本身只关注于界面, 并不包含发送ajax请求的代码
- 2)前端应用需要通过ajax请求与后台进行交互(json数据)
- 3)react应用中需要集成第三方ajax库(或自己封装)
2、常用的ajax库
- 1)jQuery: 比较重, 如果需要另外引入不建议使用
- 2)axios: 轻量级, 建议使用
1 | - a.封装XmlHttpRequest对象的ajax |
- 3)fetch: 原生函数, 但老版本浏览器不支持
1 | - a.不再使用XmlHttpRequest对象提交ajax请求 |
3、axios
安装
1 | npm install axios |
使用
- GET方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26//使用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);
}
}
- POST方式
1 | axios.post('/user', { |
4、fetch
GET请求
1 | fetchRequire(){ |
POST请求
1 | fetch(url, { |
三、重要总结
1、组件间通信
方式一: 通过props传递
- 1)共同的数据放在父组件上, 特有的数据放在自己组件内部(state)
- 2)通过props可以传递一般数据和函数数据, 只能一层一层传递
- 3)一般数据–>父组件传递数据给子组件–>子组件读取数据
- 4)函数数据–>子组件传递数据给父组件–>子组件调用函数
方式二: 使用消息订阅(subscribe)-发布(publish)机制
- 1)工具库: PubSubJS
- 2)下载: npm install pubsub-js –save
- 3)使用:
1 | import PubSub from 'pubsub-js' //引入 |
方式三: redux
暂时不介绍
2、事件监听理解
原生DOM事件
- 1)绑定事件监听
1 | a.事件名(类型): 只有有限的几个, 不能随便写 |
- 2)触发事件
1 | a.用户操作界面 |
自定义事件(消息机制)
- 1)绑定事件监听
1 | a.事件名(类型): 任意 |
- 2)触发事件(编码)
1 | a.事件名(类型): 与绑定的事件监听的事件名一致 |
3、ES6常用新语法
- 1)定义常量/变量: const/let
- 2)解构赋值: let {a, b} = this.props import {aa} from ‘xxx’
- 3)对象的简洁表达: {a, b}
- 4)箭头函数:
1 | a.常用场景 |
- 5)扩展(三点)运算符: 拆解对象(const MyProps = {}, <Xxx {…MyProps}>)
- 6)类: class/extends/constructor/super
- 7)ES6模块化: export default | import
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 MiChong的🏡!
评论