Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
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
Prev Previous commit
Sync up previous Chinese documents and several minor updates on formats.
  • Loading branch information
camsong committed Dec 14, 2014
commit 09e0dee307407117f97b21f707f44b0ec4890a9e
4 changes: 2 additions & 2 deletions docs/docs/01-why-react.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript

仅仅只要表达出你的应用程序在任一个时间点应该长的样子,然后当底层的数据变了,React 会自动处理所有用户界面的更新。

### 表达能力 (Declarative)
### 声明式 (Declarative)

当数据变化了,React 概念上是类似点击了更新的按钮,但仅会更新变化的部分。
数据变化后,React 概念上与点击“刷新”按钮类似,但仅会更新变化的部分。

## 构建可组合的组件

Expand Down
36 changes: 34 additions & 2 deletions docs/docs/02-displaying-data.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ prev: why-react-zh-CN.html
next: jsx-in-depth.html
---

通过用户界面,最基础可以做的事就是显示一些数据。React 让显示数据变得简单,当数据变化的时候,用户界面会自动同步更新。
用户界面能做的最基础的事就是显示一些数据。React 让显示数据变得简单,当数据变化的时候,用户界面会自动同步更新。


## 开始

Expand Down Expand Up @@ -54,6 +55,7 @@ setInterval(function() {
}, 500);
```


## 被动更新 (Reactive Updates)

在浏览器中打开 `hello-react.html` ,在输入框输入你的名字。你会发现 React 在用户界面中只改变了时间, 任何你在输入框输入的内容一直保留着,即使你没有写任何代码来完成这个功能。React 为你解决了这个问题,做了正确的事。
Expand All @@ -62,6 +64,7 @@ setInterval(function() {

对这个组件的输入称为 `props` - "properties"的缩写。得益于 JSX 语法,它们通过参数传递。你必须知道在组件里,这些属性是不可改变的,也就是说 **`this.props` 是只读的**。


## 组件就像是函数

React 组件非常简单。你可以认为它们就是简单的函数,接受 `props` 和 `state` (后面会讨论) 作为参数,然后渲染出 HTML。正是应为它们是这么的简单,这使得它们非常容易理解。
Expand All @@ -70,6 +73,7 @@ React 组件非常简单。你可以认为它们就是简单的函数,接受 `
>
> **只有一个限制**: React 组件只能渲染单个根节点。如果你想要返回多个节点,它们*必须*被包含在同一个节点里。


## JSX 语法

