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