使用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元素
console.log(<h1 className="test">123</h1>)
React为什么不把视图标记和逻辑分离
- 渲染和UI标记有逻辑耦合
- 即使耦合，也能实现关注点分离
插值表达式
- 一切有效的，符合JS变成逻辑的表达式
{ title } - 引号表示的是字符串
相关代码
- 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.createElement
document.getElementById('app')
)
- index.jsx
class MyButton extends React.Component {
constructor(props) {
super(props)
this.state = {
openStatus: true
}
}
// button绑定的事件处理函数默认的this指向button
// 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')
)