快速开始

JSFiddle

开始学习 React 最简单的方式是使用如下JSFiddle的 Hello World例子:
  1. React JSFiddle
  2. React JSFiddle without JSX

初学者利发国际手机客户端包 (Starter Kit)

如果不想使用npm可以利发国际手机客户端初学者利发国际手机客户端包,其中预置了React和ReactDOM。 在初学者利发国际手机客户端包的根目录,创建一个包含以下内容的 helloworld.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body> </html>
在 JavaScript 代码里写着 XML 格式的代码称为 JSX;可以去 JSX 语法 里学习更多 JSX 相关的知识。为了把 JSX 转成标准的 JavaScript,我们用 <script type="text/babel"> 标签,然后通过Babel转换成在浏览器中真正执行的内容。

分离文件

你的 React JSX 代码文件可以写在单独的文件里。创建 src/helloworld.js 文件,内容如下:
React.render( <h1>Hello, world!</h1>, document.getElementById('example') );
然后在 helloworld.html 引用它:
<script type="text/babel" src="src/helloworld.js"></script>
请注意,某些浏览器(如,Chrome浏览器)将无法加载该文件,除非它通过HTTP服务。

离线转换

先安装命令行工具(依赖 npm):
npm install -g react-tools
然后将你的 src/helloworld.js 文件转成标准的 JavaScript:
jsx --watch src/ build/
一旦你修改了, build/helloworld.js 文件会自动生成。
React.render( React.createElement('h1', null, 'Hello, world!'), document.getElementById('example') );
对照以下内容利发国际手机客户端你的 HTML 代码
<!DOCTYPE html> <html> <head> <title>Hello React!</title> <script src="build/react.js"></script> <!-- 不需要JSXTransformer! --> </head> <body> <div id="example"></div> <script src="build/helloworld.js"></script> </body> </html>
祝你好运,欢迎来到 React 的世界。
利发国际手机客户端