安装和初始化
在命令行中安装 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
安装路由组件
添加数据管理
添加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":"./"
