React 基础项目依赖

reset-css（清除浏览器默认CSS样式）

下载：

npm i -S reset-css

yarn add reset-css

引入：

import "reset-css";

react-flexible（rem移动端适配）

下载：

npm i -S react-flexible

yarn add react-flexible

引入：

import "react-flexible";

axios（请求数据）

下载：

npm i axios

yarn add axios

引入：

import axios from "axios";

http-proxy-middleware（跨域请求）

下载：

npm i http-proxy-middleware

yarn add http-proxy-middleware

配置：

多个跨域配置

src/setupProxy.js

//跨域的配置
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
    app.use(
        createProxyMiddleware('/api', {
            target: "http://touch.m.fdjsf.com/api",
            changeOrigin: true,
            pathRewrite: { '^/api': "" }
        })
    );
    app.use(
        createProxyMiddleware('/h5ajax.php', {//遇见h5ajax.php前缀的请求，就会触发该代理配置
            target: 'http://product.m.dangdang.com/',//请求转发给谁
            changeOrigin: true,//控制服务器收到的请求头中host字段的值,host字段可以标识本次请求是从哪里发出的,可以完美的欺骗服务器
            pathRewrite: { '^/': '' }//重写请求路径
        }),
    );
}

一个跨域配置

package.json 中添加 "proxy":"https:fdsfdskjv.com/api"  如下：

{
  "name": "react-app",
  "version": "0.1.0",
  "private": true,
  "proxy":"https:fdsfdskjv.com/api" // 配置一条跨域添加此处
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "sass": "^1.32.11"
  }
}

react-router-dom

下载：

npm i -S react-router-dom

yarn add react-router-dom

路由封装与简单使用：

src/router/config.js

//路由配置文件
import React from 'react';
//希望使用懒加载
const Main = React.lazy(() => import('../pages/main'));
const Mask = React.lazy(() => import('../pages/mask'));
const List = React.lazy(() => import('../pages/list'));
const Item = React.lazy(() => import('../pages/item'));

//路由表信息
const routes = [
    { path: "/main", component: Main },
    { path: "/mask", component: Mask },
    { path: "/list", component: List },
    { path: "/item", component: Item },
    { from: '/', to: '/main' }
];
export default routes;

src/router/index.js

//路由
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
//路由 view
import RouterViews from './routerview';
//路由的config
import routes from './config';

//创建路由表
const App = () => (
    <Router>
        <RouterViews routes={routes} />
    </Router>
)
export default App;

src/router/routerview.jsx 

//路由表的显示文件
import React, { Suspense } from 'react';

import { Switch, Redirect, Route } from 'react-router-dom';

const test = (props) => (
    <Suspense fallback={<div>Loading......</div>}>
        <Switch>
            {
                props.routes.map((item, key) => {
                    if (item.to) return <Redirect key={key} from={item.from} to={item.to} />
                    return <Route key={key} path={item.path} component={item.component} />
                })
            }
        </Switch>
    </Suspense>
)

export default test;

sass（CSS扩展语言）或 less（CSS扩展语言）开发环境使用

下载：

npm i sass -D

yarn add sass --dev

antd（react 的UI框架）

下载：

npm i -S antd

yarn add antd

引入：

import "antd/dist/antd.min.css";

简单使用：

src/components/header/index.jsx 路径看自己需求，详细文档请看官网：https://mobile.ant.design/index-cn（移动端）https://ant.design/index-cn（PC）

//头部组件
import React, { Component } from 'react';
// antd 是按需加载的
import { NavLink } from 'react-router-dom';
import { Row, Col } from 'antd';
import {
    HomeOutlined, ShoppingCartOutlined
} from '@ant-design/icons';
import './Header.scss';
class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
        return (<div className="header">
            <Row>
                <Col span={4}><HomeOutlined className="home" /></Col>
                <Col span={16}>col-8</Col>
                <Col span={4}><ShoppingCartOutlined className="cart" /></Col>
            </Row>
            <div className="headernav">
                <NavLink to="/main">今日推荐</NavLink>
                <NavLink to="/mask">面膜中心</NavLink>

            </div>

        </div>);
    }
}
export default Header;