React 用常量（const）来储存元素（Element），元素一旦被创建就不可更改。React DOM 可以把一个 React 元素渲染成浏览器 DOM 元素。React 元素使用 JSX 来定义。

JSX（JavaScript XML）

它是 JavaScript 的一个语法拓展，和 HTML 类似，但有很多不同。HTML 是一门标记语言，而 JSX 在语法上更接近 JavaScript。

嵌入表达式

JSX 可以在标签中嵌入各种表达式。

// 使用 { } 在 JSX 中嵌入 JavaScript 表达式
<h1>{this.props.heading}</h1>
<img src={getSource(img)}></img>

这有点类似 PHP 的 <?php ?>

<h1><?php echo $this.props.heading; ?></h1>
<img src="<?php echo getSource(img); ?>"></img>

相信你也注意到了，在 JSX 标签中定义字符串属性的值时，不需要在表达式两边加上引号，而 PHP 就需要。这是因为，PHP 是在 HTML 中嵌入 PHP 代码块，而不是单独的表达式；JSX 的表达式是元素的一部分，JSX 本身也是一个表达式。

属性名

JSX 的属性名与 HTML 也有区别，它采用的是更接近 JavaScript 的属性名。

<!-- HTML -->
<div class="test"></div>
<div tabindex=0></div>

// JSX
<div className="test"></div>
<div tabIndex=0></div>

最主要的区别是：

1. JSX 的属性名采用「小驼峰命名法（camelCase）」；
2. 在 HTML 中的 class 属性，在 JSX 为 className（也就是 HTML 标签属性和 JavaScript 对象属性的区别）。

元素（Element）

使用 const 和 JSX 表达式创建一个 React 元素。

const element = <div>An Element</div>;

一个元素可以有很多的子元素，就和 XML 语法一样。在创建 React 元素时需要换行，则必须用括号将 JSX 表达式包裹起来。

const element = (
	<div className="container">
		<h1>Example</h1>
		<p>Content.</p>
	</div>
);