react中 JSX介绍-基本使用

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-dom'

// jsx创建元素
const list = <ul><li>html</li><li>js</li><li>css</li><ul>

// 渲染react元素
ReactDOM.render(list, document.getElementById('root'))

优势

• 采用类似于 HTML 的语法，降低了学习成本，会 HTML 就会 JSX

• 充分利用 JS 自身的能力来创建 HTML 结构。比如，利用 JS 数组的 map 方法创建列表结构

JSX是如何工作的？

babel在线使用

jsx ---babel---> React.createELement  

 

 

JSX的注意事项

内容

1. jsx必须要有一个根节点

2. 属性名不能用js中的关键字。例如class, for

3. 单标签要闭合

4. 换行建议使