shell
//设置安装全局
npm install -g create-react-app
//创建名称为hello-react的脚手架
create-react-app hello-react
//进入到项目的目录
cd hello-react
//运行项目
npm start
Code
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文件
javascript
import React, {Component} from 'react'
export default class $className$ extends Component {
render() {
return(
<div>
</div>
)
}
}
Code
- a.封装XmlHttpRequest对象的ajax
- b. promise风格
- c.可以用在浏览器端和node服务器端
Code
- a.不再使用XmlHttpRequest对象提交ajax请求
- b.为了兼容低版本的浏览器, 可以引入兼容库fetch.js
shell
$ 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);
}
}
javascript
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
javascript
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+'==>请求错误')
})
}
javascript
fetch(url, {
method: "POST",
body: JSON.stringify(data),
}).then(function(data) {
console.log(data)
}).catch(function(e) {
console.log(e)
})
javascript
import PubSub from 'pubsub-js' //引入
componentDidMount() {
PubSub.subscribe('delete', (msg,data)=>{ }); //订阅
}
PubSub.publish('delete', data) //发布消息
暂时不介绍
Code
a.事件名(类型): 只有有限的几个, 不能随便写
b.回调函数
Code
a.用户操作界面
b.事件名(类型)
c.数据()
Code
a.事件名(类型): 任意
b.回调函数: 通过形参接收数据, 在函数体处理事件
Code
a.事件名(类型): 与绑定的事件监听的事件名一致
b.数据: 会自动传递给回调函数
Code
a.常用场景
* 组件的自定义方法: xxx = () => {}
* 参数匿名函数
b.优点:
* 简洁
* 没有自己的this,使用引用this查找的是外部this