JSX是react语法基础，也是react的核心部分。
它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构（DOM结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的JS语言。
我们可以完全不使用JSX语法，只使用JS语法，但还是推荐使用JSX，个人感觉JSX语法用起来真的太棒啦，只不过刚接触的时候你会觉得这种语法太奇怪，看起来简直乱七八糟。一旦你习惯并且熟悉之后，相信我，你就真的回不去了。代码非常易于阅读，你再回去阅读JS的代码，你内心是拒绝的。
当我们使用JSX语法后，你必须要引入babel的JSX解析器，把JSX转化成JS语法，这个工作会由babel自动完成。同时引入babel后，你就可以使用新的es6语法，babel会帮你把es6语法转化成es5语法，兼容更多的浏览器。
下面是官网的一个简单的栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="vendor-js/react.js"></script>
<script src="vendor-js/react-dom.js"></script>
<script src="vendor-js/babel-core/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
我们可以看到最后一个script标签中的type属性为text/babel而不是text/javascript。这是因为React独有的JSX语法跟JavaScript不兼容，所以凡是使用JSX的地方都要加上<script type="text/babel">
如果只是使用JS语法写的话，代码如下:
<script type="text/javascript">
ReactDOM.render(
React.DOM.h1(null,'hello,world!'),
document.getElementById('example')
);
</script>
在上面，我们一共引用了三个库：react.js, react-dom.js, browser.js
react.js 是react的核心库。
react-dom.js 是提供与DOM相关功能。
browser.js 作用则是将JSX语法转化为JavaScript语法。
将 JSX 语法转为 JavaScript 语法，这一步很消耗时间。现在前端项目，都会使用前端工程化，不会直接在html页面中直接写js代码，写好的js代码都会使用工具进行编译压缩等。这样的话，我们的jsx也会通过编译直接转化成js语法，让浏览器直接使用。
ReactDOM.render是 React最基本的用法，其作用是将模板转化为HTML语言，并将其插入到指定的DOM节点。
未完待续。。。
