1. JSX介绍
- React 使用 JSX 来替代常规的 JavaScript。
- JSX:是 JavaScript XML的缩写。
- JSX, 一种 JavaScript 的语法扩展。脚手架中内置了 @babel/plugin-transform-react-jsx 包,用来解析该语法。
- JSX 用于在 React 中描述用户界面。
- JSX 是在 JavaScript 内部实现的。
示例代码:
// 导入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'))
2. JSX基本使用
1. JSX 中可以使用 JavaScript 表达式。表达式写在花括号 {} 中。
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>
,
document.getElementById('root')
);
2. 在JSX 中不能使用 if else 语句,可以使用三元运算表达式来替代。
<h1>{i === 1 ? 'True!' : 'False'}</h1>
3. React 推荐使用内联样式。可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>我的样式</h1>,
document.getElementById('root')
);
4. 注释需要写在花括号中
{/*注释...*/}
5. JSX 允许在模板中插入数组,数组会自动展开所有成员
var arr = [
<h1>呵呵</h1>,
<h2>哈哈</h2>,
]
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('root')
)
注意事项:
1. 由于 JSX 就是 JavaScript,一些标识符像 class
和 for
不建议作为 XML 属性名。作为替代,React DOM 使用 className
和 htmlFor
来做对应的属性。
2. jsx必须要有一个根节点 (虚拟根节点 1.<></>2.
<React.Fragment> </React.Fragment> )
3. 单标签要闭合 (<input>
=== <input />
)
4. 换行建议使用( )包裹
5. 老版本(16.8)先引入react才能使用jsx (老版本中不引入就会报错React must be in scope when using JSX
)