create-react-app全家桶router?mobx全局安裝配置
正文
create-react-app 是一個(gè)搭建 react 項(xiàng)目的腳手架，該腳手架很好用，文檔功能也很全，是上手 react 項(xiàng)目的不二首選，下面我們就來(lái)講講 reacte-react-app 創(chuàng)建的項(xiàng)目如何配置UI組件以及數(shù)據(jù)流
ceacte-react-app 初始化項(xiàng)目
全局安裝 create-react-app
npm install -g create-react-app
or
yarn -g create-react-app
新建一個(gè)項(xiàng)目
create-react-app react-demo
工具會(huì)幫你初始化一個(gè)簡(jiǎn)單基本的項(xiàng)目并且會(huì)自動(dòng)幫你安裝項(xiàng)目所需要的各種依賴，如果中途出現(xiàn)網(wǎng)絡(luò)問(wèn)題導(dǎo)致依賴安裝不上，這時(shí)你可能需要配置代理或者設(shè)置其他的 npm 源。關(guān)于 npm 源鏡像有很多選擇，比如淘寶鏡像等，這里不多做說(shuō)明，網(wǎng)上有很多。
進(jìn)入項(xiàng)目并啟動(dòng)
cd react-demo npm start
or
yarn start
此時(shí)瀏覽器會(huì)自動(dòng)訪問(wèn) http://localhost:3000/，你會(huì)看到一個(gè) react 的歡迎界面，如下：代表你的項(xiàng)目已經(jīng)正常運(yùn)行了
但是：這仍然不夠，這時(shí)你用代碼編輯器打開(kāi)項(xiàng)目會(huì)發(fā)現(xiàn)項(xiàng)目結(jié)構(gòu)其實(shí)是這樣的：
react-demo/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
找不到 webpack 的配置項(xiàng)，此時(shí)你需要展開(kāi) (eject) 項(xiàng)目，這個(gè)一個(gè)不可逆過(guò)程，一旦你執(zhí)行了，就不能回到初始化
npm run eject
再看項(xiàng)目結(jié)構(gòu)，就會(huì)多了一些其他目錄，如下：
react-demo/
README.md
config/
jest/
env.js
paths.js
polyfills.js
webpack.config.dev.js
webpack.config.prod.js
webpackDevServer.config.js
node_modules/
package.json
public/
index.html
favicon.ico
scripts/
build.js
start.js
test.js
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
registerServiceWorker.js
展開(kāi) config 目錄，里面就有 webpack 配置文件，還有一些環(huán)境、兼容、測(cè)試等的配置。而 scripts 目錄里主要就是測(cè)試、啟動(dòng)、打包的腳本，這里不做過(guò)多描述，(其實(shí)筆者也沒(méi)認(rèn)真看過(guò)里面的代碼)，如果要詳細(xì)研究，create-react-app 的官方文檔有詳細(xì)的講解。
好了，現(xiàn)在 react 項(xiàng)目已經(jīng)跑起來(lái)了，也找到 webpack 配置，可以做一些自定義的配置，接下來(lái)我們就講一將，如何配置數(shù)據(jù)流以及UI庫(kù)。
sass 的配置
安裝 loader 依賴
npm install resolve-url-loader sass-loader node-sass --save
修改 webpack配置文件
找到 webpack.config.dev.js 與 webpack.config.prod.js 文件，后綴 dev 表示開(kāi)發(fā)的配置，prod 表示是生產(chǎn)環(huán)境的配置，因此兩個(gè)配置文件都需要修改。
- 修改webpack.config.dev.js在 module 的 rules 字段中添加以下代碼
{
test: /\.scss$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'), // translates CSS into CommonJS
options: {
sourceMap: true,
importLoaders: 3,
},
},
require.resolve('resolve-url-loader'), // resolves relative paths in url() statements based on the original source file
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
flexbox: 'no-2009',
}),
],
},
},
{
loader: require.resolve('sass-loader'), // compiles Sass to CSS,
options: {
includePaths: [`${paths.appNodeModules}/normalize-scss/sass`],
},
},
],
},
這時(shí)修改 .css 樣式文件為 .scss 并用 sass 語(yǔ)法修改樣式，會(huì)發(fā)現(xiàn)頁(yè)面生效了，別忘了修改在組件中引用樣式的后綴。
當(dāng)然，這只是修改了開(kāi)發(fā)環(huán)境的配置，還需要修改生產(chǎn)環(huán)境
- 修改webpack.config.prod.js同樣在 rules 字段中添加以下代碼
{
test : /\.scss$/,
use : ExtractTextPlugin.extract(
Object.assign(
{
fallback: require.resolve('style-loader'),
use: [
{
loader: require.resolve('css-loader'), // translates CSS into CommonJS
options: {
sourceMap : true,
minimize : true,
importLoaders : 3,
},
},
require.resolve('resolve-url-loader'), // resolves relative paths in url() statements based on the original source file
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
flexbox: 'no-2009',
}),
],
},
},
{
loader: require.resolve('sass-loader'), // compiles Sass to CSS,
options: {
includePaths: [`${paths.appNodeModules}/normalize-scss/sass`],
},
},
]
},
extractTextPluginOptions
)
),
},
引入U(xiǎn)I庫(kù)
筆者使用的是螞蟻金服的 antd UI組件庫(kù)，文檔全，使用簡(jiǎn)單，組件也能滿足基本的需求。官方文檔也有具體的相關(guān)配置說(shuō)明。
安裝組件
npm install antd --save
or
yarn add antd
按需加載
使用 babel-plugin-import
npm install babel-plugin-import --save
修改 webpack 文件
在 rules 中的 babel 規(guī)則中的 options 中添加以下代碼
plugins: [
['import', { libraryName: 'antd', style: true }],
],
引入樣式
使用 less 加載
npm install less@2.7.2 less-loader --save
注意： less 版本不能高于 3.0.0 至于為什么官方issue
修改 webpack 文件
{
test: /\.less$/,
use: [
require.resolve('style-loader'),
require.resolve('css-loader'),
{
loader: require.resolve('less-loader'),
options: {
modifyVars: { '@primary-color': '#1890ff' },
},
},
],
},
其中 @primary-color 表示主題色，官方也有推薦配置主題色的說(shuō)明。
在頁(yè)面中使用組件
import { Button } from 'antd';
...
<div>
<Button type="primary">button</Button>
</div>
...
此時(shí)頁(yè)面上就會(huì)顯示 Button 組件
配置 eslint
為了是代碼保持統(tǒng)一風(fēng)格，可以使用工具 eslit 來(lái)檢查代碼的規(guī)范性。筆者是使用 airbnb 的代碼風(fēng)格，當(dāng)然你也可以自定義屬于自己的code-style。
安裝需要的包
npm install eslint-config-airbnb --save
注意：
也許使用 create-react-app 初始化出來(lái)的項(xiàng)目，配置 eslint 以及安裝了各種 eslint 依賴，這時(shí)啟動(dòng)項(xiàng)目發(fā)現(xiàn)報(bào)以下錯(cuò)誤，那么你可能需要更改包的版本，筆者也是嘗試了多次才成功的。
eslint.png
引入配置
在項(xiàng)目的根目錄下創(chuàng)建 .eslintrc 文件
{
"env": {
"browser": true,
"jest": true,
"es6": true,
"node": true
},
"parser": "babel-eslint",
"plugins": [
"react",
"import"
],
"extends": "airbnb",
"rules": {}
}
其中 rules 可以覆蓋 airbnb 的規(guī)則，關(guān)于如何編寫(xiě) eslint 規(guī)則可以查詢 eslint 官方文檔
也可以在根目錄下創(chuàng)建 .eslintignore 來(lái)對(duì)某些文件不做 eslint 校驗(yàn)
commit 代碼時(shí)使用 eslint 檢查
安裝依賴
npm install lint-staged husky --save
修改 package.json 文件
"scripts": {
"precommit": "lint-staged",
"start": "react-scripts start",
"build": "react-scripts build",
...
"lint-staged": {
"src/**/*.{js,jsx}": [
"eslint --fix",
"git add"
]
}
引入路由系統(tǒng)
設(shè)置文件別名
現(xiàn)在，我們需要更改 src 目錄的文件結(jié)構(gòu)，以便于更符合實(shí)際項(xiàng)目場(chǎng)景，我們可能需要 components 文件夾來(lái)存放組件，routes 文件夾來(lái)存放頁(yè)面，styles 文件夾來(lái)存放樣式，utils 文件夾來(lái)存放工具類函數(shù)等。
既然有了文件夾來(lái)區(qū)分不同的功能，為了方便文件的相互，我們可以利用 webpack 來(lái)設(shè)置別名。
- 修改 config 文件夾下的 paths 文件
module.exports = {
...
appSrc: resolveApp('src'),
appStyles: resolveApp('src/styles'),
appRoutes: resolveApp('src/routes'),
appComponents: resolveApp('src/components'),
appUtils: resolveApp('src/utils'),
...
- 修改 webpack 配置項(xiàng) alias
alias: {
styles: paths.appStyles,
routes: paths.appRoutes,
components: paths.appComponents,
utils: paths.appUtils,
...
安裝路由組件 react-router
npm install react-router react-router-dom --save
- 在 routes 文件夾中新建 index.jsx 頁(yè)面，以及新建兩個(gè)頁(yè)面組件分別是 home.jsx 和 about.jsxindex.jsx
import React from 'react'
import { Route, Redirect } from 'react-router'
import { HashRouter, Switch } from 'react-router-dom'
import Home from 'routes/home'
import About from 'routes/about'
const Routes = () => (
<HashRouter>
<div>
<Route exact path="/" render={() => <Redirect to="/home" />} />
<Switch>
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
</Switch>
</div>
</HashRouter>
)
const App = () => (
<Routes />
)
export default App
about.jsx
import React from 'react'
import { Link } from 'react-router-dom'
const About = () => (
<div>
<p>this is about page</p>
<Link to="/home">goto Home</Link>
</div>
)
export default About
home.jsx
import React from 'react'
import { Link } from 'react-router-dom'
const Home = () => (
<div>
<p>this is home page</p>
<Link to="/about">goto About</Link>
</div>
)
export default Home
- 修改 src 文件夾下的 index
import React from 'react'
import ReactDOM from 'react-dom'
import App from 'routes/index'
import registerServiceWorker from './registerServiceWorker'
ReactDOM.render(<App />, document.getElementById('root'))
添加數(shù)據(jù)管理
react 本身就有自己的狀態(tài)管理 state，但隨著項(xiàng)目的復(fù)雜性頁(yè)面的增多其維護(hù)性不是那么友好，于是出現(xiàn)了針對(duì) react 的數(shù)據(jù)狀態(tài)管理，如 flux、redux、mobx 等等。下面我們就講解項(xiàng)目如何配置 mobx。
安裝依賴
npm install mobx mobx-react --save
修改文件
- 新建文件夾 stores在 src 目錄下新建一個(gè)文件夾 stores，創(chuàng)建 index.js 文件
const store = {}
export default store
- 修改 webpack 文件
在 webpack 文件中設(shè)置別名，方面引用，當(dāng)然別忘了修改 paths 文件來(lái)設(shè)置路徑
alias: {
styles: paths.appStyles,
routes: paths.appRoutes,
components: paths.appComponents,
stores: appStores,
...
- 修改入口文件
修改 routes 下的 index.js
...
import { Provider } from 'mobx-react'
import stores from 'stores'
...
const App = () => (
<Provider {...stores}>
<Routes />
</Provider>
)
...
開(kāi)始使用
使用 mobx 你還需要安裝 babel 的裝飾器插件，以及修改 babel 的配置
npm install babel-plugin-transform-decorators-legacy --save
修改 package.json 文件中的 babel 參數(shù)，或者在根目錄下新建一個(gè) .babelrc 文件
"babel": {
"presets": [
"react-app"
],
"plugins": [
"babel-plugin-transform-decorators-legacy"
]
...
現(xiàn)在，你可以在你的組件中使用 mobx 來(lái)管理你的狀態(tài)了。
關(guān)于 mobx 的使用，你可以訪問(wèn)官方文檔
添加 mobx 開(kāi)發(fā)工具
- 安裝依賴
npm install mobx-react-devtools
- 修改入口文件 routes 下的 index.js
...
import DevTools from 'mobx-react-devtools'
....
const App = () => (
<Fragment>
<Provider {...stores}>
<Routes />
</Provider>
<DevTools />
</Fragment>
)
當(dāng)然，你也可以設(shè)置環(huán)境變量，只在開(kāi)發(fā)中打開(kāi)該工具
{
process.env.NODE_ENV === 'development' ? (
<DevTools />
) : null
}
總結(jié)
create-react-app 腳手架其實(shí)已經(jīng)很完美了，一些列的打包編譯優(yōu)化也做了，使用 create-react-app 初始化的項(xiàng)目，只需要根據(jù)業(yè)務(wù)定制化的配置一些東西，這些都不難，網(wǎng)上有很多類似的案例，主要還是心細(xì)，多去專研。
最后，附上本次項(xiàng)目的完整代碼
以上就是create-react-app全家桶router mobx全局安裝配置的詳細(xì)內(nèi)容，更多關(guān)于create-react-app安裝配置router mobx的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
React前端渲染優(yōu)化--父組件導(dǎo)致子組件重復(fù)渲染的問(wèn)題
本篇文章是針對(duì)父組件導(dǎo)致子組件重復(fù)渲染的優(yōu)化方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
React中使用react-player 播放視頻或直播的方法
這篇文章主要介紹了React中使用react-player 播放視頻或直播，本文教大家如何使用react框架及創(chuàng)建實(shí)例的代碼,本文內(nèi)容簡(jiǎn)短給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-01-01
本篇文章主要介紹了React高階組件入門(mén)介紹，這篇文章中我們?cè)敿?xì)的介紹了什么是高階組件，如何使用高階組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了一文詳解React?Redux使用方法，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容戒殺，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
react之umi配置國(guó)際化語(yǔ)言locale的踩坑記錄
這篇文章主要介紹了react之umi配置國(guó)際化語(yǔ)言locale的踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
React?Hooks項(xiàng)目實(shí)戰(zhàn)
React?Hooks是React?16.8版本引入的新特性,它使得在函數(shù)組件中也能夠使用狀態(tài)（state）和其他React特性,本文就來(lái)詳細(xì)介紹一下React?Hooks項(xiàng)目實(shí)戰(zhàn),感興趣的可以了解一下2023-11-11
react創(chuàng)建項(xiàng)目啟動(dòng)報(bào)錯(cuò)的完美解決方法
這篇文章主要介紹了react創(chuàng)建項(xiàng)目啟動(dòng)報(bào)錯(cuò)的完美解決方法,全稱為Node Package Manager，是隨同NodeJS一起安裝的包管理工具，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
React學(xué)習(xí)筆記之高階組件應(yīng)用
這篇文章主要介紹了React 高階組件應(yīng)用，詳細(xì)的介紹了什么是React高階組件和具體使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
React組件的創(chuàng)建與state同步異步詳解
這篇文章主要介紹了react組件實(shí)例屬性state,有狀態(tài)state的組件稱作復(fù)雜組件,沒(méi)有狀態(tài)的組件稱為簡(jiǎn)單組件，狀態(tài)里存儲(chǔ)數(shù)據(jù),數(shù)據(jù)的改變驅(qū)動(dòng)頁(yè)面的展示，本文結(jié)合實(shí)例代碼給大家詳細(xì)講解，需要的朋友可以參考下2023-03-03
react實(shí)現(xiàn)路由動(dòng)畫(huà)跳轉(zhuǎn)功能
這篇文章主要介紹了react路由動(dòng)畫(huà)跳轉(zhuǎn)功能,大概思路是下載第三方庫(kù)?引用,創(chuàng)建css文件引用,想要實(shí)現(xiàn)跳轉(zhuǎn)動(dòng)畫(huà)功能,就在那個(gè)組件的根節(jié)點(diǎn)綁定classname屬性即可,在跳轉(zhuǎn)的時(shí)候即可實(shí)現(xiàn),需要的朋友可以參考下2023-10-10