JSX

ReactNative 2017-04-10

JSX


第一个模板







var h1=<h1>Hello world</h1>;
即像js又像html,The part that looks like HTML, <h1>Hello world</h1>, is something called JSX.


 JSX和javascript对比。可见javascript可读性差



JSX是javascript的扩展,JSX code looks a lot like HTML.

What does "syntax extension" mean?

In this case, it means that JSX is not valid JavaScript. Web browsers can't read it!(不能在浏览器运行)必须要编译后才能运行了,不是解释型的了,也就是说在浏览器运行之前需要JSX编译器将其转换成一般的javascript


JSX元素可以保存在变量中

Here's an example of several JSX elements being stored in an object:

var Pistons2004 = { center: <li>Ben Wallace</li>, powerForward: <li>Rasheed Wallace</li>, smallForward: <li>Tayshaun Prince</li>, shootingGuard: <li>Richard Hamilton</li>, pointGuard: <li>Chauncey Billups</li> };

Here's an example of a JSX element being saved in a variable:

var navBar = <nav>I am a nav bar</nav>;

If a JSX expression takes up more than one line, then you should wrap the multi-line JSX expression in parentheses. This looks strange at first, but you get used to it:(如果不止一行,要用括号)

( <a href="https://www.google.net"> <h1> Click me I am Goooooogle </h1> </a> )
可以将括号中的赋值给变量

本文由 方方無 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论

shijiebei 365bet manbetx 188bet xinshui caipiao 95zz tongbaoyule beplay 88bifa 18luck betway bwin hg0088 aomenjinshayulecheng ca88 shenbotaiyangcheng vwin w88 weide