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

React笔记（一）--第一个React代码

2017-02-17 15:33 127 查看
这篇文章是怎么顺利运行第一个react代码。

最好的学习资源：阮一峰的React 入门实例教程

react中文网

准备工作：node环境、全局安装bower、安装git

step1.

在桌面建项目文件夹

打开命令黑窗口，cd切换到项目文件夹内。

bower install react     安装react
bower install babel     安装jsx解释器


两个都安装好之后，在项目文件夹中会有一个bower_components文件夹包含react和babel文件夹。

用sublime打开项目文件夹→建index.html文件→在body里最下面引入三个js文件。

<script src="bower_components/react/react.js"></script>
<script src="bower_components/react/react-dom.js"></script>
<script src="bower_components/babel/browser.min.js"></script>

如果要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel即为：
<script type="text/babel">js代码</script>


react.js - React 的核心库，主要包含了React的相关方法的定义

react-dom.js - 提供与 DOM 相关的功能，是将我们定义的组件插入到html文档中

browser.min.js - 用于将 JSX 语法转为 JavaScript 语法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello React</title>
<script  src="bower_components/react/react.js"></script>
<script  src="bower_components/react/react-dom.js"></script>
<script  src="bower_components/babel/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>


运行一下试试吧。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航