React18入门(第一篇)——JSX、TSX语法详解

文章目录

    • [一、JSX 语法简介](#一、JSX 语法简介)
    • [二、和 HTML 标签的几点不同](#二、和 HTML 标签的几点不同)
    • [三、JSX 属性](#三、JSX 属性)
    • [四、JSX 事件](#四、JSX 事件)
        • [4.1 简单点击事件](#4.1 简单点击事件)
        • [4.2 类型限制](#4.2 类型限制)
        • [4.3 带参数,箭头函数](#4.3 带参数,箭头函数)
    • [五、插入 JS 变量](#五、插入 JS 变量)
    • [六、JSX 中使用条件判断](#六、JSX 中使用条件判断)
    • 七、循环

一、JSX 语法简介

  1. JSX - 是 JS 的扩展,写在 JS 代码里面,组件的 UI 结构
  2. 语法和 HTML 相似,有 HTML 相关基础,学起来很容易
  3. JSX 已成 ES 规范(不是React独有),可用于其他的框架,如 Vue3

注:需要用 Js 语法写的时候,文件后缀名就是 .jsx ;需要用 Ts 语法写的时候,文件后缀名就是 .tsx

示例代码:

typescript 复制代码
// App.tsx 代码
import React from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  )
}
export default App

二、和 HTML 标签的几点不同

  1. 首字母大小写的区别,首字母大写是自定义组件
  2. 标签必须闭合,如 在 HTML 中合法,但在 JSX 中是非法的
  3. 每段 JSX 代码片段都必须要有一个根节点,根节点可以是空标签 <> </>。如下图所示:

三、JSX 属性

  1. class 要改成 className
  2. style 要使用 JS 对象(不能是 string )而且 key 用驼峰写法
  3. for 要改为 htmlFor

四、JSX 事件

事件就是那些什么 点击事件、监听事件等

  • 使用 onXxx 的格式
  • 必须传入一个函数(是 fn 而非 fn() )
  • 注意 TypeScript 类型(初学着不着急深究,会用,不报错即可 )
4.1 简单点击事件
4.2 类型限制
4.3 带参数,箭头函数

五、插入 JS 变量

  • 使用 { XXX } 可以插入 JS 变量、函数、表达式
  • 可插入普通文本、属性
  • 可用于注释

六、JSX 中使用条件判断

  • 使用 &&
  • 使用 三元表达式
  • 使用 函数

七、循环

  • 使用数组 map
  • 每个 item 元素需要 key 属性
  • key 在同级别唯一
相关推荐
naice37 分钟前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼41 分钟前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin1 小时前
TypeScript设计模式:门面模式
前端·后端·typescript
小奋斗1 小时前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀6961 小时前
CSS-响应式布局
前端
三小河1 小时前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法1 小时前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端
Hilaku1 小时前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
小文刀6961 小时前
2025-35st-w-日常开发总结
前端
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js