您的位置：首页 > Web前端 > React

React初体验

2016-08-05 09:55 435 查看

先下载官方初学者教程包；解压后在根目录创建名为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, world!</h1>,
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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： React

相关文章推荐

新的分享

章节导航