IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 【react框架】学习记录2-学习什么是JSX,以及基础语法 -> 正文阅读

[JavaScript知识库]【react框架】学习记录2-学习什么是JSX,以及基础语法

介绍

JavaScript XML,react定义的一种类似于XML的JS扩展语法,JS + XML本质是React.createElement(component, props, ...children)方法的语法糖。

XML:简单来讲就是一种用于存储和传输数据的格式,很像html,因为格式中有很多浪费空间的写法,于是后来有了JSON格式。XML现在还有使用需求。

作用

上一篇也说了,在react中写jsx比写js更加便捷,简单来说jsx就是用来简化创建虚拟DOM

语法规则

定义虚拟DOM时,不要写引号

<script type="text/babel" >
	const VDOM = (  /* 此处一定不要写引号,因为不是字符串 */
		<h1 id="title">
			<span>Hello,React</span>
		</h1>
	)
</script>

标签中混入JS表达式时要用{}

const myId = "abox";
const myData = "HeLlo";
const data = ['Angular','React','Vue']
<script type="text/babel" >
	const VDOM = ( 
	<div>
		<h1 id={myId.toLowerCase()}>
			{myData.toLowerCase()}
		</h1>
		<ul>
			{
				data.map((item,index)=>{
					return <li key={index}>{item}</li>
				})
			}
		</ul>
	</div>
	)
</script>

{} 中不能放入js语句,要放入js表达式,两者的区别是:

JS表达式:能产生一个值,都可以用个变量去接到数据const x = ,例如:

  • a 一个变量
  • a+b
  • demo(1) 有返回值
  • arr.map() 有返回值
  • function test () {} 返回整个函数

JS语句(代码):就理解为和表达式相反的,不会返回一个数字,例如:

  • if(){}
  • for(){}
  • switch(){case:xxxx}

样式的类名指定不要用class,要用className

<script type="text/babel" >
	const VDOM = ( 
		<h2 className="title">
			wow
        </h2>
	)
</script>

内联样式,要用 style={{key:value}} 的形式去写

<script type="text/babel" >
	const VDOM = ( 
		<h2 style={{ color: "white", fontSize: "29px" }}>
        </h2>
	)
</script>

只有一个根标签

和vue的template一样。

标签必须闭合

必须得~~~

标签首字母意义

  • 若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。
  • 若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。

注意:
一、jsx里写的可不是html,而就是jsx,经过react转换后才是html。
二、jsx最终产生的就是一个JS对象

需要babel转译

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

使用

ReactDOM.render(virtualDOM, containerDOM)上篇文章也写了如何使用。这里就不再记录了。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-07-04 19:23:37  更:2021-07-04 19:24:23 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年3日历 -2024/3/29 15:55:18-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码