使用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')
)
)
)
