React-JSX

jsx是javascript的语法扩展

const element = <h1>Hello, world!</h1>;

在jsx中插入表达式

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

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

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

const element = (
    <h2>
	    Hello, {formatName(user)}
    </h2>
);

ReactDom.render(
    element,
    document.getElementById('root')
);

ps:推荐将jsx拆分成多行显示，可以增强代码可读性，将jsx包含在圆括号中可以避免一些不必要的陷阱。

jsx也是js表达式

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

const getGreeting = user => {
    if (user) {
	    return (
		    <div>
			    Hello , {formatName(user)}
		    </div>
	    );
    }
    else {
	    return (
		    <div>
			    Hello ,Stranger...
		    </div>
	    );
    }	
};

为jsx制定字符串字面量属性

 {
    const element = (
	    <div tabIndex = '0'></div>
    );
}

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

{
    const element = (
	    <img src={user.avatarUrl} alt={user.userName}/>
    );
}

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

jsx可以避免注入攻击

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

jsx是一个对象

const element = (
	<div tabIndex = '0'>Hello</div>
);

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