react如何配置開發環境？ React+webpack 的開發環境設定步驟（結果篇）
- 寻∝梦原創
- 2018-09-11 11:12:112145瀏覽
本篇文章主要講述了關於react webpack的開發環境設定步驟最後結果篇。下面讓我們一起來看這篇文章吧
設定步驟（一）：React如何設定開發環境？ React webpack開發環境設定步驟（附設定實例）
設定步驟（二）: react如何設定開發環境？ React webpack 的開發環境設定步驟（深入篇）
這裡先講每一步的原因和做法。設定步驟（四）會講怎麼快速搭建webpack，同時會把整個專案套件分享到git上。
目錄
四、React 設定
1. React 元件
2. React router 模組
3. React 與Redux 搭配
#在前面的文章已經講解怎麼配置了整個webpack環境。後面會有一篇文章講怎麼快速搭建webpack。
1. React 元件
先用node.js安裝react 和react-dom 模組:
npm install react react-dom --save
在webpack.dll.config.js裡面的vendors 陣列裡面加入react-dom 第三函式庫
const vendors = [ 'react', "react-dom"];
在Powershell 視窗裡面敲下面指令，把第三方函式庫打包到dll裡面。
webpack -p --config webpack.dll.config.js --progress --profile --colors
指令完成後，會更新manifest.json 和vendor.xxxx.js。這時需要手動刷新html 模板裡面引進的vendor.xxxx.js檔。
修改app.js裡面的內容,加入reactdom 的渲染語句:
require('./css/css');require('./less/less.less');require('./scss/scss.scss');var app=document.createElement("p");
app.innerHTML='<h1>Hello World!</h1>';document.body.insertBefore(app,document.body.childNodes[0]);//下面的是react的程式碼
import React from 'react';
import ReactDOM from 'react-dom';class FirstComponent extends React.Component{
render(){ return(
<p> this is React code from Components.
</p>
);
}
}
var p=document.createElement("p");p.setAttribute("id","root");
document.body.insertBefore(p,document.body.childNodes[1]);
ReactDOM.render(<FirstComponent/>,document.getElementById('root'));在powershell裡面敲npm start 啟動伺服器，在瀏覽器上敲localhost:8080 就可以顯示這個網頁的內容。
2.React router 模組
先安裝對應的模組：react-router-dom,指令：
npm install react-router-dom --save
這個模組同樣需要加入到webpack.dll.config.js 裡面的vendors 陣列裡面加入react-dom 第三函式庫
const vendors = [ 'react', "react-dom"];
在Powershell 視窗裡面敲下面指令，把第三方函式庫打包到dll裡面。
webpack -p --config webpack.dll.config.js --progress --profile --colors
指令完成後，會更新manifest.json 和vendor.xxxx.js。這時需要手動刷新html 模板裡面引進的vendor.xxxx.js檔。
修改app.js裡面的內容:
import React from 'react';import ReactDOM from 'react-dom';import {NavLink,Route,BrowserRouter,HashRouter as Router, Swith,Redirect} from 'react-router-dom';import RouteConfig from '../Config/Route.jsx';var p=document.createElement("p");
p.setAttribute("id","root");document.body.insertBefore(p,document.body.childNodes[1]);
ReactDOM.render(
<Router>
{RouteConfig}
</Router>
,document.getElementById('root'));現在的router 有兩個版本，用react-router 或react-router-dom 。這裡用react-router-dom，這個模組有幾個介面：NavLink 、Route 、BrowserRouter、HashRouter、Swith、Redirect 等 。每個介面的作用我這不做說明。 RouteConfig 是路由配置文件，自己創建的。
現在需要建立幾個文件，
1） 在根目錄建立Config資料夾，資料夾裡面建立Route.jsx。
Route.jsx 的內容：
import React from 'react';
import ReactDOM from 'react-dom';
import {NavLink,Route,BrowserRouter as Router,HashRouter,Switch,Redirect} from 'react-router-dom';
import MainComponent from '../component/Main.jsx';//引进组件import Topic from '../component/Topic.jsx';//引进组件const routes =[
{
path:'/',
exact:true,
component: MainComponent
},
{
path:'/topic',
exact:false,
component:Topic
},
];const RouteConfig = (
<Switch>
{
routes.map((route,index)=>(
<Route
key ={index}
path={route.path}
exact={route.exact}
component={route.component}
/>
))
}
</Switch>
);
export default RouteConfig;2）在根目錄下建立component 資料夾，資料夾下建立兩個檔案：
Main.jsx:
import React from 'react';import ReactDOM from 'react-dom';import {NavLink as Link} from 'react-router-dom';class MainComponent extends React.Component{
render(){ return(
<p>
<h1>mainText</h1>
<Link to="/topic">jumpe to Topic</Link>
</p>
);
}
}
export default MainComponent;Topic.jsx
import React from 'react';import ReactDOM from 'react-dom';import {NavLink as Link} from 'react-router-dom';class Topic extends React.Component{
render(){ return(
<p>
<h1>topicText:</h1>
<Link to="/">jumpe to Main</Link>
</p>
);
}
}
export default Topic;建完後，在powershell視窗下敲npm start,然後在瀏覽器網址列敲localhost:8080 就後出現下面頁面: 
點擊jumpe to Topic ,就會跳到topic 頁面：
這樣webpack react router 就這樣簡單的設定好了。
3.React 和Redux 搭配
Redux 模組可以集中管理 react全部元件的state，這個技巧很常用。
安裝Redux模組，指令：
npm install redux react-redux react-router-redux redux-thunk --save
模組安裝好後，在需要在webpack.dll.config.js 裡面修改vendors的內容：
const vendors = [ 'react', "react-dom", "react-router-dom", "redux", "react-redux", "react-router-redux", "redux-thunk"];
在Powershell 視窗下，敲：
webpack -p --config webpack.dll.config.js --progress --profile --colors
在build 路徑下會再次產生manifest.json 和vendor.xxxxx.js文件，把對應的vendor.xxxxx.js檔案引入index.html範本檔案中。
要使用redux，需要先理解它的基本原理，這裡我簡單的說下，具體的可以百度了解下。
redux 主要分為三塊，store reducer action。
store 用來儲存component裡面需要集中管理的state;
action 是定義與state狀態改變相關的一系列方法(方法也稱為action creator);
reducer 初始化state及呼叫action的方法修改state的狀態，傳回新state。
這三者之間的用什麼相互關聯的，下面步驟講解裡面會有提及。
store 一般会采用自动创建的方法。react组件可以通过函数直接上传给store，上传代码是直接写在组件里面，不需要添加一个组件就修改一次store的代码。
store 的中间件用来实现异步调用，这里用ReduxThunk。这个中间件的优缺点，暂时不涉及。
在src 目录下创建一个Config 文件夹，在Config 里面新建一个Store.jsx。
Store.jsx 的代码：
import {createStore,combineReducers,applyMiddleware} from 'redux';
import RootReducer from '../Reducer/index.jsx';//引入reduceimport ReduxThunk from 'redux-thunk';//中间件var store = createStore( //自动生成store的函数
RootReducer, //reduce,修改state状态的函数集合
applyMiddleware(ReduxThunk) //中间件);
export default store;RootReducer是自己定义的reduce文件。createStore applyMiddleware 来自redux 模块。 ReduxThunk 来自于redux-thunk。
store 和 reducer 是通过createStore 关联起来的。
action
在src下面创建一个action文件夹，action文件夹下新建一个action.jsx文件。
action代码：
const actions = {
changeText:function(num){
console.log("调用actions"); switch(num){ case 1: return {type:'AlterMain',payload:"mainContainer had been changed"}; case 2: return {type:'AlterTopic',payload:"topicContainer had been changed"}; default: return action;
}
},
};
export default actions;预先规划设定state格式为：
const defaultState = { //在reducer 里面定义state的初始的值
mainText:”mainContainer”,
topicText:”topicContainer”
};
action这里定义了一个修改state状态的函数。当reducer调用action时，action就会通过不同的情况返回不同的action值。
reducer：
在src文件夹下面创建一个Reducer文件夹，文件夹下面新建一个index.jsx文件。
reducer的代码：
import {combineReducers} from 'redux';import {routerReducer} from 'react-router-redux';const defaultState = {//设定state的默认值
mainText:"mainContainer",
topicText:"topicContainer"};const reducer = (state = defaultState, action) => {
switch (action.type) {//通过action的返回值来选择更新哪个state的状态
case 'AlterMain': return Object.assign({},state,{ mainText:action.payload}); case 'AlterTopic': return Object.assign({},state,{ topicText:action.payload}); default: return state;
}
};const RootReducer = combineReducers({//可以定义多个reducer，然后通过combineReducers来合并
routing:routerReducer,//redux和router处理函数
app:reducer //app 需要与组件里面上传的state一致});
export default RootReducer;reducer 只看到 通过action返回值来修改state的状态并没有看到调用action。
在调试移动端显示的时候，发现object.assign 存在兼容问题，在网上查了下资料，需要额外添加下面这段代码：
if (typeof Object.assign != 'function') { // Must be writable: true, enumerable: false, configurable: true
Object.defineProperty(Object, "assign", {
value: function assign(target, varArgs) { // .length of function is 2 'use strict'; if (target == null) { // TypeError if undefined or null
throw new TypeError('Cannot convert undefined or null to object');
} var to = Object(target); for (var index = 1; index < arguments.length; index++) { var nextSource = arguments[index]; if (nextSource != null) { // Skip over if undefined or null
for (var nextKey in nextSource) { // Avoid bugs when hasOwnProperty is shadowed
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
to[nextKey] = nextSource[nextKey];
}
}
}
} return to;
},
writable: true,
configurable: true
});
}组件的定义：
修改component文件夹下的Main.jsx（想看更多就到PHP中文网React参考手册栏目中学习）
import React from 'react';import ReactDOM from 'react-dom';import {NavLink as Link} from 'react-router-dom';import {connect} from 'react-redux';import P from 'prop-types';import actions from '../src/action/action.jsx';//引入actions//mapstoreStateToProps 这里指定Main控件需要上传的stateconst mapStoreStateToProps = (state) =>(
{
mainText:state.app.mainText, //mainText是变量，值对应的state.app.mainText的存储空间，其中app与reducers里面定义的一致。
}
);//mapDispatchToProps 这里上传处理state函数，即action里面定义的函数const mapDispatchToProps = (dispatch,ownProps)=> ({
fn:{
changeText:(num)=> dispatch(actions.changeText(num))
}
});//这样state一致上传到store，需要取值用props取就okclass MainComponent extends React.Component{
render(){ return(
<p>
<h1>mainText:{this.props.mainText}</h1>
<button onClick={()=>this.props.fn.changeText(1)}>修改mainText的值</button>
<Link to="/topic">jumpe to Topic</Link>
</p>
);
}
}//最后调用connect函数，把组件和store连接起来export default connect(mapStoreStateToProps,mapDispatchToProps)(MainComponent);connect 函数能成功执行的前提是 组件是provider的子组件。所有需要修改app.js 。
app.js 代码：
import React from 'react';import ReactDOM from 'react-dom';import {NavLink,Route,BrowserRouter,HashRouter as Router, Swith,Redirect} from 'react-router-dom';import RouteConfig from '../src/Config/Route.jsx';import {Provider} from 'react-redux';import store from '../src/Config/Store.jsx';var p=document.createElement("p");
p.setAttribute("id","root");document.body.insertBefore(p,document.body.childNodes[0]);
ReactDOM.render(
<Provider store={store}> //Provider 并指定store的文件
<Router>
{RouteConfig}
</Router>
</Provider>
,document.getElementById('root'));Topic.jsx的代码：
import React from 'react';import ReactDOM from 'react-dom';import {NavLink as Link} from 'react-router-dom';import {connect} from 'react-redux';import actions from '../src/action/action.jsx';const mapStoreStateToProps = (state) =>(
{ topicText:state.app.topicText,
}
)const mapDispatchToProps = (dispatch,ownProps)=> ({ fn:{ changeText:(num)=> dispatch(actions.changeText(num))
}
});class Topic extends React.Component{
render(){ return(
<p>
<h1>topicText:{this.props.topicText}</h1>
<button onClick={()=>this.props.fn.changeText(2)}>修改topicText的值</button>
<Link to="/">jumpe to Main</Link>
</p>
);
}
}export default connect(mapStoreStateToProps,mapDispatchToProps)(Topic);这样整个redux就搭建好了。
provider 指定 store文件，它下面的组件可以通过connect 把组件和store关联。
store：通过createStore 把 store和reducer 关联
reducer： 定义state的默认值，并定义state 和action的对应关系。combineReducers 合并reducer，指定reducer的接口，如果用到router时，要注意定义route的处理函数。
action：只是单独定义一些修改state状态的操作。
组件：通过connect 把需要集中管理的state即state对应的action 上传到store，并绑定组件。state的值被修改，组件的view就会做相应的改变
这里没有涉及到redux的异步通信。
流程可以简化理解为：
组件->action->dispath(action)->store->reducer ->store(修改state)->组件（view）
网页的整体效果如下：
用http://localhost:8080 就能看到下面的界面：
点击修改mainText的值 的按钮，mainText就会被更改如下： 
点击jumpe to Topic
点击 修改topicText的值 的按钮，topicText就会被更改如下：
本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。
以上是react如何配置開發環境？ React+webpack 的開發環境設定步驟（結果篇）的詳細內容。更多資訊請關注PHP中文網其他相關文章！