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

发布时间：2020-12-15 06:55:47 所属栏目：百科来源：网络整理

导读：在使用React的时候，就不得不提JSX， JSX可以理解为JavascriptXML，其标准的官方网站为：https://github.com/jsx/JSX，安装JSX也很简单： E:Reactlearnnpm install -g jsxC:UsersrodneyAppDataRoamingnpmjsx-profile-server - C:UsersrodneyAppDa

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

E:Reactlearn>npm install -g jsx
C:UsersrodneyAppDataRoamingnpmjsx-profile-server -> C:UsersrodneyAppDataRoamingnpmnode_modulesjsxbinjsx-profile-server
C:UsersrodneyAppDataRoamingnpmjsx-with-server -> C:UsersrodneyAppDataRoamingnpmnode_modulesjsxbinjsx-with-server
C:UsersrodneyAppDataRoamingnpmjsx -> C:UsersrodneyAppDataRoamingnpmnode_modulesjsxbinjsx
C:UsersrodneyAppDataRoamingnpm
`-- 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,
"o"
),
" world!"
),

简单，方便。

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

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

好了，通过上面的文字和描述，大家应该都能了解JSX的基本用法了。下面的链接就是一些，学习JSX比较好的网站。

@ 把JSX转换成React识别的React.DOM.*的语法

https://babeljs.io/repl

@ 把html转换成JSX

http://magic.reactjs.net/htmltojsx.htm

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!