-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'reactjs:main' into main
- Loading branch information
Showing
34 changed files
with
1,266 additions
and
1,250 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,9 @@ | ||
| --- | ||
| title: JSFiddle Integration | ||
| title: JSFiddle 集成 | ||
| layout: Post | ||
| author: [vjeux] | ||
| --- | ||
|
|
||
| [JSFiddle](https://jsfiddle.net) just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this **[base React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**, fork it and share it! A [fiddle without JSX](http://jsfiddle.net/vjeux/VkebS/) is also available. | ||
| [JSFiddle](https://jsfiddle.net) 刚刚宣布支持 React。这是一个令人兴奋的消息，因为它使代码片段上的协作变得更加容易。你可以尝试这个 **[基础的 React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**，fork 它并分享它😎！这里还有一个 [不含 JSX 的 fiddle](http://jsfiddle.net/vjeux/VkebS/)。 | ||
|
|
||
| <blockquote class="twitter-tweet" align="center"><p>React (by Facebook) is now available on JSFiddle. <a href="http://t.co/wNQf9JPv5u" title="http://facebook.github.io/react/">facebook.github.io/react/</a></p>— JSFiddle (@jsfiddle) <a href="https://twitter.com/jsfiddle/status/341114115781177344">June 2, 2013</a></blockquote> | ||
| <blockquote class="twitter-tweet" align="center"><p>React（通过 Facebook）现在可以在 JSFiddle 上使用。<a href="http://t.co/wNQf9JPv5u" title="http://facebook.github.io/react/">facebook.github.io/react/</a></p>— JSFiddle (@jsfiddle) <a href="https://twitter.com/jsfiddle/status/341114115781177344">2013 年 6 月 2 日</a></blockquote> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,89 +1,89 @@ | ||
| --- | ||
| title: Why did we build React? | ||
| title: 我们为什么要构建 React? | ||
| layout: Post | ||
| author: [petehunt] | ||
| --- | ||
|
|
||
| There are a lot of JavaScript MVC frameworks out there. Why did we build React | ||
| and why would you want to use it? | ||
| 现在有很多 JavaScript MVC 框架。我们为什么还要构建 React， | ||
| 你又为什么会使用它？ | ||
|
|
||
| ## React isn't an MVC framework. {#react-isnt-an-mvc-framework} | ||
| ## React 不是一个 MVC 框架。 {#react-isnt-an-mvc-framework} | ||
|
|
||
| React is a library for building composable user interfaces. It encourages | ||
| the creation of reusable UI components which present data that changes over | ||
| time. | ||
| React 是一个用于构建可组合用户界面的库。 | ||
| 它鼓励创建那些用于呈现随时间变化数据的、可复用的 | ||
| UI 组件。 | ||
|
|
||
| ## React doesn't use templates. {#react-doesnt-use-templates} | ||
| ## React 不使用模板。 {#react-doesnt-use-templates} | ||
|
|
||
| Traditionally, web application UIs are built using templates or HTML directives. | ||
| These templates dictate the full set of abstractions that you are allowed to use | ||
| to build your UI. | ||
| 在以往，web 应用程序的 UI 都是使用模板或者 HTML 指令构建的。 | ||
| 这些模板决定了你可以用来构建 | ||
| UI 的全套抽象。 | ||
|
|
||
| React approaches building user interfaces differently by breaking them into | ||
| **components**. This means React uses a real, full featured programming language | ||
| to render views, which we see as an advantage over templates for a few reasons: | ||
| 而 React 用了不同的方式构建 UI，把它们拆成**组件**。 | ||
| 这意味着 React 使用了一种真实的、具有各种特性的编程语言来渲染视图， | ||
| 我们认为它相较于模板而言是一种优势的理由如下: | ||
|
|
||
| - **JavaScript is a flexible, powerful programming language** with the ability | ||
| to build abstractions. This is incredibly important in large applications. | ||
| - By unifying your markup with its corresponding view logic, React can actually | ||
| make views **easier to extend and maintain**. | ||
| - By baking an understanding of markup and content into JavaScript, there's | ||
| **no manual string concatenation** and therefore less surface area for XSS | ||
| vulnerabilities. | ||
| - **JavaScript 是一种灵活、强大的编程语言**，具有构建抽象的能力， | ||
| 这在大型应用中非常重要。 | ||
| - 通过将你的标记和其相对应的视图逻辑统一起来， | ||
| React 实际上可以让视图变得**更容易扩展和维护**。 | ||
| - 通过把一种对标记和内容的理解融入 JavaScript， | ||
| **不用手动连接字符串**，因此 XSS | ||
| 漏洞的表面积也更小。 | ||
|
|
||
| We've also created [JSX](/docs/jsx-in-depth.html), an optional syntax | ||
| extension, in case you prefer the readability of HTML to raw JavaScript. | ||
| 相比原生 JavaScript，如果你更喜欢 HTML 的高可读性， | ||
| 我们创造了 [JSX](/docs/jsx-in-depth.html)，一种可选的语法扩展。 | ||
|
|
||
| ## Reactive updates are dead simple. {#reactive-updates-are-dead-simple} | ||
| ## 响应式更新非常简单。 {#reactive-updates-are-dead-simple} | ||
|
|
||
| React really shines when your data changes over time. | ||
| 当你的数据随时间变化的时候，React 表现得真的很出色。 | ||
|
|
||
| In a traditional JavaScript application, you need to look at what data changed | ||
| and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS, | ||
| which provides a declarative interface via directives and data binding [requires | ||
| a linking function to manually update DOM nodes](https://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation). | ||
| 在一个传统的 JavaScript 应用中，你需要观察数据发生了什么变化， | ||
| 并且为了让 DOM 保持最新的状态还必须对它进行更改。 | ||
| AngularJS 甚至通过指令和数据绑定的提供声明式接口， | ||
| 还[需要一个链接函数来手动更新 DOM 节点](https://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation) 。 | ||
|
|
||
| React takes a different approach. | ||
| 但 React 采用了不同的方式。 | ||
|
|
||
| When your component is first initialized, the `render` method is called, | ||
| generating a lightweight representation of your view. From that representation, | ||
| a string of markup is produced, and injected into the document. When your data | ||
| changes, the `render` method is called again. In order to perform updates as | ||
| efficiently as possible, we diff the return value from the previous call to | ||
| `render` with the new one, and generate a minimal set of changes to be applied | ||
| to the DOM. | ||
| 当你的组件首次初始化，组件的 `render` 方法会被调用， | ||
| 对你的视图生成一个轻量化的表示。从那个表示生成一串标记， | ||
| 并注入到文档中。当你的数据发生了变化， | ||
| `render` 方法会再次被调用。为了尽可能高效地执行更新， | ||
| 我们会对前一次调用 `render` 方法返回的结果和新的调用结果进行区分， | ||
| 并生成一个要应用于 DOM | ||
| 的最小更改集合。 | ||
|
|
||
| > The data returned from `render` is neither a string nor a DOM node -- it's a | ||
| > lightweight description of what the DOM should look like. | ||
| > `render` 返回的数据既不是一串字符串也不是一个 DOM 节点 —— 而是一种表示 | ||
| > DOM 应该是什么样子的轻量化描述。 | ||
| We call this process **reconciliation**. Check out | ||
| [this jsFiddle](http://jsfiddle.net/2h6th4ju/) to see an example of | ||
| reconciliation in action. | ||
| 我们把这个过程称为**协调**。 查看 | ||
| [这个 jsFiddle](http://jsfiddle.net/2h6th4ju/) | ||
| 可以看到实际的协调示例。 | ||
|
|
||
| Because this re-render is so fast (around 1ms for TodoMVC), the developer | ||
| doesn't need to explicitly specify data bindings. We've found this approach | ||
| makes it easier to build apps. | ||
| 因为这样的重渲染实在太快了（对于 TodoMVC 而言大概就 1ms）， | ||
| 所以开发者不需要显式地指定数据绑定。 | ||
| 我们发现这种方式可以更轻松地构建应用程序。 | ||
|
|
||
| ## HTML is just the beginning. {#html-is-just-the-beginning} | ||
| ## HTML 只是开始。 {#html-is-just-the-beginning} | ||
|
|
||
| Because React has its own lightweight representation of the document, we can do | ||
| some pretty cool things with it: | ||
| 因为 React 有它自己对于文档的轻量化表示， | ||
| 所以我们可以用它做一些非常酷的事情： | ||
|
|
||
| - Facebook has dynamic charts that render to `<canvas>` instead of HTML. | ||
| - Instagram is a "single page" web app built entirely with React and | ||
| `Backbone.Router`. Designers regularly contribute React code with JSX. | ||
| - We've built internal prototypes that run React apps in a web worker and use | ||
| React to drive **native iOS views** via an Objective-C bridge. | ||
| - You can run React | ||
| [on the server](https://github.com/petehunt/react-server-rendering-example) | ||
| for SEO, performance, code sharing and overall flexibility. | ||
| - Events behave in a consistent, standards-compliant way in all browsers | ||
| (including IE8) and automatically use | ||
| [event delegation](http://davidwalsh.name/event-delegate). | ||
| - Facebook 有些动态的图表会渲染成 `<canvas>` 而不是 HTML。 | ||
| - Instagram 是一个完全用 React 和 `Backbone.Router` 构建的“单页”web 应用程序。 | ||
| 设计师经常使用 JSX 来提供 React 代码。 | ||
| - 我们已经构建了在 web worker 中运行 React 应用程序的内部原型，并且用 | ||
| React 通过一个 Objective-C 桥接器来驱动 **原生 iOS 视图**。 | ||
| - 你可以 | ||
| [在服务器上](https://github.com/petehunt/react-server-rendering-example) | ||
| 运行 React 以获得 SEO、性能、代码共享和整体的灵活性。 | ||
| - 事件在所有浏览器（包括 IE8）中以一致的、符合标准的方式运行， | ||
| 并且自动使用了 | ||
| [事件委托](http://davidwalsh.name/event-delegate) 。 | ||
|
|
||
| Head on over to [https://reactjs.org](https://reactjs.org) to check out what we have | ||
| built. Our documentation is geared towards building apps with the framework, | ||
| but if you are interested in the nuts and bolts | ||
| [get in touch](/support.html) with us! | ||
| 前往 [https://reactjs.org](https://reactjs.org) 可以查看我们已经构建的内容。 | ||
| 我们的文档旨在用框架构建应用程序， | ||
| 但是如果你对具体细节感兴趣， | ||
| 请与我们[联系](/support.html)！ | ||
|
|
||
| Thanks for reading! | ||
| 感谢阅读！ |
28 changes: 14 additions & 14 deletions
28
beta/src/pages/blog/2013/08/19/use-react-and-jsx-in-python-applications.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,56 +1,56 @@ | ||
| --- | ||
| title: 'Use React and JSX in Python Applications' | ||
| title: '在 Python 应用程序中使用 React 与 JSX' | ||
| layout: Post | ||
| author: [kmeht] | ||
| --- | ||
|
|
||
| Today we're happy to announce the initial release of [PyReact](https://github.com/facebook/react-python), which makes it easier to use React and JSX in your Python applications. It's designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files. | ||
| 今天我们很高兴能发布 [PyReact](https://github.com/facebook/react-python) 的初始版本，它可以让你在 Python 应用程序中更简单的使用 React 与 JSX。它被设计为一个将 JSX 文件转换为 JavaScript 的 API，同时提供最新 React 源文件的访问。 | ||
|
|
||
| ## Usage {#usage} | ||
| ## 使用 {#usage} | ||
|
|
||
| Transform your JSX files via the provided `jsx` module: | ||
| 通过我们提供的 `jsx` 模块转换多个 JSX 文件： | ||
|
|
||
| ```python | ||
| from react import jsx | ||
|
|
||
| # For multiple paths, use the JSXTransformer class. | ||
| # 使用 JSXTransformer 类来操作多个路径。 | ||
| transformer = jsx.JSXTransformer() | ||
| for jsx_path, js_path in my_paths: | ||
| transformer.transform(jsx_path, js_path) | ||
|
|
||
| # For a single file, you can use a shortcut method. | ||
| # 对于单个文件，你可以使用一个快捷方法. | ||
| jsx.transform('path/to/input/file.jsx', 'path/to/output/file.js') | ||
| ``` | ||
|
|
||
| For full paths to React files, use the `source` module: | ||
| 对于指向 React 文件的完整目录，可以使用 `source` 模块： | ||
|
|
||
| ```python | ||
| from react import source | ||
|
|
||
| # path_for raises IOError if the file doesn't exist. | ||
| # 如果指定文件不存在， path_for 会抛出 IOError 异常 | ||
| react_js = source.path_for('react.min.js') | ||
| ``` | ||
|
|
||
| ## Django {#django} | ||
|
|
||
| PyReact includes a JSX compiler for [django-pipeline](https://github.com/cyberdelia/django-pipeline). Add it to your project's pipeline settings like this: | ||
| PyReact 包括一个与 [django-pipeline](https://github.com/cyberdelia/django-pipeline) 同时使用的 JSX 编译器。将它加入你项目的管道设置，如下： | ||
|
|
||
| ```python | ||
| PIPELINE_COMPILERS = ( | ||
| 'react.utils.pipeline.JSXCompiler', | ||
| ) | ||
| ``` | ||
|
|
||
| ## Installation {#installation} | ||
| ## 安装 {#installation} | ||
|
|
||
| PyReact is hosted on PyPI, and can be installed with `pip`: | ||
| PyReact 托管于 PyPI, 并可以使用 `pip` 安装: | ||
|
|
||
| $ pip install PyReact | ||
|
|
||
| Alternatively, add it into your `requirements` file: | ||
| 或者，将其加入你的 `requirements` 文件: | ||
|
|
||
| PyReact==0.1.1 | ||
|
|
||
| **Dependencies**: PyReact uses [PyExecJS](https://github.com/doloopwhile/PyExecJS) to execute the bundled React code, which requires that a JS runtime environment is installed on your machine. We don't explicitly set a dependency on a runtime environment; Mac OS X comes bundled with one. If you're on a different platform, we recommend [PyV8](https://code.google.com/p/pyv8/). | ||
| **关于依赖**: PyReact 使用 [PyExecJS](https://github.com/doloopwhile/PyExecJS) 以执行打包过的 React 代码, 而这要求你的机器已经装有 JS 运行时环境。我们没有 明确指定上述的运行时环境 —— Mac OS X 自带一个。当然，如果你在使用其他平台，我们推荐使用 [PyV8](https://code.google.com/p/pyv8/)。 | ||
|
|
||
| For the initial release, we've only tested on Python 2.7. Look out for support for Python 3 in the future, and if you see anything that can be improved, we welcome your [contributions](https://github.com/facebook/react-python/blob/master/CONTRIBUTING.md)! | ||
| 鉴于这是初始版本，我们只在 Python 2.7 平台进行过测试。如果你希望在未来得到关于 Python 3 版本的支持，或者发现任何值得改进的地方，我们欢迎你的[贡献](https://github.com/facebook/react-python/blob/master/CONTRIBUTING.md)！ |
Oops, something went wrong.