react脚手架使用（基于create-react-app2.0+antd）

安装和初始化

在命令行中安装 create-react-app 工具(版本：2.1.1)

$ npm install -g create-react-app

然后新建一个项目。

$ create-react-app react-demo

然后我们进入项目并启动。

$ cd react-demo
$ yarn start

此时浏览器会自动访问 http://localhost:3000/，你会看到一个 react 的欢迎界面，如下：代表你的项目已经正常运行了

image.png

这是 create-react-app 生成的默认目录结构。很凌乱也找不到 webpack 的配置项。

image.png

添加自定义配置，修改项目结构

显示webpack 配置文件

npm run eject
注意：这是单向操作。有一次eject，你不能回去！

sass 的配置

npm install node-sass -D

安装路由组件

React-router4使用教程

添加数据管理

添加UI组件-antd

npm 安装并引入 antd

$ npm install antd -S

全部引用

import Button from 'antd/lib/button';
import 'antd/dist/antd.css';
**加载了全部的 antd 组件的样式

按需加载
1.引入 react-app-rewired 并修改 package.json 里的启动配置。

$ npm install react-app-rewired --save-dev

/*修改package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

2.使用 babel-plugin-import
babel-plugin-import是一个用于按需加载组件代码和样式的 babel 插件，现在我们尝试安装它并修改 config-overrides.js 文件。

$ npm install babel-plugin-import --save-dev

+ const { injectBabelPlugin } = require('react-app-rewired');

  module.exports = function override(config, env) {
+   config = injectBabelPlugin(
+     ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
+     config,
+   );
    return config;
  };

3.并且按下面的格式引入模块

import { Button } from 'antd';

添加网络请求组件

初始化浏览器样式

**问题解决
1.使用create-react-app的项目在build后显示一片空白？
create-react-app脚手架默认是根路径,可以在node_modules中找到react-scripts/config/paths.js，在文件中的45行'/'改为'./'，或者直接在package.json里加"homepage":"./"