关于 react 中 jsx 深入了解

    原始javascript 模板插入要将html 代码的内容转化为字符串，其中若遇到一些特殊字符则需要进行转义，例如" 要变成 "  ,而且这样做代码可读性差，所以这种方法并不适合生产开发。jsx 的出现就解决了以上问题，react 中用jsx 直接返回 html 代码，也能在浏览器上显示出来，那么jsx 到底是什么？

jsx 是fackbook为react框架开发的一个语法糖，其中x为xml, 其实它本质还是会被解析成js,因为只有这样浏览器才能识别出来，之所以要写成jsx是为了代码的可读性和可维护性。下面来看看react 官网jsx 的写法

var Hello = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

可以看到 代码第三行直接return 一行 html 标签，这在原始javascript 并不可行，实际上它非jsx写法是以下样子：

var Hello = React.createClass({
  displayName: 'Hello',
  render: function() {
    return React.createElement("div", null, "Hello ", this.props.name);
  }
});

ReactDOM.render(
  React.createElement(Hello, {name: "World"}),
  document.getElementById('container')
);

如果想要使用jsx的话，除了引入react库文件外，还要有相关的解析，官方推荐用npm 安装相关文件,如果不想用npm的可以下载官网相关的压缩包，然后引入html中

<script src="./react-15.2.1/build/react.js"></script>
    <script src="./react-15.2.1/build/react-dom.js"></script>
    <script src="./react-15.2.1/build/browser.min.js"></script>