React-JSX

jsx是javascript的语法扩展

const element =

Hello, world!

;

在jsx中插入表达式

可以将任何js表达式通过包裹在{}中，嵌入到 jsx当中

const formatName = user => {
return user.firstName + ' ' + user.lastName;
};

const user = {
firstName: 'Joe',
lastName: 'Zhou'
};

const element = (

Hello, {formatName(user)}

);

ReactDom.render(
element,
document.getElementById('root')
);
ps:推荐将jsx拆分成多行显示，可以增强代码可读性，将jsx包含在圆括号中可以避免一些不必要的陷阱。

jsx也是js表达式

由于jsx也是js表达式，所以可以像操作一般表达式一样操作jsx，比如赋值给变量，条件判断，循环，参数，返回值等。

const getGreeting = user => {
if (user) {
return (

Hello , {formatName(user)}

);
}
else {
return (

Hello ,Stranger...

);
}
};
为jsx制定字符串字面量属性

{
const element = (

);
}
借助大括号在属性中插入js表达式

{
const element = (

);
}
ps:通过{}给属性嵌入js表达式时，属性值不能用引号包裹。也就是说设置同一属性时大括号和引号不能同时使用。
由于jsx更接近于js，所以ReactDom遵从驼峰命名规则，而不是html的规则，如class应该写成className，tableindex应写成tableIndex。

jsx可以避免注入攻击

React DOM渲染前会转义所有的嵌入值，将其转换为字符串，可以避免跨站点攻击(XSS)。

jsx是一个对象

const element = (

Hello

);

// 等价于
React.createElement(
div,
{
tabIndex: 0
},
'Hello'
);