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 在同级别唯一
相关推荐
一斤代码38 分钟前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子41 分钟前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年43 分钟前
从前端转go开发的学习路线
前端·学习·golang
中微子1 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina1 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路2 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_2 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码2 小时前
1.
react.js·node.js·angular.js
伍哥的传说2 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app