React中并不强制要求使用JSX，但JSX确实一种挺直观方便的JavaScript扩展。

---

JSX 简介

举一个常量声明的示例如下：

const element = <h1>zhuanfou.com</h1>;

上述的常量值不是字符串类型，也不是HTML；这就是所谓的JSX，在JavaScript中杂糅HTML语法。JSX有种模板语言的感觉，但是用在JavaScript中的。但是使用JSX前，请先参照《React 开始》章节进行JSX的环境设置。

在JSX中嵌入表达式

如下所示，在JSX中声明了一个名为slogan的变量：

const slogan = '反清复明';
const element = <h1> zhuanfou.com {slogan} </h1>;

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

运行一下

JSX中避免同时使用大括号和引号

如下所示，在JSX中若使用引号，则是将属性值指定为字符串字面量：

const element = <div tabIndex="0"></div>

而若使用大括号，则是在属性值中插入一个JavaScript表达式，此时，就不要在大括号外面加上引号，否则会被认为要传入字符串字面量，从而出错：

const element = <img src={slogan.imageUrl}></img>;

---

JSX虽然类似HTML，但是JSX是属于JavaScript语言的扩展，因此语法上更加接近JavaScript，因此对于属性名称的声明，则采用camelCase（小驼峰）的方式来命名。例如上面的tabindex就变成了tabIndex。

---

JSX 闭合标签

假若某个标签中没有内容，则可以使用/>的方式来闭合标签：

const element = <img src={slogan.imageUrl} />;

JSX 多个子元素

JSX标签可包含多个子元素：

const element = (
  <div>
    <h1>反清复明</h1>
    <h2>地振高冈，一派西山千古秀</h2>
    <h2>门朝大海，三合河水万年流</h2>
  </div>
);

JSX 防止注入攻击

React Dom在渲染所有输入内容前，会默认进行转义；因此，完全不用担心因为使用React而导致的XSS跨站伪造请求攻击。

const slogan = 用户输入的内容;

// 直接使用是安全的
const element = <h1> zhuanfou.com {slogan} </h1>;

JSX 转译

若不使用JSX，则需要用到React.createElement()来创建React元素：

const element = React.createElement(
  'h1',
  {className: 'justice'},
  '反清复明'
);

使用JSX，其实就是将JSX代码转译成使用React.createElement()方法的代码；因此上方代码与下方代码是完全等效的：

const element = (
  <h1 className="justice">
    反清复明
  </h1>
);

---

下一节将展示如何将上述生成的React元素渲染成DOM。