我们坚信组件是正确方法去做关注分离,而不是通过“模板”和“展示逻辑”。我们认为标签和生成它的代码是紧密相连的。此外,展示逻辑通常是很复杂的,通过模板语言实现这些逻辑会产生大量代码。
Expand All @@ -80,6 +84,34 @@ React 组件非常简单。你可以认为它们就是简单的函数,接受 `

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

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

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


## 没有 JSX 的 React

你完全可以选择是否使用 JSX,并不是 React 必须的。你可以通过 `React.createElement` 来创建一个树。第一个参数是标签,第二个参数是一个属性对象,每三个是子节点。

```javascript
var child = React.createElement('li', null, 'Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child);
React.render(root, document.body);
```

方便起见,你可以创建基于自定义组件的速记工厂方法。

```javascript
var Factory = React.createFactory(ComponentClass);
...
var root = Factory({ custom: 'prop' });
React.render(root, document.body);
```

React 已经为 HTML 标签提供内置工厂方法。

```javascript
var root = React.DOM.ul({ className: 'my-list' },
React.DOM.li(null, 'Text Content')
);
```
14 changes: 9 additions & 5 deletions docs/docs/02.1-jsx-in-depth.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ next: jsx-spread-zh-CN.html

[JSX](http://facebook.github.io/jsx/) 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。


## 为什么要用 JSX?

你不需要为了 React 使用 JSX,可以直接使用原生 JS。但是,我们建议使用 JSX 是因为它能精确,也是常用的定义包含属性的树状结构的语法。
Expand All @@ -18,9 +19,10 @@ XML 有固定的标签开启和闭合的优点。这能让复杂的树更易于

它没有修改 JavaScript 语义。

## HTML 标签 对比 React 模块

React 可以渲染 HTML 标签 (strings) 或 React 模块 (classes)。
## HTML 标签对比 React 组件

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。

要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。

Expand All @@ -29,21 +31,22 @@ var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);
```

要渲染 React 模块,只需创建一个大写字母开头的本地变量。
要渲染 React 组件,只需创建一个大写字母开头的本地变量。

```javascript
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);
```

React 的 JSX 里约定分别使用首字母大、小写来区分本地模块的类和 HTML 标签。
React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。

> 提示:
>
> 由于 JSX 就是 JavaScript,一些标识符像 `class` 和 `for` 不建议作为 XML
> 属性名。作为替代,React DOM 使用 `className` 和 `htmlFor` 来做对应的属性。


## 转换(Transform)

JSX 把类 XML 的语法转成原生 JavaScript,XML 元素、属性和子节点被转换成 `React.createElement` 的参数。
Expand Down Expand Up @@ -82,6 +85,7 @@ var app = React.createElement(
> 的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过
> `React.createElement` 里的校验代码。


## JavaScript 表达式

### 属性表达式
Expand Down Expand Up @@ -133,4 +137,4 @@ var content = (

> 提示:
>
> JSX 类似于 HTML,但不完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas.html) 了解主要不同。
> JSX 类似于 HTML,但不完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas.html) 了解主要不同。
15 changes: 9 additions & 6 deletions docs/docs/02.2-jsx-spread.zh-CN.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
---
id: jsx-spread-zh-CN
title: JSX 展开属性 (Spread Attributes)
title: JSX 展开属性
permalink: jsx-spread-zh-CN.html
prev: jsx-in-depth-zh-CN.html
next: jsx-gotchas-zh-CN.html
---

如果你事先知道模块需要的全部 Props(属性),JSX 很容易地这样写:
如果你事先知道组件需要的全部 Props(属性),JSX 很容易地这样写:

```javascript
var component = <Component foo={x} bar={y} />;
```


## 修改 Props 是不好的,明白吗

如果你不知道要设置哪些 Props,那么现在最好不要设置它:
Expand All @@ -26,9 +27,10 @@ next: jsx-gotchas-zh-CN.html

Props 应该被当作禁止修改的。修改 props 对象可能会导致预料之外的结果,所以最好不要去修改 props 对象。

## 扩展属性 (Spread Attributes)

现在你可以使用 JSX 的新特性 - 扩展属性:
## 展开属性(Spread Attributes)

现在你可以使用 JSX 的新特性 - 展开属性:

```javascript
var props = {};
Expand All @@ -37,7 +39,7 @@ Props 应该被当作禁止修改的。修改 props 对象可能会导致预料
var component = <Component {...props} />;
```

传入对象的属性会被复制到模块内
传入对象的属性会被复制到组件内

它能被多次使用,也可以和其它属性一起用。注意顺序很重要,后面的会覆盖掉前面的。

Expand All @@ -47,6 +49,7 @@ Props 应该被当作禁止修改的。修改 props 对象可能会导致预料
console.log(component.props.foo); // 'override'
```


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

这个 `...` 操作符(也被叫做)已经被 [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 拥有更优雅的语法。
20 changes: 13 additions & 7 deletions docs/docs/getting-started.zh-CN.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,28 @@
---
id: getting-started-zh-CN
title: 入门教程
next: tutorial.html
next: tutorial-zh-CN.html
redirect_from: "docs/index-zh-CN.html"
---

## JSFiddle

开始 Hack React 的最简单的方法是用下面 JSFiddle 的Hello Worlds
开始 Hack React 的最简单的方法是用下面 JSFiddle 的Hello Worlds

* **[React JSFiddle](http://jsfiddle.net/reactjs/69z2wepo/)**
* [React JSFiddle without JSX](http://jsfiddle.net/reactjs/5vjqabv3/)

## 入门教程包 (Starter Kit)

开始先下载入门教程包
开始先下载入门教程包

<div class="buttons-unit downloads">
<a href="/react/downloads/react-{{site.react_version}}.zip" class="button">
下载入门教程 {{site.react_version}}
</a>
</div>

在入门教程包的根目录,创建一个含有下面代码的 `helloworld.html`
在入门教程包的根目录,创建一个含有下面代码的 `helloworld.html`

```html
<!DOCTYPE html>
Expand Down Expand Up @@ -93,7 +94,7 @@ React.render(
<head>
<title>Hello React!</title>
<script src="build/react.js"></script>
<!-- No need for JSXTransformer! -->
<!-- 不需要 JSXTransformer -->
</head>
<body>
<div id="example"></div>
Expand All @@ -102,11 +103,16 @@ React.render(
</html>
```


## 想用 CommonJS?

如果你想在一个模块系统里使用 React,[fork 我们的代码](http://github.com/facebook/react), `npm install` 然后运行 `grunt`。一个漂亮的 CommonJS 模块集将会被生成。我们的 `jsx` 转换工具可以很轻松的集成到大部分打包系统里(不仅仅是 CommonJS)。
如果你想在 [browserify](http://browserify.org/),[webpack](http://webpack.github.io/) 或者或其它兼容CommonJS的模块系统里使用 React,只要使用 [`react` npm 包](https://www.npmjs.org/package/react) 即可。而且,`jsx` 转换工具可以很轻松的地集成到大部分打包系统里(不仅仅是 CommonJS)。


## 下一步

去看看[入门教程](/react/docs/tutorial.html),然后学习其他在 `/examples` 目录里的示例代码。祝你好运,欢迎来到 React 的世界。
去看看[入门教程](/react/docs/tutorial.html) 和入门教程包 `examples` 目录下的其它例子学习更多。

我们还有一个社区开发者共建的 Wiki:[workflows, UI-components, routing, data management etc.](https://github.com/facebook/react/wiki/Complementary-Tools)

恭喜你,欢迎来到 React 的世界。