React项目--常用第三方包使用总结

reset css

* yarn add normalize.css
* 创建reset.css文件导入@import "~normalize.css";
* 在index.js中导入import '@/assets/css/reset.css';
* 补充其他需要重制的css

设置craco

* yarn add @craco/craco
* 修改package.json=>scriptes中react-scripts修改为craco 
* package.json同级目录下创建craco.config.js

// 代码如下
const path = require("path");
const resolve = dir => path.resolve(__dirname, dir);
module.exports = {
  webpack: {
    alias: {
      "@": resolve("src"),
    }
  }
}

AntDesign设置

* yarn add antd   
  yarn add @ant-design/icons   （antd图标）
* 在reset.css中导入 @import "~antd/dist/antd.css";才能使用antd中的css样式

编写styled.js： styled-components

* yarn add styled-components
* import styled from 'styled-components';

// 代码试例
export const HeaderLeft = styled.div`
    display: flex;

    .logo {

    }

    .select-list {

        .select-item {
            position: relative;
            a {
                display: block;
                padding: 0 20px;
                color: #ccc;
            }
            /* 选择器，找到最后一个元素 */
            :last-of-type a {
                position: relative;
                ::after {
                  /* 精灵图导入格式 */
                    background-image: url(${require('@/assets/img/sprite_01.png')});
                }
            }
            /* :hover 选择器  a.active鼠标放上时候状态*/
            &:hover a, a.active {
            }

            .active .icon {
            }
        }
    }

`

项目路由配置

* yarn add react-router-dom
  yarn add react-router-config

* router/index.js
// router路径配置，路径与页面的映射关系
const routes = [
    {
        path: "/discover",
        exact: true,
        component: ZJDiscover
    },
    {
        path: "/mine",
        component: ZJMine
    },
    {
        path: "/friend",
        component: ZJFriend
    }
];
export default routes; 

* import { renderRoutes } from 'react-router-config' ; 
  import routes from './router'
// 通过{renderRoutes(routes)}应用routes映射表
<HashRouter>
      {renderRoutes(routes)}
</HashRouter>

* import { NavLink } from 'react-router-dom';
// 点击路由进行跳转
<NavLink to="/discover" exact>发现音乐</NavLink>