使用vite處理jsx
vite引入的腳本必須是ESM的
npm init -y
yarn add vite
package.json 添加vite命令
index.html引入jsx
JSX是什么
- 一種標簽語法，在JS基礎上進行的語法擴展
- 不是字符串、也不是HTML
- 是描述UI呈現與交互的直觀的表現形式
- JSX被編譯后會生成React元素 （React.createElement的效果），是對象
- 遵循JS的命名規范（小駝峰）
class → classNametabindex → tabIndex - 用插值表達式寫邏輯（綁定事件處理函數、顯示變量）
- 單標簽必須閉合
- 只能有一個根標簽
render之前發生了什么
- 所有JSX都會轉成字符串
- 所有輸入的內容都會進行轉義 （避免XSS攻擊）
React元素
JSX經過內部轉換為React元素，和React.createElement()創建的元素相同
console.log(<h1 className="test">123</h1>)
React為什么不把視圖標記和邏輯分離
- 渲染和UI標記有邏輯耦合
- 即使耦合，也能實現關注點分離
插值表達式
- 一切有效的，符合JS變成邏輯的表達式
{ title } - 引號表示的是字符串
修改state setState
this.setState({openStatus: !this.state.openStatus
})
class組件必須render并return
函數組件只return
相關代碼
- package.json
{"name": "02","version": "1.0.0","description": "","main": "index.js","scripts": {"start": "vite"},"keywords": [],"author": "","license": "ISC","dependencies": {"vite": "^2.5.10"}
}
- index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>REACT 01</title><script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head><body><div id="app"></div><script src="./index.jsx" type="module"></script>
</body></html>
- index.jsx
const el = <div className="title">JSX創建React元素</div>
ReactDOM.render(el, // 不是類組件，不用React.createElementdocument.getElementById('app')
)
- index.jsx
class MyButton extends React.Component {constructor(props) {super(props)this.state = {openStatus: true}}// 注意，ES6語法中，state寫在constructor外部和內部是一樣的// state = {// openStatus: true// }// button綁定的事件處理函數默認的this為undefined（不是button！！）// ES6 class模塊默認不對事件處理函數進行this的再綁定// bind顯示改變this指向類的實例(類組件中常規操作)statusChange() {this.setState({openStatus: !this.state.openStatus})}render() {return (<div className="button_wrap"><p className="text">{this.state.openStatus ? '打開狀態' : '關閉狀態'}</p><button onClick={this.statusChange.bind(this)}>{this.state.openStatus ? '去關閉' : '去打開'}</button></div>)}
}ReactDOM.render(React.createElement(MyButton), // 類組件，不是React元素，要React.createElement// 或者這么寫<MyButton /> ，則為React元素document.getElementById('app')
)
ReactDOM.render第一個參數
1. JSX
const oEl = <h1>test</h1>
ReactDOM.render(oEl,document.getElementById('app')
)
2. 函數
// 返回JSX，和上面是換湯不換藥
function update() {return (<h1>test</h1>)
}
ReactDOM.render(update(),document.getElementById('app')
)
- 在方法里ReactDOM.render 執行函數
function update() {const oEl = <h1>test</h1>ReactDOM.render(oEl,document.getElementById('app'))
}
update()
3. 寫類組件
ReactDOM.render(<MyButton />,document.getElementById('app')
)
// 或者
ReactDOM.render(React.createElement(MyButton),document.getElementById('app')
)
)
)
