# react_demo

**Repository Path**: idujiawei/react_demo

## Basic Information

- **Project Name**: react_demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-01-16
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 初始化项目

使用 `create-react-app` 来构建 `react` 项目

#### 在使用 `create-react-app` 构建项目时集成 `sass` 。

> 目前没有在 npm 上找到 react-scripts-less ，所以只能初始化集成 sass。

```js
create-react-app <projectName> --scripts-version react-scripts-sass
```

#### 集成 `Ant Design`。

> 这里参照 [antd官网](https://ant.design/docs/react/use-with-create-react-app-cn)，来一步步配置就好了。

**这里如果是集成`react-scripts-sass`，需要按照下面做出修改**

打开 `/node_modules/react-app-rewire-less/index.js`

```js
const cssRules = getLoader(
    config.module.rules,
    rule => String(rule.test) === String(/\.css$/)
);

// 将上面的代码修改

const cssRules = getLoader(
    config.module.rules,
    rule => String(rule.test) === String(/(\.css|\.scss|\.sass)$/)
);
```

#### 集成 react 相关库

```js
redux
react-redux
redux-thunk
react-router-dom
react-router-config
axios
```

### 配置全局变量

`create-react-app` 在配置全局变量上给了出入口，之前修改引用库的方法很 **low**。

刚才在查看 `react-scripts/config/env.js` 代码，看到了这样一段:

```js
const REACT_APP = /^REACT_APP_/i;

function getClientEnvironment(publicUrl) {
  const raw = Object.keys(process.env)
    .filter(key => REACT_APP.test(key))
    .reduce(
      (env, key) => {
        env[key] = process.env[key];
        return env;
      },
      {
        NODE_ENV: process.env.NODE_ENV || 'development',
        PUBLIC_URL: publicUrl
      }
    );
  // Stringify all values so we can feed into Webpack DefinePlugin
  const stringified = {
    'process.env': Object.keys(raw).reduce((env, key) => {
      env[key] = JSON.stringify(raw[key]);
      return env;
    }, {}),
  };

  return { raw, stringified };
}
```

通过解读这段代码，我们可以在我们想配置的全局变量带有 `REACT_APP_`，然后就可以输出到全局。

**安装 cross-env**

安装 `cross-env` 的作用，是为了兼容不同开发环境，配置环境变量的问题。

### 项目目录

脚手架初始化的目录并不适合我们实际业务。

```text
.
├── public/ // 模板文件目录
├── src // 开发目录
│   ├── components/  // 组件
│   │   └── common/  // 公共组件
│   ├── containers/  // 页面
│   ├── images/
│   ├── routes/
│   ├── store/
│   │   ├── actions/
│   │   │   └── commonAction.js  // 公共 action
│   │   ├── reducers/
│   │   │   ├── index.js  // reducers 的出口文件
│   │   │   └── commonReducers.js  // 公共 reducer
│   │   ├── ActionTypes.js  // 常量
│   │   └── index.js  // 生成 store，store的出口文件
│   ├── utils/
│   ├── index.css // 公共sass
│   ├── index.js // 入口 js
│   └── project-config.js  // 后端接口 IP，项目配置
├── package.json
├── .gitignore
├── .eslintrc.js // eslint 配置文件
├── config-overrides.js // antd 公共样式配置参数
└── www.js //生产启动程序
```