前端|2、React中的JSX使用 javascript|前端|react.js

1、介绍
JSX全称为JavaScript XML（JS+XML），是React定义的一种类似于XML的JS扩展语法。
作用：用来简化创建React虚拟DOM。
优势：声明式语法更加直观，与HTML结构相同，降低学习成本，提高开发效率。
注意：JSX并非标准的JS语法，浏览器、nodejs均无法识别，需要借助@babel/plugin-transform-react-jsx包解释该语法（JSX=>JS），babel中文官网：https://www.babeljs.cn。
2、语法

定义虚拟DOM时，不要写引号（JSX语法规定）。
只能有一个根标签。
所有标签必须闭合。
【前端|2、React中的JSX使用】标签中混入JS表达式时要用{}，不能混入JS语句（JS表达式和语句的区别：xxx）。
标签的类名指定不要用class，要用className（class是ES6中定义类的关键字）。
内联样式，要用style={{key:value}}的形式写（外层{}代表JS表达式容器，内层{}代表JS对象）。
标签首字母大小写问题：
? ①若小写字母开头，则将该标签转为html中同名标签，若html中无该标签对应的同名元素，则报错。
? ②若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

3、演示使用

jsx语法 - 锐客网crossorigin src="http://img.readke.com/220911/1P1345P0-0.jpg"> crossorigin src="http://img.readke.com/220911/1P134D24-1.jpg"> src="http://img.readke.com/220911/1P134B54-2.jpg">type="text/babel" > let hello = "Hello React"; //1.创建虚拟DOM const VDOM = (/* 此处一定不要写引号，因为不是字符串 */ // 根标签只能有一个 // 标签的class属性，要用className，不要用class {/*内联样式，要用style={{key:value}}的形式写*/} {/*标签中混入JS表达式时要用{}*/} {hello} ) //2.渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getElementById('container'))

运行结果：