工具集成

每个项目使用一个不同的系统来建立和部署JavaScript.我们努力使React尽可能环境无关。

React

CDN-hosted React

我们提供了CDN-hosted版本的React在我们的下载页面.这些预构建的文件使用UMD模块格式。将他们放进一个简单的<script> 标签将会注入一个React 全局变量到你的环境里。这也同样在CommonJS 和 AMD 环境里开箱即用。

使用 master

我们在我们的 GitHub repository有从master构建的说明。我们在build/modules 下构建了一个CommonJS模块的树，你可以把它放到任何支持CommonJS的环境或者打包工具里。

JSX

浏览器中的JSX转化

如果你喜欢使用JSX，Babel提供了一个被称为browser.js的开发用的浏览器中的 ES6 和 JSX 转换器 ，它可以从babel-core npm release 或者CDNJS 中 include。Include <script type="text/babel"> 标记来使用 JSX 转换器.

注意:

浏览器中的JSX转换器相当大并且导致额外的本可避免的客户端计算。不要在生产环境中使用 - 见下一节。

投入生产: 预编译 JSX

如果你有npm，你可以运行 npm install -g babel-cli. Babel 对React v0.12+ 有内建支持。 标签被自动转化为它们的等价物React.createElement(...), displayName 被自动推断并添加到所有的React.createClass 调用。

这个工具会把使用JSX语法的文件转化为简单的可直接在浏览器运行的JavaScript文件。它同样将为你监视目录并自动转化文件当他们变动时；例如：babel --watch src/ --out-dir lib/.

从 Babel 6 开始，默认不再包含转换。这意味这必须在运行 babel 命令时指定选项，或者 .babelrc 必须指定选项。附加的捆绑了一大批转化的包(presets)也同样需要被安装.协同React工作最常用的是 es2015 和 react presets.更多关于 Babel 变化的信息可以在 Babel 6 博客发布的信息上找到.

这里是一个要使用ES2015 语法和 React 你该怎样做的例子：

  1. npm install babel-preset-es2015 babel-preset-react
  2. babel --presets es2015,react --watch src/ --out-dir lib/

默认模式下带有.js后缀的JSX文件被转化。运行 babel --help 获取更多关于如何使用 Babel 的信息。

输出的例子：

  1. $ cat test.jsx
  1. var HelloMessage = React.createClass({
  2.   render: function() {
  3.     return <div>Hello {this.props.name}</div>;
  4.   }
  5. });
  7. ReactDOM.render(<HelloMessage name="John" />, mountNode);
  1. $ babel test.jsx
  1. "use strict";
  3. var HelloMessage = React.createClass({
  4.   displayName: "HelloMessage",
  6.   render: function render() {
  7.     return React.createElement(
  8.       "div",
  9.       null,
  10.       "Hello ",
  11.       this.props.name
  12.     );
  13.   }
  14. });
  16. ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

有帮助的开源项目

开源社区已经创建了一些集成JSX到数个编辑器和构建系统的工具。全部列表请见JSX integrations 。