React+AntD 开发

环境：Win7以上，编辑器 Visual Studio Code，Node.js(含 npm)，Yarn(比 npm 更高效，官网yarn.bootcss.com下载安装。建议使用npm install -g yarn)

命令行：使用 Visual Studio Code 中的终端。建议全程使用阿里代理

第一章 React介绍

Vue生态：Vue+Vue-Router+Vuex+Axios+Babel+Webpack

React生态：React+React-Router+Redux+Axios+Babel+Webpack

一、安装React

1、创建React所在的文件夹

比如：D:\开发\React

2、安装React脚手架

打开Visual Studio Code 中的终端

当前路径转到 D:\开发\React

>D：
>cd D:\开发\React
D:\开发\React>cnpm install -g create-react-app
Downloading create-react-app to C:\Users\Administrator\AppData\Roaming\npm\node_modules\create-react-app_tmp
Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\create-react-app_tmp\[email protected]@create-react-app to C:\Users\Administrator\AppData\Roaming\npm\node_modules\create-react-app
Installing create-react-app's dependencies to C:\Users\Administrator\AppData\Roaming\npm\node_modules\create-react-app/node_modules
[1/10] [email protected] installed at node_modules\[email protected]@commander
[2/10] [email protected] installed at node_modules\[email protected]@tmp
[3/10] [email protected] installed at node_modules\[email protected]@semver
[4/10] [email protected] installed at node_modules\[email protected]@validate-npm-package-name
[5/10] [email protected] installed at node_modules\[email protected]@chalk
[6/10] [email protected] installed at node_modules\[email protected]@envinfo
[7/10] [email protected] installed at node_modules\[email protected]@cross-spawn
[8/10] [email protected] installed at node_modules\[email protected]@fs-extra
[9/10] [email protected] installed at node_modules\[email protected]@hyperquest
[10/10] [email protected] installed at node_modules\[email protected]@tar-pack
All packages installed (62 packages installed from npm registry, used 3s, speed 198kB/s, json 58(105.85kB), tarball 506.55kB)
[[email protected]] link C:\Users\Administrator\AppData\Roaming\npm\create-react-app@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\create-react-app\index.js

安装React：cnpm是ali提供更快的npm（代理），-g全局选项，create-react-app安装命令

cnpm install -g create-react-app

测试：create-react-app --version

比如提示： 2.1.5

使用yarn

安装：https://yarnpkg.com/en/docs/install

yarn init

yarn add

yarn remove

yarn install

cd <项目所在的文件夹路径>

yarn start

3、初始化React项目，项目名称imoocmanager

D:\开发\React>create-react-app imoocmanager
Creating a new React app in D:\开发\React\imoocmanager.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

yarn add v1.12.3
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 10 new dependencies.
info Direct dependencies
├─ [email protected]
├─ [email protected]
└─ [email protected]
info All dependencies
├─ @babel/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
Done in 253.56s.

Initialized a git repository.

Success! Created imoocmanager at D:\开发\React\imoocmanager
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd imoocmanager
  yarn start

Happy hacking!

注意：之前已安装yarn，会将yarn加入初始化的项目中。

终端命令行：

cd D:\开发\React

create-react-app imoocmanager

项目名称（文件夹名称）：

imoocmanager   注意：如果imoocmanager文件夹已存在或非空时，可能会引起冲突而失败，建议先删除imoocmanager文件夹

4、在Visual Studio Code中打开项目imoocmanager，项目文件夹说明

文件－打开文件夹

选择：D:\开发\React\imoocmanager

node_modules：项目依赖

Public: 静态文件。其中 index.html 整个项目入口；manifest.json 缓冲文件。

src: 项目核心。其中 app.js 根组件；index.js 入口

5、在项目imoocmanager中安装路由包

注：在 第二章 中安装

D:\开发\React\imoocmanager>yarn add react-router
yarn add v1.12.3
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 9 new dependencies.
info Direct dependencies
├─ [email protected]
├─ [email protected]
└─ [email protected]
info All dependencies
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
Done in 106.29s.

使用 yarn 成功安装 路由后，在 package.json 包配置文件中 有项："react-router": "^4.3.1"。

如：移除路由包：yarn remove react-router

