react-从0开始超详细搭建后台管理项目

前言

从0开始,一步步代码图文详解搭建过程. 搭建一个后台管理项目,有用到antd,装饰器等,具体看技术栈.

本文的大致流程是:创建项目框架--下载技术栈--配置技术栈--环境配置如跨域等--运行项目

创建项目

//命令行中执行  
npm install -g create-react-app
create-react-app 项目名称  
或者  
create-react-app ./   //这里表示当前文件夹名就是项目名,我们这里使用该语句,就不用cd切换了

这样就创建好了一个项目,目录如下,浏览器上访问http://localhost:3000出现react动画就说明创建成功

技术栈

说以下项目中会用到那些技术,在搭建项目的过程中我们需要下载这些技术内容,并且配置内容.

下载技术栈

react
react-router-dom
prop-types
高阶组件
fecth/axios
redux
react-redux
redux-actions
js-cookie
react-loadable
ES7装饰器
style-component
redux-thunk
antd

//控制台下载语句
yarn add react-router-dom prop-types axios redux antd
yarn add redux-actions react-redux js-cookie react-loadable redux-thunk

配置技术栈

antd按需加载

antd整体的代码还是比较大的,我们并不是所有样式都用到了,所以这里最好做以下按需加载,这也是优化的一部分
命令行中执行,antd官网中并没有react-scripts下载,但不下载实际运行时会报错.

 yarn add react-app-rewired customize-cra
 yarn add babel-plugin-import react-scripts -D

package.json文中将srcipt配置项修改为如下:

"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test",
   "eject": "react-scripts eject"
 },

根目录下创建文件config-overrides.js,antd的按需加载内部配置如下:

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
  fixBabelImports('antd', {
    libraryDirectory: 'es',
    style: 'css',
  }),
);

以上一个antd的按需加载就配置完毕了,config-overrides.js文件不仅可以用于antd的按需加载配置,还可以用于别名的配置,后面会去讲解
下面我们可以测试以下,在App.js文件中编写如下代,运行yarn start ,在浏览器中http://localhost:3000 出现antd样式

import React ,{Component}from 'react';
import { Button } from 'antd';
import './App.css';

class App extends Component{
  render(){
    return(
      <div className="App">
      <Button type="primary">Button</Button>
    </div>
    )
  }
}
export default App;

装饰器配置

安装装饰器需要的依赖

yarn add @babel/plugin-proposal-decorators @babel/plugin-syntax-jsx

在package.json中配置装饰器

"babel": {
    "plugins":[
      ["@babel/plugin-proposal-decorators",{"legacy":true}]
    ],
    "presets": [
      "react-app"
    ]
  },

在config-overrides.js文件中配置装饰器

const { override, fixBabelImports,addWebpackAlias,addDecoratorsLegacy } = require('customize-cra');
const path=require('path')
module.exports = override(
  //antd按需加载
fixBabelImports('antd', {
  libraryDirectory: 'es',
  style: 'css',
}),
//别名配置
addWebpackAlias({
  '@':path.join(__dirname,'./src')
}),
//装饰器配置项
addDecoratorsLegacy()
);

在根目录下创建文件jsconfig.json,让编译器识别装饰器语法,配置内容如下:

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

以上就是装饰器的配置,让我们测试一下,高阶组件用装饰器的写法
第一步,在根目录下创建hoc/index.jsx文件

import React,{Component} from 'react'
export const header =(WrapperComponent)=>{
    return class extends Component{
        render(){
            return(
                <div>高阶组件</div>
            )
        }
    }
}

第二步,在App.js文件中引入:

import React ,{Component}from 'react';
import './App.css';
import {header} from './hoc/index';
//@就是装饰器模式下高阶组件的使用方式
@header
class App extends Component{
  render(){
    return(
      <div className="App"> </div>
    )
  }
}
export default App;

第三步,运行yarn start ,在浏览器中http://localhost:3000 出现高阶组件4个字说明配置成功

环境配置

webpack配置

使用create创建的项目中,是没有webpack配置的,我们需要手动将webpack配置暴露出来.
以下是暴露webpcak的操作,每一步都是必须且要按照顺序执行

1.git init,出现Initialized empty Git repository in提示初始化了空的git仓库,项目中多了.git文件夹
2.git add . 把当前所有添加到git仓库
3.git commit -m 'eject' 提交到本地仓库
4.yarn eject,选择y

执行完上面的步骤后,项目中会多处一个config文件夹,这就是webpack配置的地方

跨域

yarn add http-proxy-middleware

在src目录下创建setupProxy.js文件

const {createProxyMiddleware} = require("http-proxy-middleware");

module.exports = (app)=>{
    app.use("/app",createProxyMiddleware({
        target:"http://localhost:3001",
        changeOrigin:true
    }))
}

别名配置

项目中引入一个组件需要写组件路径,如果路径比较复杂,书写容易出错,所以我们通过配置路径别名,简化路径的书写
比如在src/pages/header/header.jsx中引入src/component/header/header.js.

//正常
import Header from '../../component/header/header'
//配置别名后,@代表src
import Header from '@/component/header/header'

别名的配置是在config-overrides.js文件中,我们接着上面的antd按需加载配置接着写,别名的配置如下:

const { override, fixBabelImports,addWebpackAlias } = require('customize-cra');
const path=require('path')
module.exports = override(
    //antd按需加载
  fixBabelImports('antd', {
    libraryDirectory: 'es',
    style: 'css',
  }),
  //别名配置
  addWebpackAlias({
   "@":path.join(__dirname,"./src"),
    "@actions":path.join(__dirname,"./src/actions"),
    "@api":path.join(__dirname,"./src/api"),
    "@common":path.join(__dirname,"./src/common"),
    "@components":path.join(__dirname,"./src/components"),
    "@layout":path.join(__dirname,"./src/layout"),
    "@pages":path.join(__dirname,"./src/pages"),
    "@router":path.join(__dirname,"./src/router"),
    "@store":path.join(__dirname,"./src/store"),
    "@utils":path.join(__dirname,"./src/utils")
  })
);

静态资源

src目录下创建assets文件夹
图片放在,src/assets/image下

import Logo from '@assets/image/logo.png'
<img src={Logo} alt="" className="logo" />

静态资源如公共样式css,放在src/assets/styled下,并引入index.js中
reset.css文件地址:https://www.cnblogs.com/liuXiaoDi/p/12786664.html

 import './assets/styled/reset.css';

网上有说把reset文件引入index.html文件的,这样可以,但是当我们需要post-css自动转化px-》rem时,写在index.html这种会失效.
自动px-》rem转化详细配置参考:https://juejin.im/post/5d5cd14951882546282363b6

运行项目

在终端中执行npm run start