React安装与使用入门

来源：互联网发布：warframe淘宝国际服编辑：程序博客网时间：2024/06/05 04:22

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>

1 0