中国建设银行大学助学贷款网站莱芜金点子保安最新招聘信息
一、项目创建
npm create vite
这里选择react即可，如图：
二、基本文件说明
react函数式编程时，用的是JSX语法进行开发的，这里注意，return时只能有一个根标签；
三、React核心语法
1.插值功能
插值可以使用的位置有标签内容和标签属性处（相当于vue的：语法和{{}}语法）
效果：
2.条件渲染
效果：
3.列表渲染
import { Fragment } from "react/jsx-runtime"function App() {const list = [{name: '小吴',id: 1},{name: '小王',id: 2},{name: '小张',id: 3}]const listContent = list.map((item) => {return (<Fragment key={item.id}><li>{item.name}</li><li>-------------------------</li></Fragment>)})return (<><ul>{listContent}</ul></>)
}export default App
效果：
这里要注意：list.map中返回的也是一个JSX语法的字符串，所以要求也必须要有一个根标签，且列表渲染时要注意根标签上必须有一个key值，此时我们就可以使用Fragment来帮助我们，它等价于<></>（类型于vue中的template）.
4.事件触发
import { useState } from "react"function App() {const [content, setContent] = useState('标签的默认内容')function handleClick(e: React.MouseEvent<HTMLButtonElement>) {console.log('点击了',e)setContent('按钮被点击了')}return (<><div>{content}</div><button onClick={handleClick}>按钮</button></>)
}export default App
效果：
注意：这里只有用useState才可以进行响应式操作（相当于get/set方法）
对对象的操作：
import { useState } from "react"function App() {const [data, setData] = useState({title: 'Hello React',content: '这是一个按钮'})function handleClick(e: React.MouseEvent<HTMLButtonElement>) {console.log('点击了',e)setData({title: 'Hello React!',content: '点击了按钮'})}return (<><div title={data.title}>{data.content}</div><button onClick={handleClick}>按钮</button></>)
}export default App
注意：这里如果感觉对象属性过多，可以使用展开运算符来方便操作（可以只修改一部分）
对数组进行操作：
import { Fragment, useState } from "react"function App() {const [list,setList] = useState([{name: '小吴',id: 1},{name: '小王',id: 2},{name: '小张',id: 3}])const listData = list.map((item: any) => {return (<Fragment key={item.id}><li>{item.name}</li></Fragment>)})function handleClick(e: React.MouseEvent<HTMLButtonElement>) {console.log('点击了',e)const temp = list.filter(item => item.id !== 3)temp.push({name: '小刘',id: 4})setList([...temp,{name: "小乔",id: 5}])}return (<><div>{listData}</div><button onClick={handleClick}>按钮</button></>)
}export default App
效果：
