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 拷贝的入门套件.
在入门教程包的根目录,创建一个含有如下代码的 helloworld.html
。
Hello React!
在 JavaScript 代码里写着 XML 格式的代码称为 JSX;可以去 JSX 语法 里学习更多 JSX 相关的知识。为了把 JSX 转成标准的 JavaScript,我们用 标签,并引入 Babel 来完成在浏览器里的代码转换。
分离文件
你的 React JSX 代码文件可以写在另外的文件里。新建下面的 src/helloworld.js
。
ReactDOM.render(
Hello, world!
,
document.getElementById('example')
);
然后在 helloworld.html
引用该文件:
注意一些浏览器(比如 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 代码
Hello React!
下一步
去看看入门教程 和入门教程包 examples
目录下的其它例子学习更多。
我们还有一个社区开发者共建的 Wiki:workflows, UI-components, routing, data management etc.
恭喜你,欢迎来到 React 的世界。