diff --git a/docs/01-why-react.zh-CN.md b/docs/01-why-react.zh-CN.md index 9954f489..7953668e 100644 --- a/docs/01-why-react.zh-CN.md +++ b/docs/01-why-react.zh-CN.md @@ -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) diff --git a/docs/02-displaying-data.zh-CN.md b/docs/02-displaying-data.zh-CN.md index 020f9697..6f0cf476 100644 --- a/docs/02-displaying-data.zh-CN.md +++ b/docs/02-displaying-data.zh-CN.md @@ -21,6 +21,7 @@ next: jsx-in-depth-zh-CN.html Hello React + @@ -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') + ); ``` + diff --git a/docs/getting-started.zh-CN.md b/docs/getting-started.zh-CN.md index e212d796..685fa100 100644 --- a/docs/getting-started.zh-CN.md +++ b/docs/getting-started.zh-CN.md @@ -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( +

Hello, world!

, + 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 预生成包的入门教程包。
@@ -23,7 +49,7 @@ redirect_from: "docs/index-zh-CN.html"
-在入门教程包的根目录，创建一个含有下面代码的 `helloworld.html`。 +在入门教程包的根目录，创建一个含有如下代码的 `helloworld.html`。 ```html @@ -32,6 +58,7 @@ redirect_from: "docs/index-zh-CN.html" Hello React! + @@ -46,7 +73,7 @@ redirect_from: "docs/index-zh-CN.html" ``` -在 JavaScript 代码里写着 XML 格式的代码称为 JSX；可以去 [JSX 语法](/react/docs/jsx-in-depth.html) 里学习更多 JSX 相关的知识。为了把 JSX 转成标准的 JavaScript，我们用 ` ``` +注意一些浏览器（比如 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）。 - ## 下一步