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..44e92ef716102 --- /dev/null +++ b/docs/docs/01-why-react.zh-CN.md @@ -0,0 +1,33 @@ +--- +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 会自动处理所有用户界面的更新。 + +### 表达能力 (Declarative) + +当数据变化了，React 概念上是类似点击了更新的按钮，但仅会更新变化的部分。 + +## 构建可组合的组件 + +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 的动机。 + + diff --git a/docs/docs/getting-started.zh-CN.md b/docs/docs/getting-started.zh-CN.md new file mode 100644 index 0000000000000..2622874a4207e --- /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 的世界。 +