需要安裝有較新版本的node,下面直接開始。
- 腳手架工具
create-react-app
npm install -g create-react-app
create-react-app react-web-demo
cd react-web-demo
yarn start
複製程式碼命令如上，然後開啟 http://localhost:3000/檢視app，可以看到
-
開啟自定義配置
yarn eject在create-react-app react-web-demo命令之後，官方提供了4個命令。 分別是yarn start: 啟動服務並在瀏覽器中檢視。yarn build:build 應用程式，可以部署釋出。yanr eject: 開啟自定義配置。 使用IDE開啟專案目錄，結構不做太多說明， 如下：yarn eject開啟自定義，不可逆。 可以看到多了script和config目錄。 -
新增
less支援 首先安裝開發所需模組
npm install --save-dev less
npm install --save-dev less-loader
複製程式碼接著在config/webpack.config.dev.js做如下修改：
{
// modify
test: [/\.css$/, /\.less$/],
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
//add
{
loader: require.resolve('less-loader'), // compiles Less to CSS
}
],
},
複製程式碼在config/webpack.config.prod.js做如下修改：
{
// modify
test: /\.(css|less)$/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
},
},
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
{
//add
loader: require.resolve('less-loader'),
}
],
},
extractTextPluginOptions
)
),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
複製程式碼下面測試是否新增成功。 在src目錄下新建component資料夾放置子元件，index.js和index.less作為根元件。
//index.js
import React from 'react'
import './index.less'
const Home = () => {
return(
<div className='Home'>
<div>react demo</div>
<div>react demo</div>
<div>react demo</div>
</div>
);
}
export default Home
複製程式碼//index.less
.Home {
background: beige;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
}
複製程式碼修改App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css'
import Home from './component/index'
class App extends Component {
render() {
return (
<div className="App">
<Home />
</div>
);
}
}
export default App;
複製程式碼開啟瀏覽器，可以看到如下圖，說明配置成功。
- 使用antd開發，並新增按需載入配置。
npm install --save antd
npm install babel-plugin-import --save-dev
複製程式碼修改檔案如下：
//webpack.config.dev.js
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
//add
plugins: [["import", { "libraryName": "antd", "style": true }]]
},
},
複製程式碼//webpack.config.prod.js
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
compact: true,
plugins: [["import", { "libraryName": "antd", "style": true }]]
},
},
複製程式碼測試是否配置成功。
修改index.js檔案如下：
import React from 'react'
import './index.less'
import {Button} from 'antd'
const Home = () => {
return(
<div className='Home'>
<Button type="primary">Button</Button>
<Button type="primary">Button</Button>
<Button type="primary">Button</Button>
</div>
);
}
export default Home
複製程式碼看瀏覽器介面如下則配置成功。
最後執行npm run-script build生成app，按照提示 http://localhost:5000/ 檢視瀏覽器顯示結果是否一樣，一樣則配置成功。
注意：這一步瀏覽器可能會有快取，build之後建議清除瀏覽器快取再檢視
配置結束，關於mobx的使用，可參考另一篇文章。
接上次所說，另外一篇文章是關於RN + mobx， 部分內容可能不合適，今天作為補充。
redux 和 mobx
過多的內容這裡不做敘述，請看下面連結(可以知道是什麼和為什麼，很短) 如何理解 Facebook 的 flux 應用架構？ 理解 React，但不理解 Redux，該如何通俗易懂的理解 Redux？ MobX vs Redux: Comparing the Opposing Paradigms - React Conf 2017 紀要
（對於redux，請參看Redux 入門教程（三）：React-Redux 的用法）
mobx + mobx-react
npm install mobx
npm install mobx-react
複製程式碼此時可以使用mobx開發，接下來配置啟用decorators裝飾器。
yarn add babel-plugin-transform-decorators-legacy -D
複製程式碼並在package.json檔案中修改如下配置：
"babel": {
"plugins": [
"transform-decorators-legacy"
],
"presets": [
"react-app"
]
},
複製程式碼這是可以用方便易懂的裝飾器進行開發。修改檔案如下：
//component/index.js
const Home = observer( () => {
return (
<div className='Home'>
<div>{startNum.startNum}</div>
<div>{startNum.startNum}</div>
<div className="buttons">
<Button type="primary" className="btn" onClick={() => {
startNum.inc()
}}>inc</Button>
<Button type="primary" className="btn" onClick={() => {
startNum.dec()
}}>dec</Button>
<Button type="primary" className="btn" onClick={() => startNum.reset()}>reset</Button>
</div>
</div>
);
} )
export default Home
複製程式碼//component/index.less
.Home {
margin-top: 100px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
.buttons {
display: flex;
flex-direction: row;
margin-top: 20px;
.btn {
margin: 0 10px;
}
}
}
複製程式碼在src目錄新建mobx/index.js檔案，作為最基本的store資料來源。
class DemoStore {
@observable startNum = 10
@action
inc() { this.startNum += 1 }
@action
dec() { this.startNum -= 1}
@action
reset() { this.startNum = 0 }
}
export default new DemoStore()
複製程式碼yarn start後開啟瀏覽器，看到下圖並且可以操作，配置成功。
關於mobx的其他用法可以檢視官方文件。 隨著專案變大，如何對mobx的store進行組合，也是我目前在研究的問題。