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 在同级别唯一
相关推荐
Mintopia13 分钟前
🌀曲面细分求交:在无限细节中捕捉交点的浪漫
前端·javascript·计算机图形学
Mintopia15 分钟前
🧙‍♂️用 Three.js 判断一个点是否在圆内 —— 一次圆心和点的对话
前端·javascript·three.js
ttod_qzstudio26 分钟前
TypeScript 配置全解析:tsconfig.json、tsconfig.app.json 与 tsconfig.node.json 的深度指南
typescript·node.js·json
liliangcsdn31 分钟前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
CssHero34 分钟前
基于vue3完成领域模型架构建设
前端
PanZonghui37 分钟前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
言兴40 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
FanetheDivine43 分钟前
过于ts的ts不是好ts
typescript
sunbyte44 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常1 小时前
网页视频录制新技巧,代码实现超简单!
前端