淺談react+es6+webpack的基礎配置

發(fā)布時間：2020-08-31 08:20:01 來源：腳本之家閱讀：224 作者：jingxian 欄目：web開發(fā)

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

準備工作

安裝 nodeJs

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

webpack

安裝webpack

npm install webpack -g

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

webpack 也有一個 web 服務器

npm install webpack-dev-server -g

-g道理同上

配置webpack

1、先確認一下項目的目錄結(jié)構(gòu)

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

2、配置webpack.config.js

在使用webpack的時候，需要創(chuàng)建一個名為 webpack.config.js 的配置文件，這個文件在安裝webpack的時候，是不會自動創(chuàng)建的，是需要手動創(chuà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']
       }
     }]
   }
 }

這是一個簡單的webpack的配置，首先先引用了path對象。

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

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

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

module中添加的loaders這個數(shù)組，里面的對象是用來轉(zhuǎn)換模塊的，現(xiàn)在這里只添加了一個js的模塊，用來轉(zhuǎn)換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 ，會彈出一個系統(tǒng)彈窗，"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 的模塊化開發(fā)，可以直接雙擊打開 index.html 查看演示，也可以運行 webpack-dev-server 打開本地服務器，瀏覽器打開 http://localhost:8080/build/index.html 查看演示

React組件生命周期

1、getDefaultProps

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

2、getInitialState

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

3、componentWillMount

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

4、render

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

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

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

　　3）只能出現(xiàn)一個頂級組件（不能返回數(shù)組）

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

5、componentDidMount

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

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

6、componentWillReceiveProps

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

7、shouldComponentUpdate

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

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

8、componentWillUpdate

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

9、componentDidUpdate

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

10、componentWillUnmount

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

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

如果直接在瀏覽器調(diào)試的話，我們只能在Element中看到渲染后的DOM分層結(jié)構(gòu)，如果想看到React組件的分層結(jié)構(gòu)，就會需要到一個調(diào)試工具，因為本人比較喜歡使用chrome瀏覽器進行調(diào)試，所以這里暫時只拿chrome瀏覽器來舉例。

1、擴展程序商店下載（推薦）

首先，要保證你的瀏覽器是可以訪問谷歌擴展程序商店,接著我們在商店中搜索 React Developer Tools，然后就會出現(xiàn)一個擴展程序，擴展程序商店下載的，直接啟用就好。

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

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

個人說明

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

以上這篇淺談react+es6+webpack的基礎配置就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。

向AI問一下細節(jié)

淺談react+es6+webpack的基礎配置

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