這是模塊化開(kāi)發(fā)、主流框架和最新版的ECMAScript語(yǔ)法規(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è)來(lái)格式化路徑的方法，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ì)象是用來(lái)轉(zhuǎn)換模塊的，現(xiàn)在這里只添加了一個(gè)js的模塊，用來(lái)轉(zhuǎn)換es6語(yǔ)法和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 后，開(kāi)始編寫(xiě)js:
在 app.js 中，添加 alert('hello world')
然后在cmd命令行中，運(yùn)行 webpack ，打包完成后打開(kāi) 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
安裝完成后，打開(kāi)component.js，修改為:
import React from 'react';export class Component extends React.Component { render() { return ( < div > hello world < /div>) }}打開(kāi) 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è)新方法，是用來(lái)加載模塊的，上面的 import 是用來(lái)加載React的, export 定義了對(duì)外接口，這里要注意，加載模塊定義的名稱和類的名稱首字母必須大寫(xiě)，如果不大寫(xiě)，會(huì)報(bào)錯(cuò)。
運(yùn)行 webpack ，這個(gè)時(shí)候就完成了一個(gè)簡(jiǎn)單的 webpack + react + es6 的模塊化開(kāi)發(fā)，可以直接雙擊打開(kāi) index.html 查看演示，也可以運(yùn)行 webpack-dev-server 打開(kāi)本地服務(wù)器，瀏覽器打開(kāi) 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í)可以訪問(wèn)this.props。(es6不支持)
3、componentWillMount
在完成首次渲染之前調(diào)用，此時(shí)仍可以修改組件的state。
4、render
必選的方法，創(chuàng)建虛擬DOM，該方法具有特殊的規(guī)則：
1）只能通過(guò)this.props和this.state訪問(wèn)數(shù)據(jù)
2）可以返回null、false或任何React組件
3）只能出現(xiàn)一個(gè)頂級(jí)組件（不能返回?cái)?shù)組）
4）不能改變組件的狀態(tài) 5、不能修改DOM的輸出
5、componentDidMount
真實(shí)的DOM被渲染出來(lái)后調(diào)用，在該方法中可通過(guò)this.getDOMNode()訪問(wèn)到真實(shí)的DOM元素。此時(shí)已可以使用其他類庫(kù)來(lái)操作這個(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表示跳過(guò)后續(xù)的生命周期方法，通常不需要使用以避免出現(xiàn)bug。在出現(xiàn)應(yīng)用的瓶頸時(shí)，可通過(guò)該方法進(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í)可以訪問(wèn)到新的DOM元素。
10、componentWillUnmount
組件被移除之前被調(diào)用，可以用于做一些清理工作，在componentDidMount方法中添加的所有任務(wù)都需要在該方法中撤銷，比如創(chuàng)建的定時(shí)器或添加的事件監(jiān)聽(tīng)器。
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瀏覽器來(lái)舉例。
1、擴(kuò)展程序商店下載（推薦）
首先，要保證你的瀏覽器是可以訪問(wèn)谷歌擴(kuò)展程序商店,接著我們?cè)谏痰曛兴阉?React Developer Tools，然后就會(huì)出現(xiàn)一個(gè)擴(kuò)展程序，擴(kuò)展程序商店下載的，直接啟用就好。
2、網(wǎng)上安裝包下載
如果是網(wǎng)上下載的安裝包，就找一下包里面會(huì)有一個(gè).crx文件擴(kuò)展名的文件，拖放到擴(kuò)展程序中即可。
個(gè)人說(shuō)明
上述所有內(nèi)容都是本人的個(gè)人理解，如果出現(xiàn)不正確的地方，請(qǐng)及時(shí)評(píng)論方便做出修改
以上這篇淺談react+es6+webpack的基礎(chǔ)配置就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
