ホームページ > ウェブフロントエンド > jsチュートリアル > React開発環境を構成するにはどうすればよいですか? React+webpack 開発環境の構成手順 (結果)

React開発環境を構成するにはどうすればよいですか? React+webpack 開発環境の構成手順 (結果)

寻∝梦
リリース: 2018-09-11 11:12:11
オリジナル
2170 人が閲覧しました

この記事では主に react+webpack の開発環境設定手順の最終結果について説明します。この記事を一緒に見てみましょう

設定手順(1):Reactの開発環境を設定するにはどうすればよいですか? React+webpack 開発環境の設定手順 (設定例付き)

設定手順 (2): React の開発環境を設定するにはどうすればよいですか? React+webpack 開発環境の構成手順 (詳細記事)

ここでは、まず各手順の理由と実践方法を説明します。構成ステップ (4) では、Webpack を迅速に構築し、プロジェクト パッケージ全体を git に共有する方法について説明します。

ディレクトリ
4. Reactの設定
1. Reactコンポーネント
2. ReactとReduxの連携


前回の記事では、Webpack環境全体の設定方法を説明しました。 Webpack をすばやくビルドする方法については、後ほど記事で紹介します。

1. Reactコンポーネント

まずnode.jsを使用してreactモジュールとreact-domモジュールをインストールします:

npm install react react-dom --save
ログイン後にコピー

webpack.dll.config.jsのベンダー配列にreact-domの3番目のライブラリを追加します

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=&#39;<h1>Hello World!</h1>&#39;;document.body.insertBefore(app,document.body.childNodes[0]);
ログイン後にコピー

//以下は反応コードです

​​

import React from &#39;react&#39;;
import ReactDOM from &#39;react-dom&#39;;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;));
ログイン後にコピー

powershell で npm start と入力してサーバーを起動し、ブラウザで localhost:8080 と入力して表示しますこのページの内容。

2. Reactルーターモジュール

まず、対応するモジュールをインストールします:react-router-dom、コマンド:

npm install react-router-dom --save
ログイン後にコピー

このモジュールもwebpack.dll.config.jsのベンダー配列に追加し、reactを追加する必要があります-dom 3 番目のライブラリ

const vendors = [  
  &#39;react&#39;,  "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 &#39;react&#39;;import ReactDOM from &#39;react-dom&#39;;import {NavLink,Route,BrowserRouter,HashRouter as Router, Swith,Redirect} from &#39;react-router-dom&#39;;import RouteConfig from &#39;../Config/Route.jsx&#39;;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;));
ログイン後にコピー

ルーターには現在 2 つのバージョンがあり、react-router または reverse-router-dom を使用します。ここでは React-router-dom が使用されています。このモジュールには、NavLink、Route、BrowserRouter、HashRouter、Swith、Redirect などのいくつかのインターフェイスがあります。各インターフェースの機能については説明しません。 RouteConfig は、自分で作成したルーティング設定ファイルです。

次に、いくつかのファイルを作成する必要があります。

1) ルートディレクトリに Config フォルダーを作成し、そのフォルダー内に Route.jsx を作成します。
Route.jsx の内容:

import React from &#39;react&#39;;
import ReactDOM from &#39;react-dom&#39;;
import {NavLink,Route,BrowserRouter as Router,HashRouter,Switch,Redirect}  from &#39;react-router-dom&#39;;

import MainComponent from &#39;../component/Main.jsx&#39;;//引进组件import Topic from &#39;../component/Topic.jsx&#39;;//引进组件const routes =[
    {
        path:&#39;/&#39;,
        exact:true,
        component: MainComponent
    },
    {
        path:&#39;/topic&#39;,
        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) ルート ディレクトリにコンポーネント フォルダーを作成し、そのフォルダーの下に 2 つのファイルを作成します:

Main.jsx:

import React from &#39;react&#39;;import ReactDOM from &#39;react-dom&#39;;import {NavLink as Link} from &#39;react-router-dom&#39;;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 &#39;react&#39;;import ReactDOM from &#39;react-dom&#39;;import {NavLink as Link} from &#39;react-router-dom&#39;;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」と入力します。 次のページが表示されます:


React開発環境を構成するにはどうすればよいですか? React+webpack 開発環境の構成手順 (結果)

「トピックにジャンプ」をクリックします。トピックページにジャンプします:


React開発環境を構成するにはどうすればよいですか? React+webpack 開発環境の構成手順 (結果)

このようにして、webpack 反応ルーターは簡単に設定されます。

3. React と Redux は連携します

Redux モジュールは、すべての React コンポーネントの状態を集中管理できます。このテクノロジーは非常によく使用されます。

Redux モジュールをインストールします。コマンド:

 npm install redux react-redux react-router-redux redux-thunk --save
