JSX、JSX的介绍、JSX特点、JSX的语法、XML基本语法

1、JSX的介绍什么是JSX：JSX=javascript xml就是Javascript和XML结合的一种格式。是 JavaScript 的语法扩展，只要你把HTML代码写在JS里，那就是JSX。在实际开发中，JSX 在产品****打包阶段****都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。官方定义是：类 XML 语法的 ECMAScript 扩

Ensoleile2021

27444人浏览 · 2021-11-17 20:58:30

Ensoleile2021 · 2021-11-17 20:58:30 发布

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中只需要使用单花括号就行。