[3]React 深入浅出-----JSX简介

来源：互联网发布：巫师2优化补丁编辑：程序博客网时间：2024/05/20 18:43

在使用React的时候，就不得不提JSX， JSX可以理解为JavascriptXML，其标准的官方网站为：https://github.com/jsx/JSX，安装JSX也很简单：

E:\React\learn>npm install -g jsxC:\Users\rodney\AppData\Roaming\npm\jsx-profile-server -> C:\Users\rodney\AppData\Roaming\npm\node_modules\jsx\bin\jsx-profile-serverC:\Users\rodney\AppData\Roaming\npm\jsx-with-server -> C:\Users\rodney\AppData\Roaming\npm\node_modules\jsx\bin\jsx-with-serverC:\Users\rodney\AppData\Roaming\npm\jsx -> C:\Users\rodney\AppData\Roaming\npm\node_modules\jsx\bin\jsxC:\Users\rodney\AppData\Roaming\npm`-- jsx@0.9.89  +-- escodegen@0.0.28  | `-- estraverse@1.3.2  +-- esmangle@0.0.17  | +-- escope@1.0.3  | | `-- estraverse@2.0.0  | +-- esshorten@0.0.2  | | `-- estraverse@1.2.0  | `-- optimist@0.6.1  |   +-- minimist@0.0.10  |   `-- wordwrap@0.0.3  +-- esprima@1.0.4  +-- source-map@0.1.43  | `-- amdefine@1.0.1  `-- source-map-support@0.2.10    `-- source-map@0.1.32

通过这个JSX工具，就可以执行一些jsx命令，把一些jsx文件，转换成为特定的输出。

比如下面的一个helloworld.jsx 文件，

class _Main {static function main(args : string[]) :void {log "Hello, world!";}}

经过下面的命令：

jsx --run example/hello.jsx

其转换输出为：

Hello, world!

那么为什么JSX会用在React里面呢？

下面来具体看一个HelloWorld的例子

在使用React的API我们能够输出一个HelloWorld，代码如下：

<!DOCTYPE html><html>  <head>    <title>hello React</title>    <meta charset="utf-8">  </head>  <body>    <div id="app">      <!-- my app renders here -->    </div>    <script src="react/build/react.js"></script>    <script src="react/build/react-dom.js"></script>    <script>      ReactDOM.render(        React.DOM.h1(          {id: "my-heading"},          React.DOM.span(null,            React.DOM.em(null, "Hell"),            "o"          ),          " world!"        ),        document.getElementById('app')      );    </script>  </body></html>

大家会发现，其实用React.DOM.*的API去输出一个HTML格式的文件，还是挺繁琐的，里面包含了很多的圆括号，以及里面有很多的嵌套，稍微不留神，就写错了。

那么有没有更好的办法呢？其中的方法之一，React借助了JSX的思想，写一个Hmtl的模板，然后通过ReactJS的一个工具（Babel，其实就是一个browser.js）来进行转换

下面是通过Babel工具来转换JSX模板的一个例子。

<!DOCTYPE html><html>  <head>    <title>Hello JSX React</title>    <meta charset="utf-8">  </head>  <body>    <div id="app">      <!-- my app renders here -->    </div>    <script src="react/build/react.js"></script>    <script src="react/build/react-dom.js"></script>    <script src="babel/browser.js"></script>    <script type="text/babel">      ReactDOM.render(        <h1 id="my-heading">          <span><em>Hell</em>o</span> world!        </h1>,        document.getElementById('app')      );    </script>  </body></html>

简单明了，

<h1 id="my-heading">
<span><em>Hell</em>o</span> world!
</h1>,

取代了，

React.DOM.h1(
{id: "my-heading"},
React.DOM.span(null,
React.DOM.em(null, "Hell"),
"o"
),
" world!"
),

简单，方便。

但是需要多引入一个转换，React JSX模板的库：<script src="babel/browser.js"></script>

但是也是值得的，安装方式为（假设已经安装了npm和bower）