const element = ;

JXS标签同样可以相互嵌套：（当换行和缩进的时候，使用括号包住它们）

const element = (
  

    
Hello!
    
Good to see you here.
  

);

警告：

因为JSX的特性更接近JavaScript而不是HTML，所以REACT DOM使用camelCase小驼峰命名来定义属性的名字，而不是使用HTML的属性命名。（概括就是：JSX使用小驼峰命名定义属性的名称）

例如，class编程了className,而tabindex则对应着tabIndex.

八、JSX防注入攻击

你可以放心地在JSX当中使用用户输入：

const title = response.potentiallyMaliciousInput;
// 直接使用是安全的：
const element = 
{title}
;

REACT DOM在渲染之前默认会过滤所有传入的值，它可以确保你的引用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效的防止XSS（跨站脚本）攻击。

九、HTMl转义

REACT会将所有要显示到DOM的字符串转义，防止XSS。所以如果JSX中包含转义后的实体字符串比如&copy:(©)最后显示到DOM中不会被正确显示，因此REACT自动吧©中的特殊字符转义了。有几种解决方法：

• 直接使用UTF-8字符©
• 使用对应字符的Unicode编码，查询编码
• 使用数组组装
  {[‘cc ‘, ©, ‘ 2019‘]}
• 直接插入原始的HTML

dangerouslySetInnerHTML={{__html: ‘cc © 2019‘}} />

十、JSX代表Objects
Babel转译器会把JSX转换成一个名为React.createElement()的方法调用。
下面两种代码的作用是完全相同的：

const element = (
  
"greeting">
    Hello, world!
  

);


const element = React.createElement(
  ‘h1‘,
  {className: ‘greeting‘},
  ‘Hello, world!‘
);

React. createElement()这个方法首先会进行一些避免BUG的检查，之后返回一个类似下面例子的对象：

// 注意: 以下示例是简化过的（不代表在 React 源码中是这样）
const element = {
  type: ‘h1‘,
  props: {
    className: ‘greeting‘,
    children: ‘Hello, world‘
  }
};

这样的对象被成为“REACT元素”。它代码所有你在屏幕上看到的东西。
REACT通过读取这些对象来构建DOM并保持数据内容一致。
十一、注释
在JSX里使用注释也很简单，就是沿用JavaScript，唯一要注意的是在一个组件的子元素位置使用注释要用{}包起来。

var content = (
  
);

十二、自定义HTML属性
如果在JSX中使用的属性不存在与HTML的规范中，这高属性会被忽略。如果使用自定义属性，可以用data-前缀。
可访问性属性的前缀aria-也是支持的。
支持的标签和属性
如果你要使用的某些标签或属性不在这些支持列表里面就可能被REACT忽略，必须哟使用的话可以提ISSue，或者用前面提到的dangerouslySetInerHTML.
十三、属性扩展
有时候你需要给组件设置多个属性，你不想一个个写下这些属性，或者有时候你甚至不知道这些属性的名称，这时候spread attributes的功能就很有用了。
比如：

var props = {};
props.foo = x;
props.bar = y;
var component = ;

props对象的属性会被设置程Component的属性。
属性也可以被覆盖：

ar props = { foo: ‘default‘ };
var component = ‘override‘} />;
console.log(component.props.foo); // ‘override‘

写在后面的属性值会被覆盖前面的属性。

ar props = { foo: ‘default‘ };
var component = ‘override‘} />;
console.log(component.props.foo); // ‘override‘

参考资料

React 官方中文文档
React 中文文档
React - JSX语法详解（附样例）

对对对