一、项目创建

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

效果：