Comment configurer l'environnement de développement de React ? Étapes de configuration de l'environnement de développement React+webpack (résultats)

Cet article parle principalement des résultats finaux des étapes de configuration de l'environnement de développement de react+webpack. Regardons ensemble cet article

Étape de configuration (1) : Comment configurer l'environnement de développement pour React ? Étapes de configuration de l'environnement de développement React+webpack (avec exemples de configuration)

Étapes de configuration (2) : Comment configurer l'environnement de développement pour React ? Étapes de configuration de l'environnement de développement React+webpack (en profondeur)

Ici, nous expliquerons d'abord les raisons et les pratiques de chaque étape. L'étape de configuration (4) expliquera comment créer rapidement un webpack et partager l'intégralité du package du projet sur git.

Répertoire
4. Configuration de React
1. Composant React
2. Module de routeur React
3. Coopération de React et Redux

---

Dans l'article précédent, nous avons expliqué comment configurer l'ensemble de l'environnement webpack. Il y aura un article plus tard sur la façon de créer rapidement un webpack.

1. Composant React

Installez d'abord les modules React et React-Dom à l'aide de node.js :

npm install react react-dom --save

dans webpack.dll. config Ajoutez la troisième bibliothèque React-dom

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

au tableau des fournisseurs dans .js. Tapez la commande suivante dans la fenêtre Powershell pour empaqueter la bibliothèque tierce dans une DLL.

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

Une fois la commande terminée, manifest.json et supplier.xxxx.js seront mis à jour. À ce stade, vous devez actualiser manuellement le fichier supplier.xxxx.js introduit dans le modèle HTML.

Modifiez le contenu dans app.js et ajoutez l'instruction de rendu de réaction :

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]);

//Ce qui suit est le code de réaction

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;));

Tapez PowerShell Démarrez le serveur avec npm start et tapez localhost:8080 sur le navigateur pour afficher le contenu de cette page Web.

2. Module de routeur React

Installez d'abord le module correspondant : react-router-dom, commande :

npm install react-router-dom --save

Ce module est également requis Ajoutez la troisième bibliothèque React-dom au tableau des fournisseurs dans webpack.dll.config.js

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

Tapez la commande suivante dans la fenêtre Powershell pour empaqueter la bibliothèque tierce dans la DLL.

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

Une fois la commande terminée, manifest.json et supplier.xxxx.js seront mis à jour. À ce stade, vous devez actualiser manuellement le fichier supplier.xxxx.js introduit dans le modèle HTML.

Modifiez le contenu dans 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;));

Il existe maintenant deux versions de router, utilisez React-Router ou React-Router-dom. React-router-dom est utilisé ici. Ce module dispose de plusieurs interfaces : NavLink, Route, BrowserRouter, HashRouter, Swith, Redirect, etc. Je n'expliquerai pas la fonction de chaque interface. RouteConfig est un fichier de configuration de routage, créé par vous-même.

Maintenant, nous devons créer quelques fichiers,

1) Créez un dossier Config dans le répertoire racine et créez Route.jsx dans le dossier.
Contenu de 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) Créez un dossier de composants dans le répertoire racine et créez deux fichiers sous le dossier :

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;

Une fois terminé, tapez npm start dans la fenêtre PowerShell, puis tapez localhost:8080 dans la barre d'adresse du navigateur et il apparaîtra . La page suivante :

Cliquez sur Passer au sujet, cela passera à la page du sujet :

De cette façon, le routeur Webpack React est simplement configuré.

3. React et Redux fonctionnent ensemble

Le module Redux peut gérer de manière centralisée l'état de tous les composants de React. Cette technologie est très couramment utilisée.

Installez le module Redux, commande :

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

Une fois le module installé, vous devez modifier le contenu des fournisseurs dans webpack.dll.config.js :

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

Dans le Fenêtre Powershell, Knock :

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

Les fichiers manifest.json et supplier.xxxxx.js seront à nouveau générés sous le chemin de construction, et les fichiers supplier.xxxxx.js correspondants seront introduits dans l'index. fichier de modèle html.

Pour utiliser Redux, vous devez d'abord comprendre ses principes de base. Je vais l'expliquer brièvement ici. Vous pouvez en apprendre davantage sur Baidu.

Redux est principalement divisé en trois parties, stockez l'action réductrice.
store est utilisé pour stocker l'état qui nécessite une gestion centralisée dans le composant ;
action définit une série de méthodes liées aux changements d'état (les méthodes sont également appelées créateurs d'action
reducer est une méthode d'initialisation de l'état) ; et appeler l'action Modifier l'état de l'état et renvoyer le nouvel état.
La manière dont ces trois éléments sont liés les uns aux autres sera mentionnée dans les étapes suivantes.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!