溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這是模塊化開發、主流框架和最新版的ECMAScript語法規范的一個小demo
準備工作
安裝 nodeJs
首先進入node官網，去下載最新版的nodeJs
webpack
安裝webpack
npm install webpack -g
參數-g表示全局安裝webpack，你在cmd命令中哪個文件夾下都可以使用webpack的命令，如果不加-g的話，是只可以在你安裝webpack的目錄下使用webpack這個命令
webpack 也有一個 web 服務器
npm install webpack-dev-server -g
-g道理同上
配置webpack
1、先確認一下項目的目錄結構
|-app |--component |---component.js |--app.js |-build |--css |--img |--js |--index.html |-webpack.config.js
2、配置webpack.config.js
在使用webpack的時候，需要創建一個名為 webpack.config.js 的配置文件，這個文件在安裝webpack的時候，是不會自動創建的，是需要手動創建，文件的位置要放在當前安裝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']
}
}]
}
}
這是一個簡單的webpack的配置，首先先引用了path對象。
entry是一個入口文件，在這個文件中的所有內容，會被打包到output指定目錄的指定文件當中。
path.resolve是一個來格式化路徑的方法，path.resolve的方法參數有兩個path.resolve(from，to)，from這里的__dirname是為了獲取當前模塊文件所在的目錄，to這里的./app/app.js是一個相對路徑，ouput是出口，ouput中的path和entry的方法同理，這里不做贅述。
filename是指向一個指定文件，入口打包的所有文件，最后代碼都會在這個出口文件中看到。
module中添加的loaders這個數組，里面的對象是用來轉換模塊的，現在這里只添加了一個js的模塊，用來轉換es6語法和react
這個時候，還需要安裝一個 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命令行中，運行 webpack ，打包完成后打開 index.html ，會彈出一個系統彈窗，"hello world"。
這個時候證實了，我們的配置是正確的，可以正常運行。
react
安裝react
首先，還是和上面一樣，需要安裝對應的插件
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中的一個新方法，是用來加載模塊的，上面的 import 是用來加載React的, export 定義了對外接口，這里要注意，加載模塊定義的名稱和類的名稱首字母必須大寫，如果不大寫，會報錯。
運行 webpack ，這個時候就完成了一個簡單的 webpack + react + es6 的模塊化開發，可以直接雙擊打開 index.html 查看演示，也可以運行 webpack-dev-server 打開本地服務器，瀏覽器打開 http://localhost:8080/build/index.html 查看演示
React組件生命周期
1、getDefaultProps
作用于組件類，只調用一次，返回對象用于設置默認的props，對于引用值，會在實例中共享。
2、getInitialState
作用于組件的實例，在實例創建時調用一次，用于初始化每個實例的state，此時可以訪問this.props。(es6不支持)
3、componentWillMount
在完成首次渲染之前調用，此時仍可以修改組件的state。
4、render
必選的方法，創建虛擬DOM，該方法具有特殊的規則：
1）只能通過this.props和this.state訪問數據
2）可以返回null、false或任何React組件
3）只能出現一個頂級組件（不能返回數組）
4）不能改變組件的狀態 5、不能修改DOM的輸出
5、componentDidMount
真實的DOM被渲染出來后調用，在該方法中可通過this.getDOMNode()訪問到真實的DOM元素。此時已可以使用其他類庫來操作這個DOM。
在服務端中，該方法不會被調用。
6、componentWillReceiveProps
組件接收到新的props時調用，并將其作為參數nextProps使用，此時可以更改組件props及state。
7、shouldComponentUpdate
組件是否應當渲染新的props或state，返回false表示跳過后續的生命周期方法，通常不需要使用以避免出現bug。在出現應用的瓶頸時，可通過該方法進行適當的優化。
在首次渲染期間或者調用了forceUpdate方法后，該方法不會被調用
8、componentWillUpdate
接收到新的props或者state后，進行渲染之前調用，此時不允許更新props或state。
9、componentDidUpdate
完成渲染新的props或者state后調用，此時可以訪問到新的DOM元素。
10、componentWillUnmount
組件被移除之前被調用，可以用于做一些清理工作，在componentDidMount方法中添加的所有任務都需要在該方法中撤銷，比如創建的定時器或添加的事件監聽器。
React調試（ React Developer Tools ）
如果直接在瀏覽器調試的話，我們只能在Element中看到渲染后的DOM分層結構，如果想看到React組件的分層結構，就會需要到一個調試工具，因為本人比較喜歡使用chrome瀏覽器進行調試，所以這里暫時只拿chrome瀏覽器來舉例。
1、擴展程序商店下載（推薦）
首先，要保證你的瀏覽器是可以訪問谷歌擴展程序商店,接著我們在商店中搜索 React Developer Tools，然后就會出現一個擴展程序，擴展程序商店下載的，直接啟用就好。
2、網上安裝包下載
如果是網上下載的安裝包，就找一下包里面會有一個.crx文件擴展名的文件，拖放到擴展程序中即可。
個人說明
上述所有內容都是本人的個人理解，如果出現不正確的地方，請及時評論方便做出修改
以上這篇淺談react+es6+webpack的基礎配置就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
