安裝和初始化
在命令行中安裝 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":"./"
