Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 14 additions & 6 deletions docs/docs/02-displaying-data.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: 显示数据
layout: docs
permalink: displaying-data-zh-CN.html
prev: why-react-zh-CN.html
next: jsx-in-depth.html
next: jsx-in-depth-zh-CN.html
---

用户界面能做的最基础的事就是显示一些数据。React 让显示数据变得简单,当数据变化的时候,用户界面会自动同步更新。
Expand Down Expand Up @@ -80,11 +80,19 @@ React 组件非常简单。你可以认为它们就是简单的函数,接受 `

我们得出解决这个问题最好的方案是通过 JavaScript 直接生成模板,这样你就可以用一个真正语言的所有表达能力去构建用户界面。为了使这变得更简单,我们做了一个非常简单、**可选**类似 HTML 语法 ,通过函数调用即可生成模板的编译器,称为 JSX。

**JSX 让你可以用 HTML 语法去写 JavaScript 函数调用** 为了在 React 生成一个链接,通过纯 JavaScript 你可以这么写: `React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello React!')`。通过 JSX 这就变成了 `<a href="http://facebook.github.io/react/">Hello React!</a>`。我们发现这会使搭建 React 应用更加简单,设计师也偏向用这用语法,但是每个人可以有它们自己的工作流,所以**JSX 不是必须用的。**
**JSX 让你可以用 HTML 语法去写 JavaScript 函数调用** 为了在 React 生成一个链接,通过纯 JavaScript 你可以这么写:

JSX 非常小;上面“hello, world”的例子使用了 JSX 所有的特性。想要了解更多,请看 [深入理解 JSX](/react/docs/jsx-in-depth.html)。或者直接使用[在线 JSX 编译器](/react/jsx-compiler.html)观察变化过程
`React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello React!')`

JSX 类似于 HTML,但不是完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas.html) 学习关键区别。
通过 JSX 这就变成了

`<a href="http://facebook.github.io/react/">Hello React!</a>`。

我们发现这会使搭建 React 应用更加简单,设计师也偏向用这用语法,但是每个人可以有它们自己的工作流,所以**JSX 不是必须用的。**

JSX 非常小;上面“hello, world”的例子使用了 JSX 所有的特性。想要了解更多,请看 [深入理解 JSX](/react/docs/jsx-in-depth-zh-CN.html)。或者直接使用[在线 JSX 编译器](/react/jsx-compiler.html)观察变化过程。

JSX 类似于 HTML,但不是完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas-zh-CN.html) 学习关键区别。

最简单开始学习 JSX 的方法就是使用浏览器端的 `JSXTransformer`。我们强烈建议你不要在生产环境中使用它。你可以通过我们的命令行工具 [react-tools](http://npmjs.org/package/react-tools) 包来预编译你的代码。

Expand Down Expand Up @@ -112,6 +120,6 @@ React 已经为 HTML 标签提供内置工厂方法。

```javascript
var root = React.DOM.ul({ className: 'my-list' },
React.DOM.li(null, 'Text Content')
);
React.DOM.li(null, 'Text Content')
);
```
2 changes: 1 addition & 1 deletion docs/docs/02.1-jsx-in-depth.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -137,4 +137,4 @@ var content = (

> 注意:
>
> JSX 类似于 HTML,但不完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas.html) 了解主要不同。
> JSX 类似于 HTML,但不完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas-zh-CN.html) 了解主要不同。
2 changes: 1 addition & 1 deletion docs/docs/02.2-jsx-spread.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,4 +52,4 @@ Props 应该被当作禁止修改的。修改 props 对象可能会导致预料

## 这个奇怪的 `...` 标记是什么?

这个 `...` 操作符(也被叫做)已经被 [ES6 数组](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator) 支持。相关的还有 ES7 规范草案中的 [Object 剩余和展开属性(Rest and Spread Properties)](https://github.com/sebmarkbage/ecmascript-rest-spread)。我们利用了这些还在制定中标准中已经被支持的特性来使 JSX 拥有更优雅的语法。
这个 `...` 操作符(增强的操作符)已经被 [ES6 数组](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator) 支持。相关的还有 ES7 规范草案中的 [Object 剩余和展开属性(Rest and Spread Properties)](https://github.com/sebmarkbage/ecmascript-rest-spread)。我们利用了这些还在制定中标准中已经被支持的特性来使 JSX 拥有更优雅的语法。
2 changes: 1 addition & 1 deletion docs/docs/03-interactivity-and-dynamic-uis.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ prev: jsx-gotchas-zh-CN.html
next: multiple-components-zh-CN.html
---

我们已经学习如何使用 React [显示数据](/react/docs/displaying-data.html)。现在让我们来学习如何创建交互式界面。
我们已经学习如何使用 React [显示数据](/react/docs/displaying-data-zh-CN.html)。现在让我们来学习如何创建交互式界面。


## 简单例子
Expand Down
1 change: 1 addition & 0 deletions docs/docs/06-transferring-props.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,7 @@ z; // { a: 3, b: 4 }
## 使用 Underscore 来传递

如果不使用 JSX,可以使用一些库来实现相同效果。Underscore 提供 `_.omit` 来过滤属性,`_.extend` 复制属性到新的对象。

```javascript
var FancyCheckbox = React.createClass({
render: function() {
Expand Down
2 changes: 1 addition & 1 deletion docs/docs/07-forms.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ next: working-with-the-browser-zh-CN.html

诸如 `<input>`、`<textarea>`、`<option>` 这样的表单组件不同于其他组件,因为他们可以通过用户交互发生变化。这些组件提供的界面使响应用户交互的表单数据处理更加容易。

关于 `<form>` 事件详情请查看 [表单事件](/react/docs/events.html#form-events)。
关于 `<form>` 事件详情请查看 [表单事件](/react/docs/events-zh-CN.html#form-events)。

## 交互属性

Expand Down
1 change: 1 addition & 0 deletions docs/docs/flux-overview.zh-CN.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
id: flux-overview-zh-CN
title: Flux 应用架构
permalink: flux-overview-zh-CN.html
---

本页被移到了 Flux 网站。[点击访问](http://facebook.github.io/flux/docs/overview.html)。
1 change: 1 addition & 0 deletions docs/docs/flux-todo-list.zh-CN.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
id: flux-todo-list-zh-CN
title: Flux TodoMVC 教程
permalink: flux-todo-list-zh-CN.html
---

本页被移到了 Flux 网站。[点击访问](http://facebook.github.io/flux/docs/todo-list.html)。
1 change: 1 addition & 0 deletions docs/docs/getting-started.zh-CN.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
id: getting-started-zh-CN
title: 入门教程
permalink: getting-started-zh-CN.html
next: tutorial-zh-CN.html
redirect_from: "docs/index-zh-CN.html"
---
Expand Down