react项目生成及相关配置_react项目中的.configs-CSDN博客

本文链接：https://blog.csdn.net/weixin_45969726/article/details/125340663

本文详细介绍了如何使用Yarn初始化React项目，整理文件结构，配置Webpack、SASS，设置环境变量，并利用Ant Design组件库。涉及关键步骤包括删除冗余文件、配置LESS支持、代理服务器设置和类型检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

生成一个项目名称为my-app的

yarn create react-app my-app

将生成的文件中的没有用的一些文件可以删除

在public 文件夹中，只留下 favicon.ico 和 index.html
在src文件夹中App.js、App.css、index.js、index.css.是可以保留的，其他都可以删除。其中index.js 是打包的入口文件，一定要有。
在根目录下新建一个src 文件夹，用来存放组件

将webpack.config.js 这个配置文件暴露出来，方便以后修改和配置

【注意：在这里git可能会影响暴露，将所有文件都上传，再执行命令】

yarn eject

尝试启动项目

【只要能启动成功，证明此时的项目是没有问题的】

yarn start

在src 文件夹下新建一个views 文件夹，用来存放组件，一个组件一个文件夹，每个文件夹由一个.jsx 和一个 .css/.less/.sass/.scss组成，一个组件搭配一个样式。

在初始化的项目中，默认可以支持加载. sass ，但是没有.less的加载驱动，需要在webpack.config.js中进行配置。相关配置

[转到我另外一个文档]: 在react脚手架项目中配置less
向要在app中使用sass.需要进行一些配置
```
yarn add node-sass
```
这样就可以直接在jsx文件中直接导入 .sass或 .scss文件了
想要节省路径写法，可以在webpack.config.js中进行相关配置

ctrl+f 在 webpack.config.js 文件中全局搜索alias 在里面进行配置如下代码（如果有需要，可以按照这种写法进行配置）
```
 "@src": path.resolve(__dirname, "../src"),
 "@view": path.resolve(__dirname, "../src/view"),
```

在根目录下新建一个名字为 .env 的文件，里面用来配置环境变量

REACT_APP_DEVELOPMENT_API = "https://dev.baidu.com" 
REACT_APP_PRODUCTION_API = "https://prod.baidu.com" 
REACT_APP_DEV_NAME = 开发测试 
REACT_APP_PROD_NAME = 管理系统

使用方法一：

 <title>%REACT_APP_DEV_NAME%</title>

使用方法二：（模拟使用方法，可以获取到当前的环境），在src 文件夹下，新建一个until的工具类，里面一般存放封装的请求的工具。

export default function ajax() {
    // 通过 process.env 获取当前项目中，使用的环境变量。
    // NODE_ENV 是安装nodejs时，内置的环境变量。可以得到当前项目的环境是生产环境还是开发环境。
    let isProduction = process.env.NODE_ENV;
    let api =
      isProduction === "production"
        ? process.env.REACT_APP_PRODUCTION_API
        : process.env.REACT_APP_DEVELOPMENT_API;
    console.log("---", api);
  }

封装请求的方法，会在很多地方都能用到，可以直接将他挂载到全局变量上，直接挂载到index.js 这个入口文件中。如：

React.Component.prototype.$ajax = ajax;

就可以在其他组件中直接调用这个方法如：

 componentDidMount() {
    this.$ajax();
  }

8.如果需要用到跨域需要安装一个中间件 http-proxy-middleware

安装

yarn  add http-proxy-middleware

在src目录下创建 setupProxy.js 文件，这个文件名是固定的，webpack打包，会自动寻找这个代理文件。里面放如下的代理请求的代码【代理服务器就是应付一下，这种跨域问题一般有后端进行解决】

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

module.exports = (app) => {
  app.use(
    "/lqb",
    createProxyMiddleware({
      target: "https://www.lanqb.com",
      changeOrigin: true,
      pathRewrite: {
        "^/lqb": "",
      },
    })
  );
};

使用代理的方法，在组件中，发送请求可以直接使用，例如：

componentDidMount() {
    ajax();
    fetch(
      "/lqb/school/special-training-list?status=show&limit=20&page=1&course_style_ids=11&weight=desc"
    )
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
      });
  }

类型检查用来检查传值的类型是否符合要求

安装类型检查
```
yarn add prop-types
```

使用如下方法进行类型检查如：

 static defaultProps = {
    num: 100,
  };
  static propTypes = {
    num: PropTypes.number,
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired,
    sex: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  };