diff --git a/docs/_data/nav_docs.yml b/docs/_data/nav_docs.yml index 7eb71491c8d4..b1d06bcfd355 100644 --- a/docs/_data/nav_docs.yml +++ b/docs/_data/nav_docs.yml @@ -1,38 +1,38 @@ -- title: Quick Start +- title: 快速上手 items: - id: getting-started - title: Getting Started + title: 入门教程 - id: tutorial - title: Tutorial + title: 教程 - id: thinking-in-react - title: Thinking in React -- title: Community Resources + title: 用 React 思考 +- title: 社区资源 items: - id: videos - title: Videos + title: 视频 - id: complementary-tools - title: Complementary Tools + title: 补充工具 - id: examples - title: Examples + title: 范例 - title: Guides items: - id: why-react - title: Why React? + title: 为什么使用 React? - id: displaying-data - title: Displaying Data + title: 显示数据 subitems: - id: jsx-in-depth - title: JSX in Depth + title: 深入 JSX - id: jsx-gotchas - title: JSX Gotchas + title: JSX 的误区 - id: interactivity-and-dynamic-uis title: Interactivity and Dynamic UIs - id: multiple-components title: Multiple Components - id: reusable-components - title: Reusable Components + title: 可复用组件 - id: forms - title: Forms + title: 表单 - id: working-with-the-browser title: Working With the Browser subitems: @@ -68,7 +68,7 @@ - id: component-specs title: Component Specs and Lifecycle - id: tags-and-attributes - title: Supported Tags and Attributes + title: 标签和属性支持 - id: events title: Event System - id: dom-differences diff --git a/docs/docs/01-why-react.md b/docs/docs/01-why-react.md index a11b49bd3993..7ba13c243ad9 100644 --- a/docs/docs/01-why-react.md +++ b/docs/docs/01-why-react.md @@ -1,29 +1,32 @@ --- id: why-react -title: Why React? +title: 为什么使用 React? permalink: why-react.html next: displaying-data.html --- -React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the **V** in **[MVC](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)**. -We built React to solve one problem: **building large applications with data that changes over time**. To do this, React uses two main ideas. +React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 **[MVC](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** 中的 **V**（视图）。 -### Simple +我们创造 React 是为了解决一个问题：**构建随着时间数据不断变化的大规模应用程序**。为了达到这个目标，React 采用下面两个主要的思想。 -Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes. +### 简单 -### Declarative +仅仅只要表达出你的应用程序在任一个时间点应该长的样子，然后当底层的数据变了，React 会自动处理所有用户界面的更新。 -When the data changes, React conceptually hits the "refresh" button, and knows to only update the changed parts. +### 声明式 (Declarative) -## Build Composable Components +当数据变化了，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. +## 构建可组合的组件 -## Give It Five Minutes +React 都是关于构建可复用的组件。事实上，通过 React 你*唯一*要做的事情就是构建组件。得益于其良好的封装性，组件使代码复用、测试和关注分离（separation of concerns）更加简单。 -React challenges a lot of conventional wisdom, and at first glance some of the ideas may seem crazy. [Give it five minutes](http://37signals.com/svn/posts/3124-give-it-five-minutes) while reading this guide; those crazy ideas have worked for building thousands of components both inside and outside of Facebook and Instagram. +## 给它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 的动机。 -## Learn More -You can learn more about our motivations behind building React in [this blog post](http://facebook.github.io/react/blog/2013/06/05/why-react.html). diff --git a/docs/docs/01-why-react.zh-CN.md b/docs/docs/01-why-react.zh-CN.md deleted file mode 100644 index 2fda63279379..000000000000 --- a/docs/docs/01-why-react.zh-CN.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -id: why-react-zh-CN -title: 为什么使用 React? -permalink: why-react-zh-CN.html -next: displaying-data-zh-CN.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/02-displaying-data.md b/docs/docs/02-displaying-data.md index d101a6d90817..71a6d0cabcb4 100644 --- a/docs/docs/02-displaying-data.md +++ b/docs/docs/02-displaying-data.md @@ -1,17 +1,17 @@ --- id: displaying-data -title: Displaying Data +title: 显示数据 +layout: docs permalink: displaying-data.html prev: why-react.html next: jsx-in-depth.html --- -The most basic thing you can do with a UI is display some data. React makes it easy to display data and automatically keeps the interface up-to-date when the data changes. +通过用户界面，最基础可以做的事就是显示一些数据。React 让显示数据变得简单，当数据变化的时候，用户界面会自动同步更新。 +## 开始 -## Getting Started - -Let's look at a really simple example. Create a `hello-react.html` file with the following code: +让我们看一个非常简单的例子。新建一个名为 `hello-react.html` 的文件，代码内容如下： ```html @@ -25,14 +25,14 @@ Let's look at a really simple example. Create a `hello-react.html` file with the
``` -For the rest of the documentation, we'll just focus on the JavaScript code and assume it's inserted into a template like the one above. Replace the placeholder comment above with the following JS: +在接下去的文档中，我们只关注 JavaScript 代码，假设我们把代码插入到上面那个模板中。用下面的代码替换掉上面用来占位的注释。 ```javascript /** @jsx React.DOM */ @@ -56,35 +56,32 @@ setInterval(function() { }, 500); ``` +## 被动更新 (Reactive Updates) -## Reactive Updates - -Open `hello-react.html` in a web browser and type your name into the text field. Notice that React is only changing the time string in the UI — any input you put in the text field remains, even though you haven't written any code to manage this behavior. React figures it out for you and does the right thing. +在浏览器中打开 `hello-react.html` ，在输入框输入你的名字。你会发现 React 在用户界面中只改变了时间， 任何你在输入框输入的内容一直保留着，即使你没有写任何代码来完成这个功能。React 为你解决了这个问题，做了正确的事。 -The way we are able to figure this out is that React does not manipulate the DOM unless it needs to. **It uses a fast, internal mock DOM to perform diffs and computes the most efficient DOM mutation for you.** +我们想到的方法是除非不得不操作 DOM ，React 是不会去操作 DOM 的。**它用一种更快的内置仿造的 DOM 来操作差异，为你计算出效率最高的 DOM 改变**。 -The inputs to this component are called `props` — short for "properties". They're passed as attributes in JSX syntax. You should think of these as immutable within the component, that is, **never write to `this.props`**. +对这个组件的输入称为 `props` - "properties"(属性)的缩写。它们在 JSX 中作为参数传递。你应该这样认为，组件里的属性是不可变的，也就是说，**永远不要修改 `this.props`**。 +## 组件就像是函数 -## Components are Just Like Functions +React 组件非常简单。你可以认为它们就是简单的函数，接受 `props` 和 `state` (后面会讨论) 作为参数，然后渲染出 HTML。正是应为它们是这么的简单，这使得它们非常容易深究原因。 -React components are very simple. You can think of them as simple function that take in `props` and `state` (discussed later) and render HTML. Because they're so simple, it makes them very easy to reason about. - -> Note: +> 注意: > -> **One limitation**: React components can only render a single root node. If you want to return multiple nodes they *must* be wrapped in a single root. - +> **只有一个限制**: React 组件只渲染单个根节点。如果你想要返回多个节点，它们*必须*被包含在一个根节点里。 -## JSX Syntax +## JSX 语法 -We strongly believe that components are the right way to separate concerns rather than "templates" and "display logic." We think that markup and the code that generates it are intimately tied together. Additionally, display logic is often very complex and using template languages to express it becomes cumbersome. +我们坚信组件是正确方法去做关注分离，而不是通过“模板”和“展示逻辑”。我们认为标签和生成它的代码是紧密相连的。此外，展示逻辑通常是很复杂的，通过模板语言实现这些逻辑会产生大量代码。 -We've found that the best solution for this problem is to generate markup directly from the JavaScript code such that you can use all of the expressive power of a real programming language to build UIs. In order to make this easier, we've added a very simple, **optional** HTML-like syntax for the function calls that generate markup called JSX. +我们得出解决这个问题最好的方案是通过 JavaScript 直接生成模板，这样你就可以用一个真正语言的所有表达能力去构建用户界面。为了使这变得更简单，我们做了一个非常简单、**可选**类似 HTML 语法 ，通过函数调用即可生成模板的编译器，称为 JSX。 -**JSX lets you write JavaScript function calls with HTML syntax.** To generate a link in React using pure JavaScript you'd write: `React.DOM.a({href: 'http://facebook.github.io/react/'}, 'Hello React!')`. With JSX this becomes `Hello React!`. We've found this has made building React apps easier and designers tend to prefer the syntax, but everyone has their own workflow, so **JSX is not required to use React.** +**JSX 让你可以用 HTML 语法去写 JavaScript 函数调用。** 为了在 React 生成一个链接，通过纯 JavaScript 你可以这么写： `React.DOM.a({href: 'http://facebook.github.io/react/'}, 'Hello React!')`。通过 JSX 这就变成了 `Hello React!`。我们发现这会使搭建 React 应用更加简单，设计师也偏向用这用语法，但是每个人可以有它们自己的工作流，所以**JSX 不是使用 React 所必需的。** -JSX is very small; the "hello, world" example above uses every feature of JSX. To learn more about it, see [JSX in depth](/react/docs/jsx-in-depth.html). Or see the transform in action in [our live JSX compiler](/react/jsx-compiler.html). +JSX 非常小；上面 “hello, world” 的例子使用了 JSX 所有的特性。想要了解更多，请看 [深入理解 JSX](/react/docs/jsx-in-depth.html)。或者直接使用[在线 JSX 编译器](/react/jsx-compiler.html)观察变化过程。 -JSX is similar to HTML, but not exactly the same. See [JSX gotchas](/react/docs/jsx-gotchas.html) for some key differences. +JSX 类似于 HTML，但不是完全一样。参考[JSX gotchas](/react/docs/jsx-gotchas.html) 学习关键区别。 -The easiest way to get started with JSX is to use the in-browser `JSXTransformer`. We strongly recommend that you don't use this in production. You can precompile your code using our command-line [react-tools](http://npmjs.org/package/react-tools) package. +最简单开始学习 JSX 的方法就是使用浏览器端的 `JSXTransformer`。我们强烈建议你不要在生产环境中使用它。你可以通过我们的命令行工具 [react-tools](http://npmjs.org/package/react-tools) 包来预编译你的代码。 \ No newline at end of file diff --git a/docs/docs/02-displaying-data.zh-CN.md b/docs/docs/02-displaying-data.zh-CN.md deleted file mode 100644 index 4fd98fd8f005..000000000000 --- a/docs/docs/02-displaying-data.zh-CN.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: displaying-data-zh-CN -title: 显示数据 -layout: docs -permalink: displaying-data-zh-CN.html -prev: why-react-zh-CN.html -next: jsx-in-depth.html ---- - -通过用户界面，最基础可以做的事就是显示一些数据。React 让显示数据变得简单，当数据变化的时候，用户界面会自动同步更新。 - -## 开始 - -让我们看一个非常简单的例子。新建一个名为 `hello-react.html` 的文件，代码内容如下： - -```html - - - - Hello React - - - - -
- - - -``` - -在接下去的文档中，我们只关注 JavaScript 代码，假设我们把代码插入到上面那个模板中。用下面的代码替换掉上面用来占位的注释。 - -```javascript -/** @jsx React.DOM */ - -var HelloWorld = React.createClass({ - render: function() { - return ( -

- Hello, ! - It is {this.props.date.toTimeString()} -

- ); - } -}); - -setInterval(function() { - React.renderComponent( - , - document.getElementById('example') - ); -}, 500); -``` - -## 被动更新 (Reactive Updates) - -在浏览器中打开 `hello-react.html` ，在输入框输入你的名字。你会发现 React 在用户界面中只改变了时间， 任何你在输入框输入的内容一直保留着，即使你没有写任何代码来完成这个功能。React 为你解决了这个问题，做了正确的事。 - -我们想到的方法是除非不得不操作 DOM ，React 是不会去操作 DOM 的。**它用一种更快的内置仿造的 DOM 来操作差异，为你计算出出效率最高的 DOM 改变**。 - -对这个组件的输入称为 `props` - "properties"的缩写。得益于 JSX 语法，它们通过参数传递。你必须知道在组件里，这些属性是不可改变的，也就是说 **`this.props` 是只读的**。 - -## 组件就像是函数 - -React 组件非常简单。你可以认为它们就是简单的函数，接受 `props` 和 `state` (后面会讨论) 作为参数，然后渲染出 HTML。正是应为它们是这么的简单，这使得它们非常容易理解。 - -> 注意: -> -> **只有一个限制**: React 组件只能渲染单个根节点。如果你想要返回多个节点，它们*必须*被包含在同一个节点里。 - -## JSX 语法 - -我们坚信组件是正确方法去做关注分离，而不是通过“模板”和“展示逻辑”。我们认为标签和生成它的代码是紧密相连的。此外，展示逻辑通常是很复杂的，通过模板语言实现这些逻辑会产生大量代码。 - -我们得出解决这个问题最好的方案是通过 JavaScript 直接生成模板，这样你就可以用一个真正语言的所有表达能力去构建用户界面。为了使这变得更简单，我们做了一个非常简单、**可选**类似 HTML 语法 ，通过函数调用即可生成模板的编译器，称为 JSX。 - -**JSX 让你可以用 HTML 语法去写 JavaScript 函数调用** 为了在 React 生成一个链接，通过纯 JavaScript 你可以这么写： `React.DOM.a({href: 'http://facebook.github.io/react/'}, 'Hello React!')`。通过 JSX 这就变成了 `Hello React!`。我们发现这会使搭建 React 应用更加简单，设计师也偏向用这用语法，但是每个人可以有它们自己的工作流，所以**JSX 不是必须用的。** - -JSX 非常小；上面“hello, world”的例子使用了 JSX 所有的特性。想要了解更多，请看 [深入理解 JSX](/react/docs/jsx-in-depth.html)。或者直接使用[在线 JSX 编译器](/react/jsx-compiler.html)观察变化过程。 - -JSX 类似于 HTML，但不是完全一样。参考[JSX gotchas](/react/docs/jsx-gotchas.html) 学习关键区别。 - -最简单开始学习 JSX 的方法就是使用浏览器端的 `JSXTransformer`。我们强烈建议你不要在生产环境中使用它。你可以通过我们的命令行工具 [react-tools](http://npmjs.org/package/react-tools) 包来预编译你的代码。 \ No newline at end of file diff --git a/docs/docs/02.1-jsx-in-depth.md b/docs/docs/02.1-jsx-in-depth.md index 14924f746c6f..e418d8612f56 100644 --- a/docs/docs/02.1-jsx-in-depth.md +++ b/docs/docs/02.1-jsx-in-depth.md @@ -1,6 +1,6 @@ --- id: jsx-in-depth -title: JSX in Depth +title: 深入 JSX permalink: jsx-in-depth.html prev: displaying-data.html next: jsx-gotchas.html @@ -57,7 +57,7 @@ var app = Nav({color:"blue"}, Profile(null, "click")); ``` Use the [JSX Compiler](/react/jsx-compiler.html) to try out JSX and see how it -desugars into native JavaScript, and the +desugars into native JavaScript, and the [HTML to JSX converter](/react/html-jsx.html) to convert your existing HTML to JSX. diff --git a/docs/docs/02.2-jsx-gotchas.md b/docs/docs/02.2-jsx-gotchas.md index 57280079db3a..3c4a2153b846 100644 --- a/docs/docs/02.2-jsx-gotchas.md +++ b/docs/docs/02.2-jsx-gotchas.md @@ -1,6 +1,6 @@ --- id: jsx-gotchas -title: JSX Gotchas +title: JSX 的误区 permalink: jsx-gotchas.html prev: jsx-in-depth.html next: interactivity-and-dynamic-uis.html diff --git a/docs/docs/05-reusable-components.md b/docs/docs/05-reusable-components.md index 2e5750f62b5f..1f93b8f418bc 100644 --- a/docs/docs/05-reusable-components.md +++ b/docs/docs/05-reusable-components.md @@ -1,6 +1,6 @@ --- id: reusable-components -title: Reusable Components +title: 可复用组件 permalink: reusable-components.html prev: multiple-components.html next: forms.html diff --git a/docs/docs/06-forms.md b/docs/docs/06-forms.md index 1dad3ea490dd..7842b65b1403 100644 --- a/docs/docs/06-forms.md +++ b/docs/docs/06-forms.md @@ -1,6 +1,6 @@ --- id: forms -title: Forms +title: 表单 permalink: forms.html prev: reusable-components.html next: working-with-the-browser.html diff --git a/docs/docs/complementary-tools.md b/docs/docs/complementary-tools.md index 0d4190c1b867..dc161e1d1433 100644 --- a/docs/docs/complementary-tools.md +++ b/docs/docs/complementary-tools.md @@ -1,9 +1,9 @@ --- id: complementary-tools -title: Complementary Tools +title: 补充工具 permalink: complementary-tools.html prev: videos.html next: examples.html --- -This page has moved to the [GitHub wiki](https://github.com/facebook/react/wiki/Complementary-Tools). +这个页面移到了 [GitHub wiki](https://github.com/facebook/react/wiki/Complementary-Tools). diff --git a/docs/docs/examples.md b/docs/docs/examples.md index 2ab644ee29df..863ac5a3f692 100644 --- a/docs/docs/examples.md +++ b/docs/docs/examples.md @@ -1,6 +1,6 @@ --- id: examples -title: Examples +title: 范例 permalink: examples.html prev: complementary-tools.html --- diff --git a/docs/docs/getting-started.md b/docs/docs/getting-started.md index 36c3a59be0d7..256908ffca00 100644 --- a/docs/docs/getting-started.md +++ b/docs/docs/getting-started.md @@ -1,28 +1,27 @@ --- id: getting-started -title: Getting Started +title: 入门教程 next: tutorial.html -redirect_from: "docs/index.html" --- ## JSFiddle -The easiest way to start hacking on React is using the following JSFiddle Hello World examples: +下面 JSFiddle 的 Hello World 例子是开始 Hack React 最简单的方法： * **[React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)** * [React JSFiddle without JSX](http://jsfiddle.net/vjeux/VkebS/) -## Starter Kit +## 入门教程包 (Starter Kit) -Download the starter kit to get started. +开始先下载入门教程包
- Download Starter Kit {{site.react_version}} + 下载入门教程 {{site.react_version}}
-In the root directory of the starter kit, create a `helloworld.html` with the following contents. +在入门教程包的根目录，创建一个含有下面代码的 `helloworld.html`。 ```html @@ -44,11 +43,11 @@ In the root directory of the starter kit, create a `helloworld.html` with the fo ``` -The XML syntax inside of JavaScript is called JSX; check out the [JSX syntax](/react/docs/jsx-in-depth.html) to learn more about it. In order to translate it to vanilla JavaScript we use ` ``` -### Offline Transform +### 离线转换 -First install the command-line tools (requires [npm](http://npmjs.org/)): +先安装命令行工具（依赖 [npm](http://npmjs.org/)）： ``` npm install -g react-tools ``` -Then, translate your `src/helloworld.js` file to plain JavaScript: +然后把你的 `src/helloworld.js` 文件转成标准的 JavaScript: ``` jsx --watch src/ build/ ``` -The file `build/helloworld.js` is autogenerated whenever you make a change. +只要你修改了， `build/helloworld.js` 文件会自动生成。 ```javascript{3} /** @jsx React.DOM */ @@ -88,11 +88,11 @@ React.renderComponent( ); ``` -> Note: +> 注意: > -> The comment parser is very strict right now; in order for it to pick up the `@jsx` modifier, two conditions are required. The `@jsx` comment block must be the first comment on the file. The comment must start with `/**` (`/*` and `//` will not work). If the parser can't find the `@jsx` comment, it will output the file without transforming it. +> 目前注释解析器还是非常严格；为了让它能够找出 `@jsx` 修饰符，有两个限制是必须的。`@jsx` 注释块必须是代码文件第一个注释。注释必须以 `/**` (`/*` 和 `//` 不起作用) 开头。如果解析器找不到 `@jsx` 注释，它就不会转换代码，直接原样输出到文件。 -Update your HTML file as below: +对照下面更新你的 HTML 代码 ```html{6,10} @@ -109,10 +109,11 @@ Update your HTML file as below: ``` -## Want CommonJS? +## 想用 CommonJS？ + +如果你想将 [browserify](http://browserify.org/), [webpack](http://webpack.github.io/) 或者其他遵循 CommonJS 规范的模块和 React 一起使用，就用 [`react` npm 模块](https://www.npmjs.org/package/react)。我们的 `jsx` 转换工具可以很轻松的集成到大部分打包系统里（不仅仅是 CommonJS）。 -If you want to use React with [browserify](http://browserify.org/), [webpack](http://webpack.github.io/), or another CommonJS-compatible module system, just use the [`react` npm package](https://www.npmjs.org/package/react). In addition, the `jsx` build tool can be integrated into most packaging systems (not just CommonJS) quite easily. +## 下一步 -## Next Steps +去看看[入门教程](/react/docs/tutorial.html)，然后学习其他在 `/examples` 目录里的示例代码。祝你好运，欢迎来到 React 的世界。 -Check out [the tutorial](/react/docs/tutorial.html) and the other examples in the starter kit's `examples` directory to learn more. Good luck, and welcome! diff --git a/docs/docs/getting-started.zh-CN.md b/docs/docs/getting-started.zh-CN.md deleted file mode 100644 index a785cd315645..000000000000 --- a/docs/docs/getting-started.zh-CN.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: getting-started-zh-CN -title: 入门教程 -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 的世界。 - diff --git a/docs/docs/ref-04-tags-and-attributes.md b/docs/docs/ref-04-tags-and-attributes.md index c0d0108190c2..e7fc2368d3ab 100644 --- a/docs/docs/ref-04-tags-and-attributes.md +++ b/docs/docs/ref-04-tags-and-attributes.md @@ -1,18 +1,18 @@ --- id: tags-and-attributes -title: Tags and Attributes +title: 标签和属性（Attributes） permalink: tags-and-attributes.html prev: component-specs.html next: events.html --- -## Supported Tags +## 支持的标签 -React attempts to support all common elements. If you need an element that isn't listed here, please file an issue. +React 希望支持所有通用的标签. 如果你需要一个这里没有列出的标签, 请提交一个 Issue. -### HTML Elements +### HTML 标签 -The following HTML elements are supported: +支持下列 HTML 标签： ``` a abbr address area article aside audio b base bdi bdo big blockquote body br @@ -25,31 +25,32 @@ source span strong style sub summary sup table tbody td textarea tfoot th thead time title tr track u ul var video wbr ``` -### SVG elements +### SVG 标签 -The following SVG elements are supported: +支持下列 SVG 标签: ``` circle defs ellipse g line linearGradient mask path pattern polygon polyline radialGradient rect stop svg text tspan ``` -You may also be interested in [react-art](https://github.com/facebook/react-art), a drawing library for React that can render to Canvas, SVG, or VML (for IE8). +你也许会对 [react-art](https://github.com/facebook/react-art) 感兴趣, 这是个 React 的绘图类库, 可以渲染 Canvas, +SVG, or VML (用于 IE8). -## Supported Attributes +## 支持的属性 -React supports all `data-*` and `aria-*` attributes as well as every attribute in the following lists. +React 支持所有 `data-*` 和 `aria-*` 属性后面罗列的每个属性. -> Note: +> 注意: > -> All attributes are camel-cased and the attributes `class` and `for` are `className` and `htmlFor`, respectively, to match the DOM API specification. +> 所有属性使用驼峰命名, 其中 `class` 和 ` for` 属性应该是 `className` 和 `htmlFor`, 分别对应 DOM API 规范. -For a list of events, see [Supported Events](/react/docs/events.html). +关于事件, 见[事件支持](/react/docs/events.html). -### HTML Attributes +### HTML 属性 -These standard attributes are supported: +支持这些标准属性: ``` accept accessKey action allowFullScreen allowTransparency alt async @@ -64,15 +65,16 @@ seamless selected shape size span spellCheck src srcDoc srcSet start step style tabIndex target title type useMap value width wmode ``` -In addition, the following non-standard attributes are supported: +另外, 支持后面这些非标准的属性: -- `autoCapitalize autoCorrect` for Mobile Safari. -- `property` for [Open Graph](http://ogp.me/) meta tags. -- `itemProp itemScope itemType` for [HTML5 microdata](http://schema.org/docs/gs.html). +- `autoCapitalize autoCorrect` 针对 Mobile Safari. +- `property` 针对 [Open Graph](http://ogp.me/) meta 标签. +- `itemProp itemScope itemType` 针对 [HTML5 microdata](http://schema.org/docs/gs.html). -There is also the React-specific attribute `dangerouslySetInnerHTML` ([more here](/react/docs/special-non-dom-attributes.html)), used for directly inserting HTML strings into a component. +还有一个 React 专用的属性 `dangerouslySetInnerHTML` ([更多](/react/docs/special-non-dom-attributes.html)), +用于在组件当中直接插入 HTML. -### SVG Attributes +### SVG 属性 ``` cx cy d dx dy fill fillOpacity fontFamily fontSize fx fy gradientTransform diff --git a/docs/docs/videos.md b/docs/docs/videos.md index e1a6d669972f..e4c4a20071f9 100644 --- a/docs/docs/videos.md +++ b/docs/docs/videos.md @@ -1,6 +1,6 @@ --- id: videos -title: Videos +title: 视频 permalink: videos.html prev: thinking-in-react.html next: complementary-tools.html