lukechilds
/
react.dev
mirror of https://github.com/lukechilds/react.dev.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

update Chinese docs to 0.14

main
WanderWang 9 years ago
parent
0a10f2c956
commit
491fa40f97
3 changed files with 49 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      docs/01-why-react.zh-CN.md
  2. 16
      docs/02-displaying-data.zh-CN.md
  3. 50
      docs/getting-started.zh-CN.md

4
docs/01-why-react.zh-CN.md
View File

@ -5,13 +5,13 @@ permalink: why-react-zh-CN.html
next: displaying-data-zh-CN.html next: displaying-data-zh-CN.html
--- ---
React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 **[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** 中的 **V**（视图）。 React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很多人选择将 React 认为是 **[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** 中的 **V**（视图）。
我们创造 React 是为了解决一个问题：**构建随着时间数据不断变化的大规模应用程序**。 我们创造 React 是为了解决一个问题：**构建随着时间数据不断变化的大规模应用程序**。
### 简单 ### 简单
仅仅只要表达出你的应用程序在任一个时间点应该长的样子，然后当底层的数据变了，React 会自动处理所有用户界面的更新。 仅仅只要表达出你的应用程序在任一个时间点应该呈现的样子，然后当底层的数据变了，React 会自动处理所有用户界面的更新。
### 声明式 (Declarative) ### 声明式 (Declarative)

16
docs/02-displaying-data.zh-CN.md
View File

@ -21,6 +21,7 @@ next: jsx-in-depth-zh-CN.html
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Hello React</title> <title>Hello React</title>
<script src="https://fb.me/react-{{site.react_version}}.js"></script> <script src="https://fb.me/react-{{site.react_version}}.js"></script>
<script src="https://fb.me/react-dom-{{site.react_version}}.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head> </head>
<body> <body>
@ -95,16 +96,16 @@ JSX 非常小；上面“hello, world”的例子使用了 JSX 所有的特性
JSX 类似于 HTML，但不是完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas-zh-CN.html) 学习关键区别。 JSX 类似于 HTML，但不是完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas-zh-CN.html) 学习关键区别。
最简单开始学习 JSX 的方法就是使用浏览器端的 `JSXTransformer`。我们强烈建议你不要在生产环境中使用它。你可以通过我们的命令行工具 [react-tools](https://www.npmjs.com/package/react-tools) 包来预编译你的代码。 [Babel 公开了一些使用 JSX 的方式],从命令行工具到 Ruby on Rails 集成。选择一个对你来说最合适的工具。
## 没有 JSX 的 React ## 没有 JSX 的 React
你完全可以选择是否使用 JSX，并不是 React 必须的。你可以通过 `React.createElement` 来创建一个树。第一个参数是标签，第二个参数是一个属性对象，每三个是子节点。 JSX完全是可选的；你无需在 React 中必须使用 JSX。你可以通过 `React.createElement` 来创建一个树。第一个参数是标签，第二个参数是一个属性对象，每三个是子节点。
```javascript ```javascript
var child = React.createElement('li', null, 'Text Content'); var child1 = React.createElement('li', null, 'First Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child); var child2 = React.createElement('li', null, 'Second Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
ReactDOM.render(root, document.getElementById('example')); ReactDOM.render(root, document.getElementById('example'));
``` ```
@ -121,6 +122,7 @@ React 已经为 HTML 标签提供内置工厂方法。
```javascript ```javascript
var root = React.DOM.ul({ className: 'my-list' }, var root = React.DOM.ul({ className: 'my-list' },
React.DOM.li(null, 'Text Content') React.DOM.li(null, 'Text Content')
); );
``` ```

50
docs/getting-started.zh-CN.md
View File

@ -13,9 +13,35 @@ redirect_from: "docs/index-zh-CN.html"
* **[React JSFiddle](https://jsfiddle.net/reactjs/69z2wepo/)** * **[React JSFiddle](https://jsfiddle.net/reactjs/69z2wepo/)**
* [React JSFiddle without JSX](https://jsfiddle.net/reactjs/5vjqabv3/) * [React JSFiddle without JSX](https://jsfiddle.net/reactjs/5vjqabv3/)
## 入门教程包 (Starter Kit)
开始先下载入门教程包。 ## 通过 npm 使用 React
我们建议在 React 中使用 CommonJS 模块系统，比如 [browserify](http://browserify.org/) 或 [webpack](https://webpack.github.io/)。使用 [`react`](https://www.npmjs.com/package/react) 和 [`react-dom`](https://www.npmjs.com/package/react-dom) npm 包.
```js
// main.js
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
```
在安装 browserify 之后安装 React DOM 和构建你的应用包。
```sh
$ npm install --save react react-dom
$ browserify -t babelify main.js -o bundle.js
```
## 不使用 npm 快速开始
If you're not ready to use npm yet, you can download the starter kit which includes prebuilt copies of React and React DOM.
如果你没有做好使用 npm 的准备，你可以下载包含了 React 和 ReactDOM 预生成包的入门教程包。
<div class="buttons-unit downloads"> <div class="buttons-unit downloads">
<a href="/react/downloads/react-{{site.react_version}}.zip" class="button"> <a href="/react/downloads/react-{{site.react_version}}.zip" class="button">
@ -23,7 +49,7 @@ redirect_from: "docs/index-zh-CN.html"
</a> </a>
</div> </div>
在入门教程包的根目录，创建一个含有下面代码的 `helloworld.html`。 在入门教程包的根目录，创建一个含有如下代码的 `helloworld.html`。
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
@ -32,6 +58,7 @@ redirect_from: "docs/index-zh-CN.html"
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Hello React!</title> <title>Hello React!</title>
<script src="build/react.js"></script> <script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head> </head>
<body> <body>
@ -46,7 +73,7 @@ redirect_from: "docs/index-zh-CN.html"
</html> </html>
``` ```
在 JavaScript 代码里写着 XML 格式的代码称为 JSX；可以去 [JSX 语法](/react/docs/jsx-in-depth.html) 里学习更多 JSX 相关的知识。为了把 JSX 转成标准的 JavaScript，我们用 `<script type="text/jsx">` 标签包裹着含有 JSX 的代码，然后引入 `JSXTransformer.js` 库来实现在浏览器里的代码转换。 在 JavaScript 代码里写着 XML 格式的代码称为 JSX；可以去 [JSX 语法](/react/docs/jsx-in-depth.html) 里学习更多 JSX 相关的知识。为了把 JSX 转成标准的 JavaScript，我们用 `<script type="text/babel">` 标签，并引入 Babel 来完成在浏览器里的代码转换。
### 分离文件 ### 分离文件
@ -65,22 +92,25 @@ ReactDOM.render(
<script type="text/babel" src="src/helloworld.js"></script> <script type="text/babel" src="src/helloworld.js"></script>
``` ```
注意一些浏览器（比如 Chrome ）会在使用 HTTP 以外的协议加载文件时失败。
### 离线转换 ### 离线转换
先安装命令行工具（依赖 [npm](https://www.npmjs.com/)）： 先安装[Babel](http://babeljs.io/)命令行工具（依赖 [npm](https://www.npmjs.com/)）：
``` ```
npm install -g react-tools npm install --global babel
``` ```
然后把你的 `src/helloworld.js` 文件转成标准的 JavaScript: 然后把你的 `src/helloworld.js` 文件转成标准的 JavaScript:
``` ```
jsx --watch src/ build/ babel src --watch --out-dir build
``` ```
只要你修改了， `build/helloworld.js` 文件会自动生成。 `build/helloworld.js` 会在你对文件进行修改时自动生成。 阅读 [Babel CLI 文档](http://babeljs.io/docs/usage/cli/) 了解高级用法。
```javascript{2} ```javascript{2}
ReactDOM.render( ReactDOM.render(
@ -108,10 +138,6 @@ ReactDOM.render(
``` ```
## 想用 CommonJS？
如果你想在 [browserify](http://browserify.org/)，[webpack](https://webpack.github.io/) 或者或其它兼容CommonJS的模块系统里使用 React，只要使用 [`react` npm 包](https://www.npmjs.com/package/react) 即可。而且，`jsx` 转换工具可以很轻松的地集成到大部分打包系统里（不仅仅是 CommonJS）。
## 下一步 ## 下一步

Write Preview
Loading…
Cancel
Save