webpack4.x+react的專案基本構建
阿新 • • 發佈:2019-01-01
通過對webpack4.x構建專案的基本瞭解。使用webpack4.x和react.js構建react專案步驟:
1. webpack4.x搭建專案準備
2. react專案搭建:
- (1)、執行
cnpm i react react-dom -S
安裝包
- react:專門用於建立元件和虛擬DOM的,同時元件的生命週期都在這個包中
- react-dom:專門進行DOM操作的,最主要的應用場景,就是ReactDOM.render()
- (2)、在index.html頁面中,建立容器
<!-- 建立一個容器,將來渲染的虛擬DOM,會放到容器內顯示 -->
<div id="app"></div>
- (3)、匯入包
// 1. 這兩個匯入時候,接收的成員名稱,必須這麼寫
import React from 'react' // 建立元件、虛擬dom元素,生命週期
import ReactDOM from 'react-dom' // 把建立好的元件和虛擬dom放到頁面上展示的
- (4)、建立虛擬DOM元素
// 2. 建立虛擬DOM元素
// 引數1:建立的元素的型別,字串,表示元素的名稱
// 餐數2:是一個物件或null,表示當前這個DOM元素的屬性
// 引數3:子節點(包括其他 虛擬DOM 獲取 文字子節點)
// 引數n: 其他子節點
// <h1 id="myh1" title="this is a h1">這是銀行股IE大大的h1</h1>
var myh1 = React.createElement('h1',{id: 'myh1', title: 'this is a h1'},'這是銀行股IE大大的h1');
- (5)、渲染:
// 3. 使用ReactDOM把虛擬DOM渲染到頁面上
// 引數1:要渲染的那個虛擬DOM元素
// 引數2:指定頁面上的DOM元素放到一個容器,接收的是一個dom元素而不是一個選擇器
ReactDOM.render(myh1,document.getElementById('app' ));
PS:在執行完 npm run dev 時,頁面會渲染相應的效果,但是會報以下錯誤:
出現這個問題的原因是因為在index.html中引入的打包的main.js檔案應該放到頁面最後,不應該放到頭部。
3. JSX的安裝和使用
- 什麼是JSX語法:就是符合xml規範的JS語法;(語法相對來說,要比HTML嚴謹的多)
- 如何啟用JSX語法?
- 安裝babel外掛
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D
- 安裝能夠識別轉換的JSX語法的包babel-preset-react
cnpm i babel-preset-react -D
- 新增
.babelrc
配置檔案
- 安裝babel外掛
{
"presets": ["env","stage-0","react"],
"plugins": ["transform-runtime"]
}
- JSX語法的本質:並不是直接把jsx渲染到頁面上,而是內部先轉換成了createElement形式,再渲染的;
- 新增babel-loader配置項:
module.exports= {
module: { // 所有第三方模組的配置規則
rules: [ // 第三方匹配規則
{test: /\.js|jsx$/,use: 'babel-loader',exclude: /node_modules/}
]
}
}
- 建立虛擬dom的JSX寫法
// var myDiv = React.createElement('div',{id: 'mydiv', title: 'div title'},'這是一個div元素');
const myDiv = <div id="mydiv" title="div aa">這是一個div元素<h2>這是一個大大的h2標籤</h2></div>