Wie konfiguriere ich die Reaktionsentwicklungsumgebung? Konfigurationsschritte für die React + Webpack-Entwicklungsumgebung (Ergebnisse)

In diesem Artikel geht es hauptsächlich um die Endergebnisse der Entwicklungsumgebungskonfigurationsschritte von react+webpack. Schauen wir uns gemeinsam diesen Artikel an

Konfigurationsschritt (1): Wie konfiguriere ich die Entwicklungsumgebung für React? Konfigurationsschritte für die React+Webpack-Entwicklungsumgebung (mit Konfigurationsbeispielen)

Konfigurationsschritte (2): Wie konfiguriere ich die Entwicklungsumgebung für React? Schritte zur Konfiguration der React+Webpack-Entwicklungsumgebung (ausführlich)

Hier erklären wir zunächst die Gründe und Vorgehensweisen für jeden Schritt. In Konfigurationsschritt (4) geht es darum, wie man schnell ein Webpack erstellt und das gesamte Projektpaket für Git freigibt.

Verzeichnis
1. React-Router-Modul


Im vorherigen Artikel haben wir erklärt, wie man die gesamte Webpack-Umgebung konfiguriert. Später wird es einen Artikel darüber geben, wie man schnell ein Webpack erstellt.

---

1. React-Komponente

Installieren Sie zunächst die React- und React-Dom-Module mit node.js:

npm install react react-dom --save

in webpack.dll.config. js Fügen Sie die dritte React-Dom-Bibliothek

const vendors = [  
  'react',  "react-dom"];

zum Vendors-Array hinzu. Geben Sie den folgenden Befehl in das Powershell-Fenster ein, um die Drittanbieter-Bibliothek in eine DLL zu packen.

webpack -p --config webpack.dll.config.js --progress --profile --colors

Nach Abschluss des Befehls werden manifest.json und seller.xxxx.js aktualisiert. Zu diesem Zeitpunkt müssen Sie die in der HTML-Vorlage eingeführte Datei Vendor.xxxx.js manuell aktualisieren.

Ändern Sie den Inhalt in app.js und fügen Sie die Rendering-Anweisung von Reactdom hinzu:

require('./css/css');require('./less/less.less');require('./scss/scss.scss');var app=document.createElement("p");
app.innerHTML=&#39;<h1>Hello World!</h1>&#39;;document.body.insertBefore(app,document.body.childNodes[0]);

//Das Folgende ist der Reaktionscode

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(&#39;root&#39;));

Geben Sie npm start in Powershell ein, um zu starten Geben Sie auf dem Server „localhost:8080“ im Browser ein, um den Inhalt dieser Webseite anzuzeigen.

2. React-Router-Modul

Installieren Sie zunächst das entsprechende Modul: React-Router-Dom, Befehl:

npm install react-router-dom --save

Dieses Modul muss auch sein hinzugefügt, um die dritte React-Dom-Bibliothek

const vendors = [  
  'react',  "react-dom"];

zum Vendors-Array in webpack.dll.config.js hinzuzufügen. Geben Sie den folgenden Befehl in das Powershell-Fenster ein, um die Drittanbieter-Bibliothek in die DLL zu packen.

webpack -p --config webpack.dll.config.js --progress --profile --colors

Nach Abschluss des Befehls werden manifest.json und seller.xxxx.js aktualisiert. Zu diesem Zeitpunkt müssen Sie die in der HTML-Vorlage eingeführte Datei Vendor.xxxx.js manuell aktualisieren.

Ändern Sie den Inhalt in 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(&#39;root&#39;));

Es gibt jetzt zwei Versionen des Routers: React-Router oder React-Router-Dom. Hier wird React-Router-Dom verwendet. Dieses Modul verfügt über mehrere Schnittstellen: NavLink, Route, BrowserRouter, HashRouter, Swith, Redirect usw. Ich werde nicht die Funktion jeder Schnittstelle erklären. RouteConfig ist eine von Ihnen selbst erstellte Routing-Konfigurationsdatei.

Jetzt müssen wir ein paar Dateien erstellen,

1) Erstellen Sie einen Config-Ordner im Stammverzeichnis und erstellen Sie Route.jsx im Ordner.

Inhalt von 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) Erstellen Sie einen Komponentenordner im Stammverzeichnis und erstellen Sie zwei Dateien unter dem Ordner:
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;

Geben Sie nach Abschluss npm start in das Powershell-Fenster ein und geben Sie dann localhost:8080 in die Adressleiste des Browsers ein. Die folgende Seite wird angezeigt:

Klicken Sie auf „Zum Thema springen“ und es wird zur Themenseite gesprungen:

Auf diese Weise wird der Webpack React Router einfach konfiguriert.

3. React und Redux arbeiten zusammen

Das Redux-Modul kann den Zustand aller React-Komponenten zentral verwalten. Installieren Sie das Redux-Modul, Befehl:

 npm install redux react-redux react-router-redux redux-thunk --save

Nachdem das Modul installiert wurde, müssen Sie den Inhalt der Anbieter in webpack.dll.config.js ändern:

const vendors = [  'react',  "react-dom",  "react-router-dom",  "redux",  "react-redux",  "react-router-redux",  "redux-thunk"];

Geben Sie im Powershell-Fenster Folgendes ein :

webpack -p --config webpack.dll.config.js --progress --profile --colors

Die Dateien manifest.json und Vendor.xxxxx.js werden erneut im Build-Pfad generiert und die entsprechenden Vendor.xxxxx.js-Dateien werden in die Vorlagendatei index.html eingefügt.

Um Redux zu verwenden, müssen Sie zunächst die Grundprinzipien verstehen. Ich werde es hier kurz erklären. Mehr darüber erfahren Sie auf Baidu.

Redux besteht hauptsächlich aus drei Teilen: der Store-Reducer-Aktion.

store wird verwendet, um den Zustand zu speichern, der eine zentrale Verwaltung in der Komponente erfordert;

action definiert eine Reihe von Methoden, die sich auf Zustandsänderungen beziehen (Methoden werden auch Aktionsersteller genannt);
reducer ist eine Methode zum Initialisieren des Zustands und Aufrufen einer Aktion. Ändern Sie den Status des Status und geben Sie den neuen Status zurück.
Wie diese drei miteinander zusammenhängen, wird in den folgenden Schritten erwähnt.

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(&#39;root&#39;));

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使用手册栏目中学习），有问题的可以在下方留言提问。

Das obige ist der detaillierte Inhalt vonWie konfiguriere ich die Reaktionsentwicklungsumgebung? Konfigurationsschritte für die React + Webpack-Entwicklungsumgebung (Ergebnisse). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!