react后台管理系统(一)_react.js

🌈个人主页：前端青山 🔥系列专栏：React篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来React篇专栏内容:react后台管理系统(一)

前言

本文档详细介绍了如何从零开始搭建一个基于 React 和 Ant Design 的前端项目。通过逐步引导，读者可以了解从项目初始化到配置装饰器、集成 UI 库、设计布局结构、配置路由以及实现左侧菜单栏的完整流程。本文档适合初学者和有一定经验的开发者，帮助他们在实际项目中快速上手。

目录

前言

1.创建项目

2.配置装饰器(但不是必须)

3.配置UI库

4.修改目录结构

5.搭建项目的主结构

6.设计左侧菜单栏

7.左侧菜单

总结

1.创建项目

代码解读 
npx create-react-app react-pro
  • 1.

2.配置装饰器(但不是必须)

安装模块

代码解读 
cnpm i @babel/plugin-proposal-decorators customize-cra react-app-rewired -D
yarn add @babel/plugin-proposal-decorators customize-cra react-app-rewired -D
  • 1.
  • 2.

根目录下创建config-overrides.js

代码解读 
// 参考配置连接：https://www.npmjs.com/package/customize-cra
const {override,addDecoratorsLegacy}=require("customize-cra");

module.exports=override(
    addDecoratorsLegacy(),//配置装饰器模式
);
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

修改package.json运行命令

代码解读 
...,
"scripts": {
    "start": "react-app-rewired start", // update
    "build": "react-app-rewired build", // update
    "test": "react-app-rewired test",  // update
    "eject": "react-scripts eject"
},
...
import { connect } from 'react-redux'
class App extends Component {
  render () {
    return ()
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(App)

==装饰器(只能用在类组件中，可以装饰类以及类的方法)==>
import { connect } from 'react-redux'

@connect(mapStateToProps, mapDispatchToProps)
class App extends Component {
  render () {
    return ()
  }
}

export default App
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.

3.配置UI库

 Ant Design - 一套企业级 UI 设计语言和 React 组件库 查看文档

 在 create-react-app 中使用 - Ant Design 查看具体的使用文档

代码解读 
cnpm i antd -S 
yarn add antd -S
  • 1.
  • 2.

删除src文件内容，添加index.css 以及 index.js

index.css

代码解读 
@import '~antd/dist/antd.css';
  • 1.

index.js