JSX理解与基本使用

最新推荐文章于 2024-08-02 09:52:55 发布
最新推荐文章于 2024-08-02 09:52:55 发布
阅读量327 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljy_1024/article/details/104627370
版权

实现此效果

实现方法

<body>
		<div id="test1"></div>
		<div id="test2"></div>
		<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
		<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
		<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
		<script type="text/javascript">
			const msg = 'I like You';
			const myId = 'Atguigu'
			//1,创建虚拟dom元素对象
			const dom1 = React.createElement('h2',{id:myId.toLowerCase()},msg.toUpperCase())
			//2，将虚拟dom渲染到页面真实dom容器中
			ReactDOM.render(dom1,document.getElementById('test1'))
		
		</script>
		<script type="text/babel">
			//1,创建虚拟dom元素对象
			const dom2 = <h3 id={myId.toUpperCase()}> {msg.toLowerCase()}</h3>
			//2，将虚拟dom渲染到页面真实dom容器中
			ReactDOM.render(dom2,document.getElementById('test2'))
		
		</script>
	</body>

 

一，虚拟dom

1，react提供了一些API来创建一种‘特别’的一般js对象

var element = React.createElement('h2',{id':'atguigu'},'hello') 

上面创建的就是一个简单的虚拟dom对象

2，虚拟dom对象最终都会被react转为真实的dom

3，我们编码时基本只需操作react的虚拟dom相关数据，react会转化为真实的dom变化2而更新界面

 

二，JSX

1，全称：javascrip XML

2，react定义的一种类似XML的JS扩展语法：XML+JS

3，作用：用来创建react虚拟DOM（元素）对象

  • var ele = <h1>hello JSX ! </h1>
  • 注意1:它不是字符串，也不是HTML/XML标签
  • 注意2:它最终产生的就是一个JS对象

4，标签名任意：HTML标签或其他标签

5，标签属性任意：HTML标签属性或其他

6，基本语法规则

  • 遇到<开头的代码，以标签的语法解析：html同名标签转为html同名元素，其他标签需要特别解析
  • 遇到以{ 开头的代码，以JS语法解析：标签中的js代码必须用{}包含

7，babel.js的作用

  • 浏览器不能直接解析JSX代码，需要babel转译为纯js的代码才能运行
  • 只要用了JSX，都要加上type=‘text/babel’，声明需要babel来处理

三，渲染虚拟dom（元素）

1，语法：ReactDOM.render(virtuaiDOM,containerDOM)

2，作用：将虚拟DOM元素渲染到页看中的真实容器DOM中显示

3，参数说明

  • 参数一：纯js或jsx创建的虚拟dom对象
  • 参数二：用来包含虚拟dom元素的真实dom元素对象（一般是一个div）

四，建虚拟dom的2种方式

1，纯js（一般不用）

React.createElement('h2',{id:myId.toLowerCase()},msg.toUpperCase())

2，jsx

<h3 id={myId.toUpperCase()}> {msg.toLowerCase()}</h3>

JessicaLilyAn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
React语法基础之JSX
xiangzhihong8的专栏
04-12 2536
概述React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。JSX是什么JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。使用虚拟DOM可以将React的语法
jsx理解
gercke的博客
10-11 294
jsx学习 JSX 其实会被转化为普通的 JavaScript 对象。 function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}!</h1>; } return <h1>Hello, Stranger.</h1>; } 其中jsx中可以含有双标签也可以含有单标签 jsx顶层只能有一个根元素，很多时候我们会在外层包裹一个div r
React（三）：理解JSX和组件
jeikerxiao
02-10 2433
通过前两篇文章的介绍，相信大家对JSX和组件已经有了一定的了解。JSX这种混合使用JavaScript和XML的语言第一眼看上去很“丑”，也很神奇，但是其语法和背后的逻辑却极其简单。相信读完本文你就可以对JSX和组件有一个全面的了解，并能够用JSX来直观的构造用户界面。什么是JSXReact的核心机制之一就是虚拟DOM：可以在内存中创建的虚拟DOM元素。React利用虚拟DOM来减少对实际DOM的操
什么是 JSX？
最新发布
My_wife_QBL的博客
08-02 1036
JSX（JavaScript XML）是一种 JavaScript 语法的扩展，允许开发者在 JavaScript 代码中编写类似 HTML 的标签。尽管 JSX 看起来像 HTML，但它实际上是语法糖，最终会被转译为 JavaScript 对象，供 React 使用。JSX 是 React 的核心组成部分，它通过将 HTML 结构与 JavaScript 逻辑结合在一起，使得开发者能够以一种简洁、直观的方式构建用户界面。通过支持表达式、属性传递和事件处理等功能，JSX 使得组件的开发变得灵活而强大。
理解JSX
weixin_34226706的博客
03-20 355
首先jsx绝不是一个新的语言，我觉得他仅仅是js的超集，或者只是一种语法糖。原本FB是有自己的jsx-transform来负责jsx的解析，不过现在已经停止更新，jsx语法完全依赖babel进行解析。 babel babel在识别jsx的时候，会将标签直接作为AST的node，然后转化 class Square extends React...
对于jsx的理解
wangzhen12138的博客
04-02 124
<div class='box' id='content'> <div class='title'>Hello</div> <button>Click</button> </div> 在react中想要转化变量为dom节点时需要处理html为javascript，上段代码转化为js代码时可以转化为 { tag: 'div', attrs: { className: 'box', id: 'content'}, .
react中 JSX介绍-基本使用
weixin_58207509的博客
11-05 657
JSX是什么 JSX：是 JavaScript XML的缩写。 在 JS 代码中书写 XML 结构 注意：JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置了 @babel/plugin-transform-react-jsx 包，用来解析该语法。 React用它来创建 UI（HTML）结构 jsx示例 // 导入react和react-dom import React from 'react' import ReactDOM from 'react
vue jsx 使用指南及vue.js 使用jsx语法的方法
10-19
通过上述指南，你可以更好地理解和使用Vue中的JSX，提高开发效率。记住，Vue的jsx语法是为了保持与Vue的原生API一致性，同时引入了React JSX的便利性。在实际项目中，根据需求选择适合的编写方式。
reactjs-nodejs-setup:使用自动编译 JSX 文件的 react 和 node 的基本设置
05-29
在本文中，我们将深入探讨如何使用ReactJS与Node.js搭建一个基本的开发环境，并通过自动编译JSX文件来提高开发效率。ReactJS是Facebook推出的一款用于构建用户界面的JavaScript库，而Node.js则是一个基于Chrome V8...
详解如何使用webpack在vue项目中写jsx语法
10-19
首先，理解jsx的基本语法是非常重要的。jsx允许我们在JavaScript中直接创建DOM元素，例如： ```javascript data: { msg: 'Hello world' }, render (h) { return ( { this.msg } ); } ``` 这段jsx代码会被...
React JSX语法使用案例
04-21
`.babelrc`文件是Babel的配置文件，Babel是一个广泛使用的JavaScript编译器，它的主要任务是将JSX和ES6+的语法转换为浏览器可理解的JavaScript。在`.babelrc`中，我们通常会配置`@babel/preset-react`预设，以便...
JSX理解
weixin_42787326的博客
08-27 511
一.语法      1.只能有一个根节点；但是可以相互嵌套     2.换行或者多标签推荐加括号,防止js自动分号不往后执行；     const element =( &lt;div&gt;&lt;h1&gt;1&lt;/h1&gt;&lt;/div&gt;)     3. 解析规则         - 遇到 HTML 标签 （以 &lt; 开头） 就用 HTML 规则解析.单标签不能省略...
深入理解JSX
杜小白的博客
11-05 489
    JSX是React为JavaScript语法带来的可选扩展，用于在JavaScript代码中编写声明式XML风格语法。     对于Web项目而言，React的JSX提供了一组类似于HTML的XML标签，转译后，XML会被转译为针对React库的函数调用，如下： &lt;h1&gt;Hello World&lt;/h1&gt; 会被转译为： React.createElemen...
JSX 的基本使用
薛定谔的猫
02-02 352
JSX是的简写，表示在 JavaScript 代码中写 XML（HTML） 格式的代码。优势：声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率JSX 是 React 的核心内容。
jsx
dearMengJJ的博客
10-23 230
1、jsx应用于React DOM 2、因为jsx的特性更接近JavaScript而不是HTML，所以React DOM使用cameCase(小驼峰)命名来定义属性的名称，而不是使用HTML的属性名称。例如：class变成了className，而tabindex则对应着tableIndex 3、React DOM在渲染之前默认会过滤所有传入的值。它可以确保应用不会被注入攻击。所有的内容在渲染之前都...
React JSX
weixin_42117093的博客
06-07 116
React JSX一、jsx有哪些优点二、jsx是什么 React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。运用于React架构中，其格式比较像是模版语言 一、jsx有哪些优点 JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。 它是类型安全的，在编译过程中就能发现错误。 使用 JSX 编写模板更加简单快速。 React DOM在渲染之前默认会过滤所有传入的值。它可以确保应用不会被注入攻击。所有的内容在
【学习笔记】《玩转Vue3全家桶》--JSX:应对更灵活的开发场景，需要JSX
qq_26780317的博客
12-08 1935
JSX：应对更灵活的开发场景，你需要 JSX
JSX
青蛙king的博客
11-23 255
JSX JSX 的使用方式 通过script标签引入。 通过script标签引入 JSX 然后，必须设置接下来要用的script的类型—— <script type="text/babel"> // ... </script> 在 JSX 中嵌入表达式 在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。 JSX 也是一个表达式 在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JessicaLilyAn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值