1、回顧
module.exports = {
entry: {},
output: {},
plugins: [],
module: {},
resolve: {},
devServe: {}
}
2、react
2.1 復制相關文件
index.html / .babelrc / package.json / webpack.config.js
刪除vue相關文件
2.2 創建day02/src,修改webpack的入口文件以及@符號的目錄
entry: { // object 類型寫法 ---- 推薦寫法
app: './day02/src/index.js' // 會將本項目打包成為一個js文件 app.js
},
resolve: {
extensions: ['.js', '.jsx'], // 代表缺省的后綴名，引入時可以省略的后綴名 --- import axios from './request'; 而不用 import axios from './request.js';
alias: { // 別名
'@': path.join(__dirname, './day02', 'src') // src 的別名為 @
}
}
3、react組件
js的語法加react的{}
src/index.js 入口文件
import React from 'react'; // 必不可少
import ReactDOM from 'react-dom'; // 將組件渲染至DOM節點
import App from './App'; // 導入組件 ---- 后綴名可以省略，配置過缺省的后綴名
// 將App 組件渲染至真實的DOM節點
// 組件使用就是標簽形式，可以是雙閉合標簽，也可以是單閉合標簽
// 組件的首字母必須大寫
// 小寫為HTML標簽
ReactDOM.render(
<App />,
document.getElementById('app')
)
3.1 類組件 ---- es6中的class
import React from 'react'; // 組件必須導入
// 使用es6的class實現react的組件，組件的首字母大寫
// 要實現組件，必須繼承React的Component
// 必須調用super()方法 ---- 類的構造方法中調用 ----- 如果組件中使用this
// 子類必須在constructor方法中調用super方法，否則新建實例時會報錯
// 這是因為子類自己的this對象，必須先通過父類的構造函數完成塑造，得到與父類同樣的實例屬性和方法，然后再對其進行加工，加上子類自己的實例屬性和方法。如果不調用super方法，子類就得不到this對象。
class Com extends React.Component {
constructor (props) { // 父類可以調用的所有的屬性和方法都在props值中
super(props)
}
// render 函數 繼承自父類，是react生命周期的一部分
// 返回一段HTML代碼，表示當前組件的結構(相當於vue中的template)，HTML代碼一般使用()包裹
// 返回的HTML結構的代碼的語法 ---- jsx語法 --- javascript xml - 類xml語言
// 只有一個頂級標簽
render () {
return (
<div>
hello world
</div>
)
}
}
// 暴露組件
export default Com;
3.2 函數式組件 ---- es6中的箭頭函數
import React from 'react'; // 組件必須導入
// 箭頭函數返回一段HTML代碼
// const Com = () => {
// 業務邏輯
// return (
// <div>
// hello react函數式組件
// </div>
// )
// }
// 箭頭函數的自帶返回值，返回()表示直接返回HTML代碼
const Com = () => (
<div>
hello react函數式組件-簡寫
</div>
)
// 暴露組件
export default Com;
3.3 什么時候使用類組件，什么時候使用函數式組件
所有的組件都可以使用類組件，含有狀態（組件初始化數據）的組件必須使用類組件（暫時）
函數式組件又被稱之為UI組件以及無狀態組件
狀態 ----- 初始化數據 ---- 類似vue中的data
4 react的狀態 ---- state
4.1 設定初始化的數據
import React from 'react'; // 組件必須導入
class Com extends React.Component {
// 狀態放置的位置在構造方法內
// 子類自己的this對象，必須先通過父類的構造函數完成塑造，得到與父類同樣的實例屬性和方法，然后再對其進行加工，加上子類自己的實例屬性和方法
constructor (props) { // props父類同樣的實例屬性和方法
super(props);
this.state = { // react初始化數據 ---- 類似於vue中的data
msg: 'hello react + state'
}
}
render () {
return (
<div>
{ this.state.msg }
</div>
)
}
}
// 暴露組件
export default Com;
4.2 jsx注釋 ---- render -> return ()
return (
<div>
{
// 111 -- 單行注釋
}
{
/*
222222 --- 多行注釋
*/
}
</div>
)
4.3 數據的遍歷 ---- 邊遍歷邊渲染
js的遍歷，加{}變react的遍歷，遍歷選項返回jsx語法的結構
- 單層遍歷
import React, { Component } from 'react'; // 解構賦值
class Com extends Component {
constructor (props) {
super(props);
this.state = {
msg: 'hello world',
list: ['aa', 'bb', 'cc', 'dd'] // ++++++++++++++
}
}
render () {
return (
<div>
{ this.state.msg }
{
// +++++++++++++++++++++++++++++++++++++++++++++++++
this.state.list.map((item, index) => {
return (
<p key={ index }>
{ item }
</p>
)
})
}
</div>
)
}
}
export default Com;
- 多層遍歷 ------ 返回的html代碼必須符合jsx語法
import React, { Component } from 'react'; // 解構賦值
class Com extends Component {
constructor (props) {
super(props);
this.state = {
msg: 'hello world',
// ++++++++++++++++++++++++
list: [
{
brand: 'iphone',
arr: ['iphone6', 'iphone7', 'iphone8', 'iphonex', 'iphone11']
},
{
brand: 'huawei',
arr: ['p20', 'p30', 'meta20', 'meta30']
}
]
}
}
render () {
return (
<div>
{ this.state.msg }
{
// +++++++++++++++++++
this.state.list.map((item, index) => {
return (
<div key={ index }>
<h1>{ item.brand }</h1>
{
// ***********************
item.arr.map((itm, idx) => {
return (
<p key = { idx }>{ itm }</p>
)
})
}
</div>
)
})
}
</div>
)
}
}
export default Com;
- 拓展 - 16版本以前
var Com = React.createClass({
initialState () {
return {
msg: ''
}
}
render () {
return ()
}
})
4.4 數據的遍歷 ---- 先遍歷后渲染
import React, { Component } from 'react'; // 解構賦值
class Com extends Component {
constructor (props) {
super(props);
this.state = {
msg: 'hello world',
list: ['aa', 'bb', 'cc', 'dd'],
list1: [<p key="1">aaa</p>, <p key="2">bbb</p>]
}
}
render () {
// ++++++++++++++++++
let arr = [];
this.state.list.map((item, index) => {
arr.push(
<p key={ index }> { item } </p>
)
})
// +++++++++++++++++++
return (
<div>
{ this.state.msg }
{
this.state.list
}
{ this.state.list1 }
{
// ++++++++++++++++++
arr
}
</div>
)
}
}
export default Com;
4.5 條件判斷
- 最普通的條件判斷 ---- 完全是js的語法
import React, { Component } from 'react'; // 解構賦值
class Com extends Component {
constructor (props) {
super(props);
this.state = {
flag: true
}
}
render () {
if (this.state.flag) {
return (
<div>
如果條件為真我就顯示
</div>
)
} else {
return (
<div>
如果條件為假我就顯示
</div>
)
}
}
}
export default Com;
- 三目運算符 -----
import React, { Component } from 'react'; // 解構賦值
class Com extends Component {
constructor (props) {
super(props);
this.state = {
flag: false
}
}
render () {
return (
<div>
{
// +++++++++++++++++++++++++++++++++
this.state.flag ? <p>真</p> : <p>假</p>
}
</div>
)
}
}
export default Com;
5、注意事項
-
組件必須導入React
-
添加狀態必須在構造方法，添加構造方法必須執行super()
-
不要在jsx語法中使用 if - else,可以使用三目運算、或運算、與運算
-
不要在jsx語法中使用 for 循環, 使用 map 循環
6、預習
-
自定義函數
-
生命周期鈎子函數
-
修改狀態
-
組件
-
組件傳值