在使用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,
"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