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 在同级别唯一
相关推荐
zwjapple13 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
伍哥的传说3 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术3 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing3 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python