二、React组件生命周期

1、十个重要的API方法

.getDefaultPros 获取属性方法

.getInitialState 获取初始化状态方法

.componentWillMount 在组件加载、初始化前，调用此方法。项目中最常使用。

.render 渲染。项目中必有。

.componentDitMount 在组件抛入完成后，调用此方法

.componentWillReceiveMount 在父组件传递属性，调用此方法

.shouldComponentUpdate 组件更新

.componentWillUpdate 组件更新之前

.componentDidUpdate 组件更新之后

.componentWillUnmount 组件销毁

2、组件生命周期

左边列是单个组件，右边列是父子组件。

3、启动项目

yarn start

第二章 项目主页工程搭建 P5

启用代理

打开 VS Code (关闭已打开的文件夹)

[终端]－新建终端

终端命令行：创建项目 imoocmanager

cd D:\开发\React

create-react-app imoocmanager

cd D:\开发\React\imoocmanager

打开项目：在VS Code中

文件－打开文件夹

选择：D:\开发\React\imoocmanager

立即暴露配置：因此时未修改项目，否则，会因修改版本问题引起报错(yarn锁定了修改版本)

终端命令行：yarn eject

显示出：文件夹 ./config(？没有webpack.config.dev.js)，配置文件 ./package.json 中更多行。此命令会将脚手架中隐藏的配置都展示出来，此过程不可逆。

react集成webpack4和antd(按需加载，支持配置主题) 文件夹：

项目文件夹
├── config:                         执行 yarn eject后，暴露出“配置”
├── node_modules:                   模块文件夹
|   └── ...             
├── dist:                           打包生成目录
├── public:                         开发服务运行时的文件根目录(dll也生成在此文件夹)
├── src:                            开发目录
|   ├── components:                 公共组件
|   ├── routes:                     项目view
|   |   ├── 404:                    404页面
|   |   ├── Loading:                react-loadable按需加载的loading页面
|   ├── assets:                     静态文件
|   ├── utils:                      工具文件包
|   |   ├── request:                封装的request请求(支持请求自动加入等待状态)
|   └── index.js:                   入口文件
|   └── App.js:                     路由文件
|   └── global.js:                  全局js
├── index.ejs                       模板文件
├── postcss.config.js               postcss配置文件
├── .babelrc                        babel配置文件
├── .eslintrc.json                  eslint
├── .gitignore                      git忽略文件
├── package.json                    项目依赖 npm
├── README.MD                       项目信息
├── webpack.config.js               webpack配置文件
└── webpack.dll.config.js           dll分离公共库

一、基础插件安装，LESS文件加载和配置

1、安装React-Router，Axios

必须安装React-router路由和Axios二个基础插件。react-router v4.0 是react-router-dom（含html渲染）。同时安装axios和less-loader

终端命令行：yarn add react-router-dom axios less-loader

2、安装AntD

本项目基于阿里组件

3、配置支持Less

参照：https://juejin.im/post/5c3d67066fb9a049f06a8323

暴露webpack配置

此命令会将脚手架中隐藏的配置都展示出来，此过程不可逆。

D:\开发\React>yarn eject

修改 配置文件webpack.config.js

打开 config 目录下的 webpack.config.js 文件，找到 // style files regexes 注释位置，在下面添加两行代码

// 添加 less 解析规则
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

找到 rules 属性配置，在其中添加 less 解析配置

// Less 解析配置
{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
        },
        'less-loader'
    ),
    sideEffects: true,
},
{
    test: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: true,
            getLocalIdent: getCSSModuleLocalIdent,
        },
        'less-loader'
    ),
},

4、安装Less-loader

阿里组件AntD基于Less开发区的，需要暴露webpack配置，加载Less

使用代理，否则无法完成

终端命令行：yarn add less-loader

5、修改Less-loader

Less不生效，可能要配合AntD？，须将Less版本定为2.7.3

终端命令行：yarn add less@^2.7.3

6、安装阿里插件 antD

yarn add antd

2019-03的版本为3.15.0，注意：3.0 之后引入 antd.js 前你需要自行引入 moment。（yarn add moment）

7、安装按需加载插件

yarn add babel-plugin-import