小白必看，react和jsx/tsx有啥关系

最新推荐文章于 2024-07-22 00:04:00 发布
最新推荐文章于 2024-07-22 00:04:00 发布
阅读量1k 收藏 1
点赞数
分类专栏： 前端工程化 文章标签： react 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17335549/article/details/129402568
版权
******内容预警******新手内容，大佬请绕道

一直都是用的vue框架，现在刚开始接触react，打开react官网很迷惑，没有像vue的官网一样详细的介绍各种语法，开始有点困惑，到底改怎么写啊。

其实vue项目中.vue文件就是vue框架专用的，所以官网自然详细。但是注意了，虽然react使用了jsx/tsx文件，但是他们却不是react专用的。

JSX是一种嵌入式的类似XML的语法。使用typescript就是tsx文件了。

所以看到没，jsx/tsx文件是XML的语法，也就是javascript的语法的扩展，和任何框架(如：react)都不是绑定的。

所以在学习react之前还是需要先自己学习一下jsx/tsx语法。

我有一棵树
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JS】jsx/tsx是什么？为什么 Vue3 的组件库都在使用 jsx/tsx？如何在Vue3中使用 jsx/tsx？
余浩的博客
03-10 3040
前几天得到一个疑问，为什么 React 要用 JSX 语法，这样显得代码好像“很耦合”。按照传统应推荐 html、js、css 模版分离，这样设计的优越性到底在哪里？
Vue3 超前版发布，全面拥抱 JSX/TSX
xiangzhihong8的专栏
04-24 107
我们都知道 Vue 一直主流是使用 template 模板来进行页面的编写。而就在最近，Vue3 的超前项目 Vue Macros 中，发布了 defineRender、setupComponent、setupSFC 这些新的 API，这代表了，以后 Vue3 有可能可以全面拥抱 JSX/TSX 了！！说这个新 API 之前，我们先来说说什么是 Vue Macros。
React TypeScript Node 全栈开发（一）
最新发布
龙哥盟
07-22 630
根据 GitHub，这是全球最大的开源软件仓库，JavaScript 仍然是世界上最流行的编程语言。比任何其他语言都有更多的项目是用 JavaScript 编写的。甚至通常不与 Web 相关的项目，如机器学习和加密货币，也经常使用 JavaScript。JavaScript 编程语言非常强大和有能力，但除了语言本身，还有一些框架，包括 React 和 Node，可以增强语言的功能，使其变得更好。此外，TypeScript 现在已成为进行大型 JavaScript 项目的标准。
React+tsx实现拖拽效果 (PC端+移动端)
wpb1109的博客
09-16 496
tsx代码 import './index.less' import { Component, createRef } from 'react' interface Props { } interface State { } class Drag extends Component<Props, State> { disX: number = 0; disY: number = 0; dragElement = createRef<HTMLDivElemen
第三章 React之JSX、TSX语法
Etc.End的博客
11-30 3004
TSX语法在保留了HTML的标记语言的同时，增加了类型注解和JSX语法的特点，并通过构建工具将它们结合在一起，为构建大型、复杂的Web应用提供了更高效、更灵活的编程方式。在下一篇文章中我将讲解typescript的使用。我是Etc.End。
React18入门（第一篇）——JSX、TSX语法详解
做笔记/记录遇到的前端bug
10-03 3582
React18入门之JSX语法详解，TSX语法详解
React 使用JSX或者TSX渲染页面
Python私教
05-29 1663
在本节中，我们将实现必需的“Hello, World”JSX应用程序。在这一点上，我们只是把脚趾伸进水里;后面会有更深入的例子。我们还将讨论是什么使这种语法能够很好地用于声明性UI结构。
React和JSX
夏中伟的博客
09-27 431
参考：React教程一、react概念React 是一个用于构建用户界面的 JAVASCRIPT 库。二、JSX概念JSX必须借助ReactJS环境才能运行，在编写JSX代码前，必须先加载ReactJS文件，JSX并不是一门新的语言，仅仅是一个语法糖，允许开发者在javaScript中书写HTML的语法，最后每个HTML标签都转化为JavaScript代码来运行。三、React组件（1）、React
Vue3 使用 Vite配置JSX/TSX支持
Vinc_chen的博客
06-09 9087
Vue3 使用 Vite配置JSX/TSX支持 开始搭建项目 详情请按Vite官方文档 各位客官们，注意一下搭建项目之前，请使用npm --version检查一下自己的npm版本，按照文档的不同npm版本对应的不同命令行，对号入座～ 如果有使用MacOS的同学，可能会遇到一下子问题： throw new Error(`esbuild: Failed to install correctly ^ Error: esbuild: Failed to install correctly Make sure y
vim-jsx-pretty:[Vim脚本] JSX和TSX语法对vim进行了突出显示
05-28
:sparkles: 支持React语法高亮显示和缩进JSX和打字稿TSX文件。 :label: 在字符串中支持JSX语法突出显示和缩进。 :artist_palette: 支持突出显示关闭标签和打开标签（在vimrc let g:vim_jsx_pretty_highlight_...
react-tsx-my-app
02-09
该项目是通过。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 相反，它将所有配置文件和传递依赖项（webpack，Babel，ESLint等）直接复制到您的项目中，因此您
ssml-tsx:在JSX或TSX中内联编写SSML（语音合成标记语言）
04-10
在JSX或TSX中内联编写SSML（语音合成标记语言）。 该模块包括SSML的类型定义。 安装 $ npm install --save ssml-tsx 在您的tsconfing.json添加"jsx": "react" 。 { "compilerOptions": { ..., + "jsx": "react...
react tsx
weixin_30553777的博客
10-23 1103
npm i -g webpack webpack-dev-server typescript 创建项目目录 mkdir projecttest cd prokecttest npm init 创建tsconfig.json { "compilerOptions": { "jsx":"react", //tsx转换为js，不是不是jsx...
React基础第一天-jsx
qq_46343149的博客
05-28 632
React 基础 整体介绍 内容介绍 React 概述 JSX React 组件基础 React 介绍 目标 了解react的基本概念， 是什么 React 官网 React 中文网 React 官网新版尝鲜 React 是用于构建用户界面的 JavaScript 库 构建用户界面. User Interface，对咱们前端来说，简单理解为：HTML 页面 javscrtipt库。不是框架，是库。 vue: 是渐进式的javascript框架 react 全家桶是框架 react
React+tsx实现选项卡功能
wpb1109的博客
09-16 733
tsx代码 import { Component } from "react"; import './index.less' interface Props { } interface User { ID: string, text: string } interface Con { ID: string, text: string } interface State { ButtonIndex: number ButtonList: User[]
React 之 JSX
L凯的博客
03-31 1218
什么是JSX ?    即JavaScript XML ，基于JavaScript 融合了XML,我们可以在js中书写XML， 是一种标记语言,可以自定义属性，具有可扩展性。在react中如果想向页面输出一个标签，必须用到react内置的JSX语法，否则输出的只是普通的字符串。使用注意    必须引用babel.js文件解析JSX, script标签中添加 type="text/babel" 属性...
JS和TS共存方案
kaqiinono的技术小窝
08-23 5335
JS和TS共存方案
用TypeScript来写React官方入门教程 .tsx后缀文件，同时入门typescript和React
qq_43853972的博客
12-14 6382
用TypeScript来写React官方入门教程 .tsx后缀文件，同时入门typescript和React
react tsx语法
05-03
React TSX 是一种使用 TypeScript 语言编写 React 组件的语法。以下是一个简单的 React TSX 组件示例： ```tsx import React from 'react'; type Props = { name: string; age: number; }; const MyComponent: React.FC<Props> = ({ name, age }) => { return ( <div> <h1>{name}</h1> <p>{age}</p> </div> ); }; export default MyComponent; ``` 在这个示例中，我们定义了一个名为 `MyComponent` 的函数组件，并使用 `React.FC` 类型定义了它的 props。在组件内部，我们可以通过解构 props 对象来获取传递给组件的属性，并使用 JSX 语法来渲染组件。注意，在 TSX 中，我们可以通过使用 `{}` 将 JavaScript 表达式嵌入到 JSX 中。 此外，我们还需要使用 TypeScript 的编译器来编译这个组件。通常，我们可以使用 `tsconfig.json` 文件来配置 TypeScript 编译器，例如： ```json { "compilerOptions": { "jsx": "react", "esModuleInterop": true, "module": "commonjs", "target": "es5", "moduleResolution": "node", "sourceMap": true } } ``` 其中，`jsx` 选项指定了我们使用 React TSX 语法，`esModuleInterop` 选项指定了我们使用 ES6 的模块导入语法，`module` 选项指定了我们使用 CommonJS 模块系统，`target` 选项指定了我们的代码将编译成 ES5 语法，`moduleResolution` 选项指定了我们使用 Node.js 的模块解析方式，`sourceMap` 选项指定了我们生成源代码映射。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值