React中文教程翻译文档 - JSX Syntax语法

JSX：使用XML语法编写JAVASCRIPT

React强烈推荐使用JSX，JSX一套使用XML语法编写JAVASCRIPT的脚本解析工具。

1. 为什么选用JSX

JSX并非唯一的选择，如果不习惯JSX的语法您也可以使用常规JS来编写；但请您了解完JSX的语法后再做决定，我们推荐您使用JSX

下面是使用常规JS使用React的代码：

var link = React.DOM.a({href: 'http://facebook.github.io/react'},'React');

我们推荐使用JSX有下述的几个理由：

非常方便就可以创建一个DOM节点；
跟创建DOM节点一样，开发人员想修改也是很简单的；
对有MXML和XAML使用经历的开发人员很友好，因为它们很相似；

1.1 JSX与JS语法对比

var Nav;
// Input (JSX):
var app = <Nav color="blue" />;
// Output (JS):
var app = Nav({color:'blue'});

注意：为了使用 <Nav />必须先定义Nav

1.2 JSX也允许嵌套使用

var Nav,Profile;
// Input (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>; // Profile是Nav的一个子节点
// Output (JS):
var app = Nav({color:'blue'},Profile({},'click'));

使用 JSX Compiler可以看到JSX是如何被转换成浏览器能识别的JAVASCRIPT；

如果您想使用JSX做为编码工具，请查看Getting Starter中的指引。

2. React和JSX

React和JSX是两个完全不相关的技术，但JSX是React的一个很重要的思想；

2.1 DOM组件

var div = React.DOM.div;
var app = <div className="appClass">Hello,React!</div>;

2.2 复合组件

var MyComponent = React.createClass({/*...*/});
var app = <MyComponent someProperty={true} />;

下篇文章将介绍自定义组件基础Component Basics

3. JSX让代码更简洁

我们知道使用Javascript定义DOM是件很麻烦的事情，比如创建一个DIV、span、h1、h2等；JSX提供一种简洁的方式让这些变得容易，只需使用@jsx的文档块标记即可。

// 有了上一行的@jsx React.DOM文档块标记就可以使用常规的DOM组件（div、span、h1、ul、li、table等）
// 如果想用其它非HTML常见标签才需要定义，如下面的Nav
var Nav;
// Input (JSX):
var tree = <Nav><span /></Nav>;
// Output (JS):
var tree = Nav({},React.DOM.span({}));

4. 使用JavaScript表达式

4.1 属性

使用JavaScript表达式作为属性值，JSX用花括号（{}）代替引号（""）；

// Input (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// Output (JS):
var person = Person({name: window.isLoggedIn ? window.name : ''});

4.2 子节点

跟属性一样，JSX的子节点也可以使用JavaScript表示式；

// Input (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// Output (JS):
var content = Container({},window.isLoggedIn ? <Nav /> : <Login />);

5. 开发工具

跟常规Javascript一样，任何文本工具都可以编写JSX；

6. 开发习惯

JSX是一种简易语法解析
JSX不基于外部开发包
JSX不影响常规Javascript语法

让我们以全新的心态学习类XML的Javascript语法：JSX

您可以修改并重新发布本文，如果您能留下本文的参考连结，万分谢谢！如果您对本文存在疑问，欢迎留言或者直接对本文评论，我会在看到的第一时间回复您。