react hook仿造掘金博客项目

一、准备工作

React项目配置Less

搭建项目

使用 create-react-app 脚手架创建项目

or

安装create-react-app

并自动引入ts

$ cnpm install create-react-app
$ create-react-app proName --typescript

暴露配置项

需要先安装react-scripts

cnpm install react-scripts -g

然后执行

react-scripts eject

修改webpack.config

参照sass的配置来添加less配置

添加lessRegex变量

配置less-loader

安装依赖

cnpm install  less-loader

此时运行项目会报错，需要安装less

cnpm install  less

引入less文件

less-loader和less安装完成后，less编译配置就完成了，可以直接在项目引用less文件

import './global.less';

配置绝对路径

根据官方文档的解释，在你项目的根目录下创建jsconfig.json文件，并添加以下代码。(注意，如果配置了ts，应当直接在tsconfig.json里配置里就好了)

{
   
  "compilerOptions": {
   
    "baseUrl": "src"
  },
  "include": ["src"]
}

好极了，现在就可以像往常一样使用相对路径

antd在React项目中按需加载

在antd官网中只介绍了使用react-app-rewired来配置antd的按需加载，但我们日常开发通常会使用eject命令暴露所有配置，所以官网提供的配置方法已不再适用，本文将会介绍在eject项目之后配置antd按需加载的方法

1. 安装antd

cnpm install antd --save

2. 引入babel-plugin-import

使用babel-plugin-import按需引入antd样式

cnpm install babel-plugin-import

3. 修改 package.json

修改package.json文件中的babel配置信息，增加babel-plugin-import的配置

{
   
  ······
  "babel": {
   
    "plugins": [
      ······
      [
        "import",
        {
   
          "libraryName": "antd",
          "style": "css"
        }
      ],
    ],
    "presets": [
      "react-app"
    ]
  }
}

6. 然后移除前面在 src/App.css 里全量添加的 @import ‘~antd/dist/antd.css’; 直接引入组件使用就会有对应的css

import {
    Button } from 'antd';


<Button type="primary">Primary</Button>

添加路由表

我们先在router/router.js 写好我们的路由表

import Root from 'pages/App'
import Home from 'pages/Home'
import Test from 'pages/Home/test'
import Detail from 'pages/Detail'
const routes = [
    {
   
        path: '/',
        label: '首页',
        exact: true,
        component: Root
    },
    {
   
        path: '/detail',
        label: '书籍',
        component: Detail
    },
    {
   
        path: '/home',
        label: '书籍',
        component: Home,
        routes: [
            {
   
                path: '/home/test',
                label: '书籍test',
                component: Test
            }
        ]
    },
]
export default routes

安装 react-router-config

npm install --save react-router-config

在index.js中引入并且使用

import ReactDOM from 'react-dom';
// import 'antd/dist/antd.css';
import {
    BrowserRouter as Router } from 'react-router-dom';
import routes from 'router/router.js'
import {
    renderRoutes } from 'react-router-config'
console.log(routes);
console.log(renderRoutes(routes));
ReactDOM.render(
  <Router>
    {
   renderRoutes(routes)}
  </Router>