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

效果:

相关推荐
吃饭睡觉打豆豆嘛4 分钟前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
Spider_Man11 分钟前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
小高00712 分钟前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
EveryPossible41 分钟前
终止异步操作
前端·javascript·vue.js
Stringzhua1 小时前
setup函数相关【3】
前端·javascript·vue.js
neon12041 小时前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画
Sammyyyyy1 小时前
Node.js 做 Web 后端优势为什么这么大?
开发语言·前端·javascript·后端·node.js·servbay
Bling_Bling_12 小时前
面试常考:js中 Map和 Object 的区别
开发语言·前端·javascript
前端小巷子3 小时前
JS实现丝滑文字滚动
前端·javascript·面试
写不出来就跑路3 小时前
基于 HTML+CSS+JavaScript 的薪资实时计算器(含本地存储和炫酷动画)
javascript·css·html