Create React App是FaceBook的React團隊官方出的一個構(gòu)建React單頁面應(yīng)用的腳手架工具。它本身集成了Webpack囚痴,并配置了一系列內(nèi)置的loader和默認的npm的腳本,是用React 創(chuàng)建新的單頁面應(yīng)用的最佳方式。
安裝React
第一種方法
- 全局安裝react腳手架
npm install -g create-react-app // 等待其安裝
- 新建React項目
create-react-app my-app
cd my-app
npm start
第二種方法
- 應(yīng)用npm5.2+ 附帶的package運行工具 npx 創(chuàng)建
你需要在你的機器上安裝 Node >= 8.10 和 npm >= 5.6
npx create-react-app my-app
cd my-app
npm start
如果你先全局安裝了
npm install -g create-react-app
在應(yīng)用npx create-react-app my-app
,創(chuàng)建出來的應(yīng)用肯能會缺少很多內(nèi)容,如script 相關(guān)等等蟋定,這時可以先卸載、刪除 create-react-app草添,npm uninstall -g create-react-app
,在直接從來一遍第一種方法或是第二種方法驶兜,如果你不確定當前版本是否最新,也可以如上远寸。如果卸載的不干凈促王,可以刪除文件,如下:
which create-react-app
->/usr/local/bin/create-react-app
rm -rf /usr/local/bin/create-react-app
antd 按需加載
- 用create-react-app創(chuàng)建項目后,如果需要第三方的插件庫而晒,需要配置webpack配置文件,步驟如下:
1阅畴、運行npm run eject暴露出webpack的配置文件倡怎,項目會添加config和scripts文件夾。
2、安裝完antd和babel-plugin-import后监署,修改根目錄下的package.json babel處颤专,在persets后面添加
{
"plugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // `style: true` 會加載 less 文件
}]
]
}
- 安裝antd
cnpm i antd -S
- 安裝babel-plugin-import
cnpm i babel-plugin-import -D
3、運行npm start钠乏,在文件中按需引入antd組件
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { DatePicker } from 'antd';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<br/>
<DatePicker />
</header>
</div>
);
}
export default App;