From c3948483d975f57af4e2fedb426969f7c8d61563 Mon Sep 17 00:00:00 2001 From: ray Date: Tue, 11 Mar 2014 17:36:57 +0800 Subject: [PATCH 1/7] add chinese translation for 01-why-react.md --- docs/docs/01-why-react.zh-CN.md | 35 +++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 docs/docs/01-why-react.zh-CN.md diff --git a/docs/docs/01-why-react.zh-CN.md b/docs/docs/01-why-react.zh-CN.md new file mode 100644 index 0000000000000..f2d388fe30882 --- /dev/null +++ b/docs/docs/01-why-react.zh-CN.md @@ -0,0 +1,35 @@ +--- +id: why-react-zh-CN +title: 为什么使用 React? +layout: docs +permalink: why-react-zh-CN.html +next: displaying-data.html +--- + +React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 **[MVC](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** 中的 **V**（视图）。 + +我们创造 React 是为了解决一个问题：**构建随着时间数据不断变化的大规模应用程序**。为了达到这个目标，React 采用下面两个主要的思想。 + +### 简单 + +仅仅只要表达出你的应用程序在任一个时间点应该长的样子，然后当底层的数据变了，React 会自动更新所有UI的变化。 + +### 表达能力(Declarative) + +当数据变化了，React 概念上是类似点击了更新的按钮，但仅会更新变化的部分。 + +## 构建可组合的组件 + +React is all about building reusable components. In fact, with React the *only* thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy. + +React 是所有关于创建可以复用的组件。事实上，通过 React 你*唯一*要做的事情就是构建组件。得益于其良好的封装性，组件使代码复用、测试和关注分离（separation of concerns）更加简单。 + +## 给它5分钟的时间 + +React挑战了很多传统的知识，第一眼看上去可能很多想法有点疯狂。当你阅读这篇指南，请[给它5分钟的时间](http://37signals.com/svn/posts/3124-give-it-five-minutes)；那些疯狂的想法已经帮助 Facebook 和 Instagram 从里到外创建了上千的组件了。 + +## 了解更多 + +你可以从这篇[博客](http://facebook.github.io/react/blog/2013/06/05/why-react.html)了解更多我们创造 React 的动机。 + + From 69767d4b792d2192ccd0e5b2cbfa29b401d798fd Mon Sep 17 00:00:00 2001 From: ray Date: Tue, 11 Mar 2014 17:42:03 +0800 Subject: [PATCH 2/7] fix some translation error --- docs/docs/01-why-react.zh-CN.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/docs/01-why-react.zh-CN.md b/docs/docs/01-why-react.zh-CN.md index f2d388fe30882..b84c92dd27f80 100644 --- a/docs/docs/01-why-react.zh-CN.md +++ b/docs/docs/01-why-react.zh-CN.md @@ -20,9 +20,7 @@ React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript ## 构建可组合的组件 -React is all about building reusable components. In fact, with React the *only* thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy. - -React 是所有关于创建可以复用的组件。事实上，通过 React 你*唯一*要做的事情就是构建组件。得益于其良好的封装性，组件使代码复用、测试和关注分离（separation of concerns）更加简单。 +React 都是关于创建可复用的组件。事实上，通过 React 你*唯一*要做的事情就是构建组件。得益于其良好的封装性，组件使代码复用、测试和关注分离（separation of concerns）更加简单。 ## 给它5分钟的时间 From c6a59c0ae63834b90f854f32f0b3ebdf2acbe3e9 Mon Sep 17 00:00:00 2001 From: ray Date: Tue, 11 Mar 2014 17:42:03 +0800 Subject: [PATCH 3/7] fix some translation error --- docs/docs/01-why-react.zh-CN.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/docs/01-why-react.zh-CN.md b/docs/docs/01-why-react.zh-CN.md index f2d388fe30882..fbc67ff805e25 100644 --- a/docs/docs/01-why-react.zh-CN.md +++ b/docs/docs/01-why-react.zh-CN.md @@ -20,9 +20,7 @@ React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript ## 构建可组合的组件 -React is all about building reusable components. In fact, with React the *only* thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy. - -React 是所有关于创建可以复用的组件。事实上，通过 React 你*唯一*要做的事情就是构建组件。得益于其良好的封装性，组件使代码复用、测试和关注分离（separation of concerns）更加简单。 +React 都是关于构建可复用的组件。事实上，通过 React 你*唯一*要做的事情就是构建组件。得益于其良好的封装性，组件使代码复用、测试和关注分离（separation of concerns）更加简单。 ## 给它5分钟的时间 From 3c9b797d21b5bec1c3db49f0ea2b9def59270183 Mon Sep 17 00:00:00 2001 From: ray Date: Thu, 13 Mar 2014 21:00:25 +0800 Subject: [PATCH 4/7] fix `(` --- docs/docs/01-why-react.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/01-why-react.zh-CN.md b/docs/docs/01-why-react.zh-CN.md index fbc67ff805e25..fe0e692a6554f 100644 --- a/docs/docs/01-why-react.zh-CN.md +++ b/docs/docs/01-why-react.zh-CN.md @@ -14,7 +14,7 @@ React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 仅仅只要表达出你的应用程序在任一个时间点应该长的样子，然后当底层的数据变了，React 会自动更新所有UI的变化。 -### 表达能力(Declarative) +### 表达能力 (Declarative) 当数据变化了，React 概念上是类似点击了更新的按钮，但仅会更新变化的部分。 From 93b6804912b966f371c3f7153ffaea42e1753782 Mon Sep 17 00:00:00 2001 From: ray Date: Thu, 13 Mar 2014 21:12:25 +0800 Subject: [PATCH 5/7] make translation better --- docs/docs/01-why-react.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/01-why-react.zh-CN.md b/docs/docs/01-why-react.zh-CN.md index fe0e692a6554f..44e92ef716102 100644 --- a/docs/docs/01-why-react.zh-CN.md +++ b/docs/docs/01-why-react.zh-CN.md @@ -12,7 +12,7 @@ React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript ### 简单 -仅仅只要表达出你的应用程序在任一个时间点应该长的样子，然后当底层的数据变了，React 会自动更新所有UI的变化。 +仅仅只要表达出你的应用程序在任一个时间点应该长的样子，然后当底层的数据变了，React 会自动处理所有用户界面的更新。 ### 表达能力 (Declarative) From b7471bcd9320e4473a0571179e624b634daa99ac Mon Sep 17 00:00:00 2001 From: ray Date: Thu, 13 Mar 2014 23:19:29 +0800 Subject: [PATCH 6/7] add translation for getting-started.md --- docs/docs/getting-started.zh-CN.md | 120 +++++++++++++++++++++++++++++ 1 file changed, 120 insertions(+) create mode 100644 docs/docs/getting-started.zh-CN.md diff --git a/docs/docs/getting-started.zh-CN.md b/docs/docs/getting-started.zh-CN.md new file mode 100644 index 0000000000000..90d239c418bf2 --- /dev/null +++ b/docs/docs/getting-started.zh-CN.md @@ -0,0 +1,120 @@ +--- +id: getting-started-zh-CN +title: 开始 +layout: docs +next: tutorial.html +--- + +## JSFiddle + +开始 Hack React 的最简单的方法是用下面 JSFiddle 的Hello Worlds + + * **[React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)** + * [React JSFiddle without JSX](http://jsfiddle.net/vjeux/VkebS/) + +## 新手教程包 (Starter Kit) + +开始先下载新手教程包 + +
+ + 下载新手教程包 {{site.react_version}} + +
+ +在新手教程包的根目录，创建一个含有下面代码的`helloworld.html` + +```html + + + + + + + +
+ + + +``` + +在 JavaScript 代码里写着 XML 格式的代码称为 JSX；可以去 [JSX 语法](/react/docs/jsx-in-depth.html) 里学习更多 JSX 相关的知识。为了把 JSX 转成标准的 JavaScript，我们用 ` +``` + +### 离线转换 + +先安装命令行工具（依赖 [npm](http://npmjs.org/)）： + +``` +npm install -g react-tools +``` + +然后把你的 `src/helloworld.js` 文件转成标准的 JavaScript: + +``` +jsx --watch src/ build/ + +``` + +只要你修改了， `build/helloworld.js` 文件会自动生成。 + +```javascript{3} +/** @jsx React.DOM */ +React.renderComponent( + React.DOM.h1(null, 'Hello, world!'), + document.getElementById('example') +); +``` + +> 注意: +> +> 目前注释解析器还是非常严格；为了让它能够找出 `@jsx` 修饰符，有两个限制是必须的。`@jsx` 注释块必须是代码文件第一个注释。注释必须以 `/**` (`/*` 和 `//` 不起作用) 开头。如果解析器找不到 `@jsx` 注释，它就不会转换代码，直接原样输出到文件。 + +对照下面更新你的 HTML 代码 + +```html{6,10} + + + + Hello React! + + + + +
+ + + +``` + +## 想用 CommonJS？ + +如果你想在一个模块系统里使用 React，[fork 我们的代码](http://github.com/facebook/react)， `npm install` 然后运行 `grunt`。一个漂亮的 CommonJS 模块集将会被生成。我们的 `jsx` 转换工具可以很轻松的集成到大部分打包系统里（不仅仅是 CommonJS）。 + +## 下一步 + +去看看[入门教程](/react/docs/tutorial.html)，然后学习其他在 `/examples` 目录里的示例代码。祝你好运，欢迎来到 React 的世界。 + From f6a2888910047e1cc8c9549470effb7431ff4949 Mon Sep 17 00:00:00 2001 From: ray Date: Thu, 13 Mar 2014 23:28:50 +0800 Subject: [PATCH 7/7] change some translation words --- docs/docs/getting-started.zh-CN.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/docs/getting-started.zh-CN.md b/docs/docs/getting-started.zh-CN.md index 90d239c418bf2..2622874a4207e 100644 --- a/docs/docs/getting-started.zh-CN.md +++ b/docs/docs/getting-started.zh-CN.md @@ -1,6 +1,6 @@ --- id: getting-started-zh-CN -title: 开始 +title: 入门教程 layout: docs next: tutorial.html --- @@ -12,17 +12,17 @@ next: tutorial.html * **[React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)** * [React JSFiddle without JSX](http://jsfiddle.net/vjeux/VkebS/) -## 新手教程包 (Starter Kit) +## 入门教程包 (Starter Kit) -开始先下载新手教程包 +开始先下载入门教程包
- 下载新手教程包 {{site.react_version}} + 下载入门教程 {{site.react_version}}
-在新手教程包的根目录，创建一个含有下面代码的`helloworld.html` +在入门教程包的根目录，创建一个含有下面代码的 `helloworld.html` ```html