腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

淺談react+es6+webpack的基礎(chǔ)配置

更新時(shí)間：2017年08月09日 08:26:33 投稿：jingxian

下面小編就為大家?guī)硪黄獪\談react+es6+webpack的基礎(chǔ)配置。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

這是模塊化開發(fā)、主流框架和最新版的ECMAScript語法規(guī)范的一個(gè)小demo

準(zhǔn)備工作

安裝 nodeJs

首先進(jìn)入node官網(wǎng)，去下載最新版的nodeJs

webpack

安裝webpack

npm install webpack -g

參數(shù)-g表示全局安裝webpack，你在cmd命令中哪個(gè)文件夾下都可以使用webpack的命令，如果不加-g的話，是只可以在你安裝webpack的目錄下使用webpack這個(gè)命令

webpack 也有一個(gè) web 服務(wù)器

npm install webpack-dev-server -g

-g道理同上

配置webpack

1、先確認(rèn)一下項(xiàng)目的目錄結(jié)構(gòu)

|-app
 |--component
  |---component.js
 |--app.js
|-build
 |--css
 |--img
 |--js
 |--index.html
|-webpack.config.js

2、配置webpack.config.js

在使用webpack的時(shí)候，需要?jiǎng)?chuàng)建一個(gè)名為 webpack.config.js 的配置文件，這個(gè)文件在安裝webpack的時(shí)候，是不會(huì)自動(dòng)創(chuàng)建的，是需要手動(dòng)創(chuàng)建，文件的位置要放在當(dāng)前安裝webpack根目錄下

var path = require('path');

 module.exports = {
   entry: path.resolve(__dirname, './app/app.js'),
   output: {
     path: path.resolve(__dirname, './build'),
     filename: 'js/build.js'
   },
   module: {
     loaders: [{
       test: /\.js|.jsx?$/,
       exclude: /node_modules/,
       loader: 'babel-loader',
       query: {
         presets: ['es2015', 'react']
       }
     }]
   }
 }

這是一個(gè)簡(jiǎn)單的webpack的配置，首先先引用了path對(duì)象。

entry是一個(gè)入口文件，在這個(gè)文件中的所有內(nèi)容，會(huì)被打包到output指定目錄的指定文件當(dāng)中。

path.resolve是一個(gè)來格式化路徑的方法，path.resolve的方法參數(shù)有兩個(gè)path.resolve(from，to)，from這里的__dirname是為了獲取當(dāng)前模塊文件所在的目錄，to這里的./app/app.js是一個(gè)相對(duì)路徑，ouput是出口，ouput中的path和entry的方法同理，這里不做贅述。

filename是指向一個(gè)指定文件，入口打包的所有文件，最后代碼都會(huì)在這個(gè)出口文件中看到。

module中添加的loaders這個(gè)數(shù)組，里面的對(duì)象是用來轉(zhuǎn)換模塊的，現(xiàn)在這里只添加了一個(gè)js的模塊，用來轉(zhuǎn)換es6語法和react

這個(gè)時(shí)候，還需要安裝一個(gè) babel-loader

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

3、修改html文件

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <title>React + Webpack + es6</title>
 </head>
 <body>
   <div id="aaa"></div>
   <script src="js/build.js"></script>
 </body>
 </html>

修改完 index.html 后，開始編寫js:

在 app.js 中，添加 alert('hello world')

然后在cmd命令行中，運(yùn)行 webpack ，打包完成后打開 index.html ，會(huì)彈出一個(gè)系統(tǒng)彈窗，"hello world"。

這個(gè)時(shí)候證實(shí)了，我們的配置是正確的，可以正常運(yùn)行。

react

安裝react

首先，還是和上面一樣，需要安裝對(duì)應(yīng)的插件

npm install react react-dom --save-dev

安裝完成后，打開component.js，修改為:

import React from 'react';

export class Component extends React.Component {
  render() {
    return ( < div > hello world < /div>)
  }
}

打開 app.js ，修改為:

import React from 'react';
import {Component} from './component/component.js';
import {render} from 'react-dom';

render(<Component />,document.querySelector('#aaa'));

import是es6中的一個(gè)新方法，是用來加載模塊的，上面的 import 是用來加載React的, export 定義了對(duì)外接口，這里要注意，加載模塊定義的名稱和類的名稱首字母必須大寫，如果不大寫，會(huì)報(bào)錯(cuò)。

