接下来我们就要讲到JSX语法了，在我们讲它之前，我们先引入一个概念叫语法糖。
听到这个名字首先我们可能会想到一个词叫”糖衣炮弹“，那么什么叫糖衣炮弹呢，就是给你说各种好听的话，来迷惑你，但是稍微一体会对方这句话的意思，才能发现内藏的恶毒含义，其实这个词来源于医学，我们吃的药片可能很酷，很难入口，于是医药公司就在很苦的药外层包了一层糖衣，让我们把药片含在嘴里的时候，发现好甜，但是其里面的真正起药物作用的是里面很苦的心。
那么到底什么是语法糖呢？其实就是一种比较简单的语法，它对这门语言的功能其实没有影响，但是可以让程序员更方便的去使用它，通畅了来说，语法糖可以增加程序的可读性，从而减少程序代码出错的机会。
好了，我们接下来再回头来看我们的JSX语法，首先我要告诉大家的是JSX语法就是一种语法糖，它存在的目的就是让我们程序员使用起来更简单，代码可读性更强，实际上没”药用价值“。
const element=<h1>Hello,World!</h1>;
上述代码在我们传统js里面是不可以的，等号后面的内容必须用双引号包起来：
const element="<h1>Hello,World!</h1>”;
注意：有同学不认识const建议先去学习一下es6，不会es6的话，再往后寸步难行，在这里简单介绍一下const，我们可以把它理解成var声明变量，只不过const声明的变量不允许被修改。
上述不加引号的标签语法就叫JSX（JavaScript XML）。
JSX语法的原则是遇到尖括号“<”，按照解析HTML的方式解析，遇到花括号“{}”则按照解析JavaScript方式解析，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello,World</title>
</head>
<body>
<div id="root"></div>
<!--注意这里有个div#root-->
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
// 注意这里改成type="text/babel"
const name='yang';
const element=<h1>Hello,{name}</h1>;
//花括号里面当js去解析
ReactDOM.render(
//渲染方法，这里暂时不需要看懂，只需要明白这个方法是将element放进了#root中
element,
document.getElementById('root')
)
</script>
</body>
</html>
我们可以认为所谓的JSX语法，其实本质就是XML与JavaScript结合的一种语法而已；
我们还要了解一下如果不用JSX语法，我们的代码将写成什么样子？
使用JSX：
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
不使用JSX:
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
显而易见，上面使用JSX更简单，所以我们认为JSX语法是语法糖。