반응 개발 환경을 구성하는 방법은 무엇입니까? React+webpack 개발 환경 구성 단계(결과)

이 글에서는 주로 react+webpack의 개발 환경 구성 단계의 최종 결과에 대해 설명합니다. 이 글을 함께 읽어보시죠

구성 단계 (1): React 개발 환경은 어떻게 구성하나요? React+webpack 개발 환경 구성 단계(구성 예시 포함)

구성 단계(2): React를 위한 개발 환경 구성 방법 ? React+webpack 개발 환경 구성 단계(심층 기사)

여기서 먼저 각 단계의 이유와 사례를 설명하겠습니다. 구성 단계 (4)에서는 웹팩을 빠르게 빌드하고 전체 프로젝트 패키지를 git에 공유하는 방법에 대해 설명합니다.

Directory
4. React 구성
1. React 라우터 모듈
3. 🎜#

이전 글에서는 전체 웹팩 환경을 구성하는 방법에 대해 이미 설명했습니다. 나중에 웹팩을 빠르게 빌드하는 방법에 대한 기사가 있을 것입니다.

---

1. React 컴포넌트

먼저 node.js를 사용하여 반응 및 반응 돔 모듈을 설치합니다.

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

명령이 완료되면 매니페스트.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 '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;));

powershell npm start inside를 입력하여 서버를 시작하고, 브라우저에 localhost:8080을 입력하여 이 웹 페이지의 내용을 표시합니다.

2.React 라우터 모듈

먼저 해당 모듈을 설치합니다: 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

명령이 완료되면 매니페스트.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(&#39;root&#39;));

현재 라우터에는 두 가지 버전이 있습니다. 반응 라우터 또는 반응 라우터 돔을 사용합니다. 여기에서는 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) 루트 디렉터리에 구성 요소 폴더를 만들고 폴더 아래에 두 개의 파일을 만듭니다.
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을 입력하면 나타납니다. . 다음 페이지:

주제로 이동을 클릭하면 주제 페이지로 이동합니다:

이렇게 웹팩이 반응하면 라우터는 이렇게 간단하게 구성됩니다.

3. React와 Redux는 함께 작동합니다.

Redux 모듈은 모든 React 구성 요소의 상태를 중앙에서 관리할 수 있습니다. 이 기술은 매우 일반적으로 사용됩니다. . Redux 모듈을 설치합니다. 명령:

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

모듈이 설치된 후 webpack.dll.config.js에서 공급업체의 콘텐츠를 수정해야 합니다.

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

Manifest.json 및 Vendor.xxxxx.js 파일이 빌드 경로 아래에 다시 생성되고 해당 Vendor.xxxxx.js 파일이 색인에 도입됩니다. html 템플릿 파일.

redux를 사용하려면 먼저 기본 원리를 이해해야 합니다. 여기에서 자세한 내용을 Baidu에서 알아볼 수 있습니다.

redux는 크게 Store Reducer Action의 세 부분으로 나누어집니다.

store는 구성 요소에서 중앙 집중식 관리가 필요한 상태를 저장하는 데 사용됩니다.

action은 상태 변경과 관련된 일련의 메서드를 정의하는 것입니다(메서드는 액션 생성자라고도 함). 상태 및 호출 작업 메서드는 상태의 상태를 수정하고 새 상태를 반환합니다.

이 세 가지가 어떻게 서로 관련되어 있는지는 다음 단계에서 언급하겠습니다.

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

위 내용은 반응 개발 환경을 구성하는 방법은 무엇입니까? React+webpack 개발 환경 구성 단계(결과)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!