- 先下载官方初学者教程包；解压后在根目录创建名为hello.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代码放在单独的文件夹里，创建src/hello.js文件，将JSX代码放入该文件夹，代码如下：
ReactDOM.render(
<h1>Hello,document.getElementById('example')
); 然后在html文件中引用，代码如下：
<script type="text/babel" src="src/hello.js"></script>
PS：注意上面的type是"text/babel",然后在谷歌、欧朋浏览器等主流浏览器打开会出现问题，具体问题控制台那会告诉你，没有通过http服务。
-
将JSX代码转换成标准的JavaScript代码，首先安装命令行工具，命令如下：
npm install -g react-tools
接着将src/hello.js转换成标准的JavaScript文件，命令如下：
jsx --watch src/ build/
转换成功后，build/hello.js会自动生成，代码如下：
React.render(
React.createElement('h1',null,'Hello,world!'),document.getElementById('example')
); 最后将代码更新如下：
<!DOCTYPE html>
<html>
<head>
<title>Hello React!</title>
<script src="build/react.js"></script>
<!-- 不需要JSXTransformer! -->
</head>
<body>
<div id="example"></div>
<script src="build/hello.js"></script>
</body>
</html> 注意：在转换标准JavaScript代码的时候，要进入需转换文件的根目录！
-
具体查看中文教程：http://reactjs.cn/react/docs/getting-started.html
