快速开始

JSFiddle

开始 Hack React 的最简单的方法是用下面 JSFiddle 的Hello Worlds：

• React JSFiddle
• React JSFiddle without JSX

通过 npm 使用 React

我们建议在 React 中使用 CommonJS 模块系统，比如 browserify 或 webpack。使用 react 和 react-dom npm 包.

// main.js
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  
Hello, world!
,
  document.getElementById('example')
);

要用 browserify 安装 React DOM 和构建你的包。

$ npm install --save react react-dom babelify babel-preset-react
$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js

要用 webpack 安装 React DOM 和构建你的包:

$ npm install --save react react-dom babel-preset-react
$ webpack

注意:

如果你正在使用 ES2015, 你将要使用 babel-preset-es2015 包.

不用 npm 的快速开始

如果你现在还没准备要使用npm,你可以下载这个已经包含了预构建的 React 和 React DOM 拷贝的入门套件.

下载入门套件 {{site.react_version}}

在入门教程包的根目录，创建一个含有如下代码的 helloworld.html。

在 JavaScript 代码里写着 XML 格式的代码称为 JSX；可以去 JSX 语法 里学习更多 JSX 相关的知识。为了把 JSX 转成标准的 JavaScript，我们用

注意一些浏览器（比如 Chrome ）会在使用 HTTP 以外的协议加载文件时失败。

离线转换

先安装Babel命令行工具（需要 npm）：

npm install --global babel-cli
npm install babel-preset-react

然后把你的 src/helloworld.js 文件转成标准的 JavaScript:

babel --presets react src --watch --out-dir build

注意:

如果你正在使用 ES2015, 你将需要使用 babel-preset-es2015 包.

build/helloworld.js 会在你对文件进行修改时自动生成。 阅读 Babel CLI 文档 了解高级用法。

ReactDOM.render(
  React.createElement('h1', null, 'Hello, world!'),
  document.getElementById('example')
);

对照下面更新你的 HTML 代码

下一步

去看看入门教程 和入门教程包 examples 目录下的其它例子学习更多。

我们还有一个社区开发者共建的 Wiki：workflows, UI-components, routing, data management etc.

恭喜你，欢迎来到 React 的世界。