運(yùn)行 webpack ，這個(gè)時(shí)候就完成了一個(gè)簡(jiǎn)單的 webpack + react + es6 的模塊化開發(fā)，可以直接雙擊打開 index.html 查看演示，也可以運(yùn)行 webpack-dev-server 打開本地服務(wù)器，瀏覽器打開 http://localhost:8080/build/index.html 查看演示

React組件生命周期

1、getDefaultProps

作用于組件類，只調(diào)用一次，返回對(duì)象用于設(shè)置默認(rèn)的props，對(duì)于引用值，會(huì)在實(shí)例中共享。

2、getInitialState

作用于組件的實(shí)例，在實(shí)例創(chuàng)建時(shí)調(diào)用一次，用于初始化每個(gè)實(shí)例的state，此時(shí)可以訪問this.props。(es6不支持)

3、componentWillMount

在完成首次渲染之前調(diào)用，此時(shí)仍可以修改組件的state。

4、render

必選的方法，創(chuàng)建虛擬DOM，該方法具有特殊的規(guī)則：

　　1）只能通過this.props和this.state訪問數(shù)據(jù)

　　2）可以返回null、false或任何React組件

　　3）只能出現(xiàn)一個(gè)頂級(jí)組件（不能返回?cái)?shù)組）

　　4）不能改變組件的狀態(tài) 5、不能修改DOM的輸出

5、componentDidMount

真實(shí)的DOM被渲染出來后調(diào)用，在該方法中可通過this.getDOMNode()訪問到真實(shí)的DOM元素。此時(shí)已可以使用其他類庫來操作這個(gè)DOM。

在服務(wù)端中，該方法不會(huì)被調(diào)用。

6、componentWillReceiveProps

組件接收到新的props時(shí)調(diào)用，并將其作為參數(shù)nextProps使用，此時(shí)可以更改組件props及state。

7、shouldComponentUpdate

組件是否應(yīng)當(dāng)渲染新的props或state，返回false表示跳過后續(xù)的生命周期方法，通常不需要使用以避免出現(xiàn)bug。在出現(xiàn)應(yīng)用的瓶頸時(shí)，可通過該方法進(jìn)行適當(dāng)?shù)膬?yōu)化。

在首次渲染期間或者調(diào)用了forceUpdate方法后，該方法不會(huì)被調(diào)用

8、componentWillUpdate

接收到新的props或者state后，進(jìn)行渲染之前調(diào)用，此時(shí)不允許更新props或state。

9、componentDidUpdate

完成渲染新的props或者state后調(diào)用，此時(shí)可以訪問到新的DOM元素。

10、componentWillUnmount

組件被移除之前被調(diào)用，可以用于做一些清理工作，在componentDidMount方法中添加的所有任務(wù)都需要在該方法中撤銷，比如創(chuàng)建的定時(shí)器或添加的事件監(jiān)聽器。

React調(diào)試（ React Developer Tools ）

如果直接在瀏覽器調(diào)試的話，我們只能在Element中看到渲染后的DOM分層結(jié)構(gòu)，如果想看到React組件的分層結(jié)構(gòu)，就會(huì)需要到一個(gè)調(diào)試工具，因?yàn)楸救吮容^喜歡使用chrome瀏覽器進(jìn)行調(diào)試，所以這里暫時(shí)只拿chrome瀏覽器來舉例。

1、擴(kuò)展程序商店下載（推薦）

首先，要保證你的瀏覽器是可以訪問谷歌擴(kuò)展程序商店,接著我們?cè)谏痰曛兴阉?React Developer Tools，然后就會(huì)出現(xiàn)一個(gè)擴(kuò)展程序，擴(kuò)展程序商店下載的，直接啟用就好。

2、網(wǎng)上安裝包下載

如果是網(wǎng)上下載的安裝包，就找一下包里面會(huì)有一個(gè).crx文件擴(kuò)展名的文件，拖放到擴(kuò)展程序中即可。

個(gè)人說明

上述所有內(nèi)容都是本人的個(gè)人理解，如果出現(xiàn)不正確的地方，請(qǐng)及時(shí)評(píng)論方便做出修改

以上這篇淺談react+es6+webpack的基礎(chǔ)配置就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: