React基础语法速览

一、项目创建

npm create vite

这里选择react即可,如图:

二、基本文件说明

react函数式编程时,用的是JSX语法进行开发的,这里注意,return时只能有一个根标签;

三、React核心语法

1.插值功能

插值可以使用的位置有标签内容和标签属性处(相当于vue的:语法和{{}}语法)

效果:

2.条件渲染

效果:

3.列表渲染
TypeScript 复制代码
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.事件触发
TypeScript 复制代码
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方法)

对对象的操作:
TypeScript 复制代码
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

注意:这里如果感觉对象属性过多,可以使用展开运算符来方便操作(可以只修改一部分)

对数组进行操作:
TypeScript 复制代码
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

效果:

相关推荐
南玖i35 分钟前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js
YAY_tyy41 分钟前
Three.js 开发实战教程(五):外部 3D 模型加载与优化实战
前端·javascript·3d·three.js
Zuckjet_4 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
bitbitDown5 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy5 小时前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
gnip6 小时前
实现AI对话光标跟随效果
前端·javascript
闭着眼睛学算法8 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
烛阴8 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
lumi.8 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰8 小时前
vue核心原理实现
前端·javascript·vue.js