React后台管理（一）-- 项目初始化与配置

---

前言

本文简单讲一下用Create-React-App初始化项目，旨在保持整个系列的连贯性。通过实际操作演示，展示如何利用React和React Hook编写一个完整功能的后台系统！

---

一、初始化项目

# 安装Create React App（如果尚未安装）
npm install -g create-react-app
# 创建一个新的React项目，使用TypeScript模板:
npx create-react-app react-practical-project --template
# 进入项目目录
cd react-practical-project
# 如果需要，可以更新React到最新的18版本:
npm install react@latest react-dom@latest
# 启动开发服务器
npm start

二、基础配置

1. 项目目录按如下配置，如下

2. 使用Craco，配置别名@

注：不像Vue-CLI,React并没有一个文件专门修改react配置，这个时候就需要使用Craco去覆盖React配置，具体可以网上查阅，这里就不啰嗦了

（1）安装craco包

npm install @craco/craco

（2）在项目根目录下创建 craco.config.js 文件,配置如下

const path = require('path')
module.exports = {
  // webpack 配置
  webpack: {
    // 配置别名
    alias: {
      // 使用 @ 表示 src 文件所在路径
      "@": path.resolve(__dirname, "src"),
    },
  },
  //配置代理解决跨域
  devServer: {
    proxy: {
      [process.env.REACT_APP_MARK]: {
        target: process.env.REACT_APP_API,
        changeOrigin: true,
        pathRewrite: {
          [`^${process.env.REACT_APP_MARK}`]: "",
        },
      },
    },
  },
  // babel 配置
  babel: {},
  // eslint 配置
  eslint: {},
};

（3）修改 package.json 文件,配置如下

  "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",
     // ...
   },

---

总结

接下来的系列文章，将开始后台常用功能的开发。主要内容包括多环境配置、路由配置、Error Boundary的使用、状态管理、mock方案的选择、与真实服务器的连接、页面常用hook的封装、全局公共组件的封装、传值和插槽的使用，以及布局相关的函数组件封装等。并且结合antDesign UI框架，最终构建一个完整功能的示例页面。请密切关注本栏目，会实时更新内容！