认识 JSX
JSX 是一直语法, 能够快速让你描述出一份 DOM 的结构.
它跟 html 很像, 但不是. 我们有过使用 html 的经历, 所以写起 JSX 来也很容易.
不过, JSX 能做的更多.
现在你就可以运行起我们之前使用 create-react-app 新建的项目, 打开 src 下的 index.js :
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<p>Hello React!! 🍅 </p>
, document.getElementById('root')
);
你也可以在这里在线调试:
开始了!
在 JSX 里可以使用表达式
在 jsx 里使用花括号 {} , 在 {} 里可以写 JavaScript 表达式, 比如:
import React from 'react';
import ReactDOM from 'react-dom';
let exp = 'people';
let vol = <span> good for you!</span>;
ReactDOM.render(
<div>
<p>
Hello React!! 🍅
</p>
<span> {5+3} {exp},</span>
{vol}
<br/>
<img src="https://semantic-ui.com/images/avatar2/small/rachel.png" alt="这段代码表现的样子"/>
</div>
, document.getElementById('root')
);
看看结果, {} 里的东西都变成了表达式的返回值.
image.png
你看到这行代码:
let vol = <span> good for you!</span>;
甚至连 JSX 本身也可以被当做表达式.
你还可以发现别的事情, JSX 可以相互嵌套, 可以写属性.
和 html 真的很像.
总结
现在你可以初步这样记住 JSX:
- 必须引入react
- 你可以在里面使用表达式
- 书写的规则和
html很像
不过我在这里先透露一下后面的内容, 你需要注意以下几点:
- 确保每一段独立的 JSX 都有一个最外层的节点包含:
比如: 我们移除最外层的 div,
<p>
Hello React!! 🍅
</p>
<span> {5+3} {exp},</span>
{vol}
<br/>
<img src="https://semantic-ui.com/images/avatar2/small/rachel.png" alt="这段代码表现的样子"/>
你会发现这样就会抛出错误:
image.png
翻译过来是: 相邻的 JSX 元素 必须被一个闭合的标签包含.
- 属性需要变成驼峰式, 比如:
tabindex => tabIndex
-
关键字的属性需要换成另外的样子, 比如:
class => classNamefor => htmlFor
OK! 现在你初步知道 JSX 是什么了.
