声明一个JSX变量
const element = <h1>Hello, world!</h1>;
可见jsx声明的时候既不是字符串也不是HTML标签
嵌入javascript表达式
jsx可以写成多行，建议使用括号包起来，增加可读性
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
JSX指定属性
- 使用引号指定
const element = <div tabIndex="0"></div>;
- 使用大括号指定（支持表达式）
const element = <img src={user.img} />
JSX约定属性名称采用驼峰命名如：tabIndex。class等javascript保留字采用jsx提供的属性名代替，如class采用className
const element = <div className="red"/>
ReactDOM.render(element, document.getElementById('root'));
.red {
width: 100px;
height: 100px;
background: red;
}
image.png
jsx可以防止xss攻击
jsx需要通过编译，在编译的过程中，所有的脚本都将编译成字符串，能有效的防止XSS攻击
JSX声明的变量是react对象
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
以上2段代码实现功能一样，都是react对象
