amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-23 20:23:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

update Chinese docs to 0.14

Browse Source
This commit is contained in:
WanderWang
2015-10-19 00:34:04 +08:00
parent 0a10f2c956
commit 491fa40f97
3 changed files with 49 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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
---
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 会自动处理所有用户界面的更新。
### 声明式 (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" />
<title>Hello React</title>
<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>
</head>
<body>
@@ -95,16 +96,16 @@ JSX 非常小；上面“hello, world”的例子使用了 JSX 所有的特性
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 必须的。你可以通过 `React.createElement` 来创建一个树。第一个参数是标签，第二个参数是一个属性对象，每三个是子节点。
JSX完全是可选的；你无需在 React 中必须使用 JSX。你可以通过 `React.createElement` 来创建一个树。第一个参数是标签，第二个参数是一个属性对象，每三个是子节点。
```javascript
var child = React.createElement('li', null, 'Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child);
var child1 = React.createElement('li', null, 'First Text Content');
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'));
```
@@ -121,6 +122,7 @@ React 已经为 HTML 标签提供内置工厂方法。
```javascript
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 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">
<a href="/react/downloads/react-{{site.react_version}}.zip" class="button">
@@ -23,7 +49,7 @@ redirect_from: "docs/index-zh-CN.html"
</a>
</div>
在入门教程包的根目录，创建一个含有下面代码的 `helloworld.html`。
在入门教程包的根目录，创建一个含有如下代码的 `helloworld.html`。
```html
<!DOCTYPE html>
@@ -32,6 +58,7 @@ redirect_from: "docs/index-zh-CN.html"
<meta charset="UTF-8" />
<title>Hello React!</title>
<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>
</head>
<body>
@@ -46,7 +73,7 @@ redirect_from: "docs/index-zh-CN.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>
```
注意一些浏览器（比如 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:
```
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}
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）。
## 下一步