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

标签: ReactJSXFaceBookBabel
208人阅读 评论(0) 收藏 举报
分类:

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

E:\React\learn>npm install -g jsx
C:\Users\rodney\AppData\Roaming\npm\jsx-profile-server -> C:\Users\rodney\AppData\Roaming\npm\node_modules\jsx\bin\jsx-profile-server
C:\Users\rodney\AppData\Roaming\npm\jsx-with-server -> C:\Users\rodney\AppData\Roaming\npm\node_modules\jsx\bin\jsx-with-server
C:\Users\rodney\AppData\Roaming\npm\jsx -> C:\Users\rodney\AppData\Roaming\npm\node_modules\jsx\bin\jsx
C:\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)


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

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

https://babeljs.io/repl




@ 把html转换成JSX

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




2
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:385772次
    • 积分:6344
    • 等级:
    • 排名:第4081名
    • 原创:228篇
    • 转载:0篇
    • 译文:5篇
    • 评论:157条
    博客专栏