近日突然想用React開(kāi)發(fā)個(gè)小東西膝捞。至于為什么用React就為它的小優(yōu)點(diǎn)：速度快：在UI渲染過(guò)程中，React通過(guò)在虛擬DOM中的微操作來(lái)實(shí)現(xiàn)對(duì)實(shí)際DOM的局部更新。
由于好久沒(méi)寫(xiě)了蔬咬，還是打算重新發(fā)點(diǎn)東西鲤遥，鞏固自身的同時(shí)幫助他人。
廢話不多說(shuō)林艘，進(jìn)入主題盖奈，React從入門(mén)到···
今天將第一步，就講下創(chuàng)建項(xiàng)目和SCSS狐援、UI庫(kù)吧钢坦。
我個(gè)人使用的yarn，所以下面的都以yarn示例啥酱。你可以用npm爹凹。
本人NODE版本：16.10.0
// 安裝yarn
npm i -g corepack
yarn - v
1.22.19
一、安裝 create-react-app
create-react-app 腳手架官網(wǎng)
PS：Create React App requires Node 14 or higher.（Create React App 需要 Node 14 或更高版本镶殷。）
npm install -g create-react-app
// -----------------------------------------------
create-react-app -v
Please specify the project directory:
create-react-app <project-directory>
For example:
create-react-app my-react-app
Run create-react-app --help to see all options.
二禾酱、創(chuàng)建項(xiàng)目
yarn create react-app react-ts-doc --template typescript
// 經(jīng)過(guò)漫長(zhǎng)的等待
cd .\react-ts-doc\
yarn start
Compiled successfully!
You can now view portable-system in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.18.156:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
三、添加開(kāi)發(fā)基礎(chǔ)所需依賴(lài)包(個(gè)人使用scss)
npm install node-sass --save
四绘趋、開(kāi)發(fā)怎么能少的UI庫(kù)呢颤陶，安裝 Ant Design of React
// 1. 安裝Ant Design of React https://2x.ant.design/docs/react/introduce-cn
npm install antd
// 2. 修改 src/App.scss 在文件頂部引入 antd/dist/antd.css
@import '~antd/dist/antd.css';
五、按需引入
上面的例子實(shí)際上加載了全部的 antd 組件的樣式（對(duì)前端性能是個(gè)隱患）陷遮。
此時(shí)我們需要對(duì) create-react-app 的默認(rèn)配置進(jìn)行自定義滓走，這里我們使用 react-app-rewired （一個(gè)對(duì) create-react-app 進(jìn)行自定義配置的社區(qū)解決方案）。
引入 react-app-rewired 并修改 package.json 里的啟動(dòng)配置帽馋。
npm install react-app-rewired --save-dev
npm install babel-plugin-import --save-dev
npm install customize-cra --save-dev
npm i less
npm i -D less-loader
/* 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 --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
}
然后在項(xiàng)目根目錄創(chuàng)建一個(gè) config-overrides.js 用于修改默認(rèn)配置搅方。
const {
override,
fixBabelImports,
} = require("customize-cra");
module.exports = override(
fixBabelImports("import", {
libraryName: "antd", libraryDirectory: "es", style: 'css' // change importing css to less
}),
);
修改 App.tsx
import React from 'react';
import { Button } from 'antd';
import './App.scss';
function App() {
return (
<div className="App">
<header className="App-header">
<Button type="primary">進(jìn)入homePage</Button> <br />
<Button type="primary">進(jìn)入aboutPage</Button>
</header>
</div>
);
}
export default App;
啟動(dòng)yarn start
繼續(xù)學(xué)習(xí)點(diǎn)擊：React18(函數(shù)式開(kāi)發(fā))+Ts入門(mén)開(kāi)發(fā)(二)路由配置以及路由的基礎(chǔ)使用
