JSX、JSX的介绍、JSX特点、JSX的语法、XML基本语法
1、JSX的介绍
什么是JSX:JSX=javascript xml就是Javascript和XML结合的一种格式。是 JavaScript 的语法扩展,只要你把HTML代码写在JS里,那就是JSX。
在实际开发中,JSX 在产品****打包阶段****都已经编译成纯 JavaScript,不会带来任何副作用,反而会让代码更加直观并易于维护。官方定义是:类 XML 语法的 ECMAScript 扩展。
2、特点:
JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的,在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。
3、JSX的语法
JSX就是把html代码写在javascript中,那么,写在javascript中有啥要求(与原来在html中的区别),这就是jsx语法要说的内容。
示例:
var msg="哥们!"const element = <h1>Hello, world!{msg}</h1> 没有双引号,不是字符串const List = () => ( <ul> <li >list item</li> <li>list item</li> <li>list item</li> </ul> );
XML基本语法
只能有一个根标签,养成外面加上圆括号的习惯。
标签要闭合(单边标签得有斜杠)
元素类型
小写首字母对应 HTML的标签,组件名首字母大写。
注释使用 / * 内容 */ html标签内注释{/* 最外层有花括号*/}
元素属性
内联样式的style:样式名以驼峰命名法表示, 如font-size需写成fontSize。默认像素单位是 px(px不用写)
let _style = { backgroundColor:"red" };ReactDOM.render(<h1 style={_style}>Hello, world!</h1>, document.getElementById('box'));
外部样式的class:HTML中曾经的 class 属性改为 className(因为class是js的关键字),外部样式时使用
ReactDOM.render(<h1 className="bluebg">Hello, world!</h1>,document.getElementById('box'));
for 属性改为 htmlFor(因为for是js的关键字)。(for属性在html标签中是扩充单选框|复选框的选择范围)
事件名用驼峰命名法。HTML是全小写(onclick),JSX中是驼峰(onClick)
javascript表达式
使用单花括号。
react里没有vue中的指令,任何地方需要javascript的变量,表达式等等,只需要套上 单花括号就行。
const element = <h1>Hello, {120+130}!</h1> const element = <h1>Hello, {getName("张三疯")}!</h1> <input type="text" value={val ? val : ""} />
注意:单花括号里只能写表达式,不能写语句(如:if,for)
总结:
对比原生,JSX相当于把原生里的html和javascript代码混写在一起,
vue中有很多的指令,react中只需要使用单花括号就行。
JSX、JSX的介绍、JSX特点、JSX的语法、XML基本语法相关推荐
- [vue] 你有使用过JSX吗?说说你对JSX的理解
[vue] 你有使用过JSX吗?说说你对JSX的理解 jsx不是一门新的语言,是一种新的语法糖.让我们在js中可以编写像html一样的代码. 允许XML语法直接加入到JavaScript代码中,让你能 ...
- 介绍全新的 JSX 转换
虽然 React 17 并未包含新特性,但它将提供一个全新版本的 JSX 转换.看看怎么用吧? 先看看 React 16 的项目.react 和 react-dom 的版本都是16的. "r ...
- 在jsx中绑定js表达式以及jsx注释
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- html字符串转换jsx,javascript – 将React.element转换为JSX字符串
我正在尝试构建一个组件, >带孩子和 >渲染DOM中的子项,以及 >出于文档的目的,在pre中显示子DOM 一种解决方案是将JSX作为单独的prop传递.这使得它重复,因为我已经能够 ...
- vscode jsx html补全,VScode设置jsx语法自动补全
Python小练习二 # 以正确的宽度在居中的"盒子"内打印一个句子 # 注意,整数除法运算符(//)只能用在Python 2.2及后续版本,在之前的版本中,只使用普通除法(/) ...
- Swift翻译之-Swift语法入门 Swift语法介绍
目录[-] Hello world - Swift 简单赋值 控制流 函数与闭包 对象和类 枚举与结构 协议和扩展 泛型 2014.6.3日,苹果公布最新编程语言Swift,Swift是一种新的编程语 ...
- c语言中建一个文件的语法,C语言语法介绍_文件.ppt
C语言语法介绍_文件 第十三章 本章要点 文件的基本概念 文件的基本函数 文件的顺序读写 文件的随机读写 文件简单应用 主要内容 13.1 C文件概述 13.2 文件类型指针 13.3 文件的打开与关 ...
- JAVA知识积累 JSP第一篇【JSP介绍、工作原理、生命周期、语法、指令、行为】...
什么是JSP JSP全名为Java Server Pages,java服务器页面.JSP是一种基于文本的程序,其特点就是HTML和Java代码共同存在! 为什么需要JSP JSP是为了简化Servle ...
- SAP ABAP实用技巧介绍系列之 使用XSLT替换xml中指定node的value
Created by Jerry Wang, last modified on Jun 30, 2014 用于测试的xml: <catalog> <cd> <title& ...
- python基础编程语法-Python基础语法介绍:面向对象编程(上)
面向对象编程 面向对象编程,简称OOP:是一种解决软件服用的设计和编程方法.这种方法把软件系统中相似的逻辑操作.数据.状态等以类的形式描述出来,通过对象实例在软件系统中复用,从而提高软件开发效率. 类 ...
最新文章
- 学习总结--团队项目
- java Datasource,数据库连接池
- 16windows_16_combo组合框
- boost::process::cmd相关的测试程序
- springboot 删除路径下面所有文件_springboot文件上传删除下载
- httpservletrequest获取不到登录的session_cookie和session是怎么交互的?
- 隐藏画质代码_和平精英120帧率代码是什么?隐藏的120帧率代码更改方法技巧
- MySQL 的三大引擎:InnoDB、MyISAM和Memory
- 将unsigned char字符串以16进制的字符串显示
- 浅谈Linux管线命令grep
- Keil(C51)介绍、下载、安装与注册
- java经典算法(七)---zws
- 华硕笔记本的 Ubuntu 18.04 安装 nvidia 显卡驱动并支持 HDMI 输出
- word上怎么把图片拼接到一起_如何用Word把自己插入的两张图片合在一起?
- 苹果手机软件闪退怎么解决_王者荣耀筑梦祈愿闪退设备不支持怎么办 王者荣耀筑梦祈愿闪退设备不支持解决方法...
- 小米笔记本用来开发java_小米笔记本 Pro用来编程怎么样?
- 5G标准必要专利最新全球排名
- java学习数据类型
- 首单怎么让用户掏钱,只能降价吗?|用户心理学
- 软件工程师杰夫的个人营销实例(十分钟看完系列)