ログイン後にコピー

モジュールがインストールされたら、webpack.dll.config.js のベンダーのコンテンツを変更する必要があります:

const vendors = [  &#39;react&#39;,  "react-dom",  "react-router-dom",  "redux",  "react-redux",  "react-router-redux",  "redux-thunk"];
ログイン後にコピー

Powershell ウィンドウで、次のように入力します:

webpack -p --config webpack.dll.config.js --progress --profile --colors
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

ビルド パスのmanifest.jsonおよびvendor.xxxxx.jsファイルの下に再度、対応するvendor.xxxxx.jsファイルをindex.htmlテンプレート ファイルに導入します。

redux を使用するには、まずその基本原理を理解する必要があります。ここで簡単に説明します。詳しくは、Baidu でご覧ください。

Redux は主に 3 つの部分、ストア リデューサー アクションに分かれています。
store はコンポーネント内で集中管理が必要な状態を保存するために使用されます。
action は状態の変更に関連する一連のメソッドを定義します (メソッドはアクション クリエーターとも呼ばれます)。
reducer は状態を初期化し、状態を変更するためのアクション メソッドを呼び出します。状態を取得し、新しい状態を返します。
これら 3 つの相互関係については、次の手順で説明します。

store 一般会采用自动创建的方法。react组件可以通过函数直接上传给store,上传代码是直接写在组件里面,不需要添加一个组件就修改一次store的代码。
store 的中间件用来实现异步调用,这里用ReduxThunk。这个中间件的优缺点,暂时不涉及。
在src 目录下创建一个Config 文件夹,在Config 里面新建一个Store.jsx。
Store.jsx 的代码:

import {createStore,combineReducers,applyMiddleware} from &#39;redux&#39;;
import RootReducer from &#39;../Reducer/index.jsx&#39;;//引入reduceimport ReduxThunk from &#39;redux-thunk&#39;;//中间件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:&#39;AlterMain&#39;,payload:"mainContainer had been changed"};      case 2:       return {type:&#39;AlterTopic&#39;,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 &#39;redux&#39;;import {routerReducer} from &#39;react-router-redux&#39;;const defaultState = {//设定state的默认值
   mainText:"mainContainer",
   topicText:"topicContainer"};const reducer = (state = defaultState, action) => {     
    switch (action.type) {//通过action的返回值来选择更新哪个state的状态
        case &#39;AlterMain&#39;:            return  Object.assign({},state,{ mainText:action.payload});        case &#39;AlterTopic&#39;:            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 != &#39;function&#39;) {    // Must be writable: true, enumerable: false, configurable: true
    Object.defineProperty(Object, "assign", {
      value: function assign(target, varArgs) { // .length of function is 2        &#39;use strict&#39;;        if (target == null) { // TypeError if undefined or null
          throw new TypeError(&#39;Cannot convert undefined or null to object&#39;);
        }        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 &#39;react&#39;;import ReactDOM from &#39;react-dom&#39;;import {NavLink as Link} from &#39;react-router-dom&#39;;import {connect} from &#39;react-redux&#39;;import P from &#39;prop-types&#39;;import actions from &#39;../src/action/action.jsx&#39;;//引入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 &#39;react&#39;;import ReactDOM from &#39;react-dom&#39;;import {NavLink,Route,BrowserRouter,HashRouter as Router, Swith,Redirect} from &#39;react-router-dom&#39;;import RouteConfig from &#39;../src/Config/Route.jsx&#39;;import {Provider} from &#39;react-redux&#39;;import store from &#39;../src/Config/Store.jsx&#39;;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 &#39;react&#39;;import ReactDOM from &#39;react-dom&#39;;import {NavLink as Link} from &#39;react-router-dom&#39;;import {connect} from &#39;react-redux&#39;;import actions from &#39;../src/action/action.jsx&#39;;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 就能看到下面的界面:
React開発環境を構成するにはどうすればよいですか? React+webpack 開発環境の構成手順 (結果)

点击修改mainText的值 的按钮,mainText就会被更改如下:
React開発環境を構成するにはどうすればよいですか? React+webpack 開発環境の構成手順 (結果)点击jumpe to Topic
React開発環境を構成するにはどうすればよいですか? React+webpack 開発環境の構成手順 (結果)

点击 修改topicText的值 的按钮,topicText就会被更改如下:
React開発環境を構成するにはどうすればよいですか? React+webpack 開発環境の構成手順 (結果)

本篇文章到这就结束了(想看更多就到PHP中文网React使用手册栏目中学习),有问题的可以在下方留言提问。

以上がReact開発環境を構成するにはどうすればよいですか? React+webpack 開発環境の構成手順 (結果)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート