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

React安装与使用入门

2017-03-18 13:53 661 查看
1、先安装Node和Git，然后用npm安装bower命令如下：

npm install -g bower

2、使用bower安装react，cd到项目目录下，执行命令：

bower install react

如果有错提示：bower ENOGIT git is not installed or not in the PATH

说明没有安装git或者没有配置环境变量，需要配置cmd和bin两个目录，保存配置环境变量后，需要重启一下命令提示符。再重新执行bower install react。

3、要直接调试JSX语法的js，还要安装babel，命令如下：

bower install babel

4、html中引入

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


5、调试

index.html代码：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Hello React</title>
</head>

<body>
<div id="example"></div>

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

<script type="text/babel" src="js/scr/test.js"></script>
</body>

</html>


test.js代码：

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);


6、离线转换

实际访问时每次babel都会把JSX语法的js转换成标准Javascript再运行是很耗时的，所以可以提前把test.js转换成标准的js，特别是正式发布的时候。

6.1 安装Babel工具，命令如下：

npm install -g babel-cli

项目目录下安装：

npm install babel-preset-react

6.2 把test.js转换成标准的Javascript，命令如下：

babel –presets react js/src –watch –out-dir js/bin

其中:

–presets react指定编译时使用的插件

–watch表示这条命令会一直启动着，除非ctrl+c或者关闭命令提示符，作用是每次修改源文件时自动编译成目录文件

–out-dir指定编译后的js输出目录

生成的bin/test.js代码如下：

ReactDOM.render(React.createElement(
'h1',
null,
'Hello, world!'
), document.getElementById('example'));


只要命令提示符没有关–watch的命令还没退出来，

修改src/test.js时bin/test.js也会根着变。

6.3 修改index.html，使用标准的javascript

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Hello React</title>
</head>

<body>
<div id="example"></div>

<script type="text/javascript" src="bower_components/react/react.min.js"></script>
<script type="text/javascript" src="bower_components/react/react-dom.min.js"></script>
<!-- 这里就不要babel了直接使用 -->
<!--<script type="text/javascript" src="bower_components/babel/browser.min.js"></script>-->
<!-- type也可以改成javascript使用bin下面的test.js -->
<script type="text/javascript" src="js/bin/test.js"></script>
</body>

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