前言
已学习 React 为前提,这是一个学习的 Demo,用于熟悉 React 项目创建,react-router 的使用,JSX 以及阿里开源 UI 库 AntDesign。Demo中数据来自WanAndroid。
使用库
Demo 解析
1、创建项目
# 全局安装
npm install -g create-react-app
# 构建一个my-app的项目
npx create-react-app my-app
cd my-app
# 启动编译当前的React项目,并自动打开 http://localhost:3000/
npm start
2、网络请求
基于 axios 的封装
import axios from "axios";
import qs from "qs";
let http = {
post: "",
get: ""
};
http.post = (api, data) => {
let params = qs.stringify(data);
return new Promise((resolve, reject) => {
axios
.post(api, params)
.then(res => {
resolve(res.data);
})
.catch(e => {
reject(e);
});
});
};
http.get = (api, data) => {
return new Promise((resolve, reject) => {
axios
.get(api, {
params: data
})
.then(res => {
resolve(res.data);
})
.catch(e => {
reject(e);
});
});
};
export default http;
然后可以直接使用,也可以再次封装
import api from "../../src/api/baseApi";
export function _banner() {
return api.get("/banner/json");
}
使用时以下两种方式均可
async getBanner() {
let res = await _banner();
this.setState({
bannerList: res.data
});
}
//或者
getBanner() {
_banner().then(res=>{
this.setState({
bannerList: res.data
});
})
}
3、Create React App 跨域问题
在 package.json 中加入
"proxy": "https://www.wanandroid.com"
或者,以下方式可支持多域名代理
"proxy": {
"/api": {
"target": "https://www.wanandroid.com",
"ws": true,
"changeOrigin": true,
"pathRewrite": {
"^/api": "" // rewrite path
}
}
}
第二种方式需要在请求路径加/api,如下
export function _banner() {
return api.get("/api/banner/json");
}
4、router的使用
参考React Router 中文文档或者react-router
5、UI库
使用AntDesign。
//引入
import { Menu, Layout } from "antd";
const { Header, Content, Footer } = Layout;
//使用
render(){
return(
<Layout>
<Header>...</Header>
<Content>...</Content>
<Footer>...</Footer>
</Layout>
)
}
Demo截图
首页项目
体系
公众号
上述Demo源码WanAndroid-React-Demo
网友评论