前言

已学习 React 为前提，这是一个学习的 Demo，用于熟悉 React 项目创建，react-router 的使用，JSX 以及阿里开源 UI 库 AntDesign。Demo中数据来自WanAndroid。

使用库

React

Create React App

react-router

AntDesign

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>
  )
}