首页 > 代码库 > 15.在网页中配置使用react

15.在网页中配置使用react

2024-11-05 05:23:40   204人阅读

看一下测试项目的结构，就是一个简单的web项目

技术分享

 

index.html

<div id="app">
            
    <div class="carousel-con" id="ts-list">
                
    </div>
            
</div>
<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/react.min.js" type="text/javascript" charset="utf-8"></script>、
<script src="js/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
<script src="funcjs/home.js" type="text/javascript" charset="utf-8"></script>

需要react.js,react-dom.js 这里使用的react版本都是比较低（0.14.5），home.js是编译之后的文件，这里先不要管怎么来的，会在下面介绍

安装node.js (为了使用npm包管理器);
命令行cd进入web目录;

操作完成上面俩步

接下来安装 jsx语法tranformer

npm install --global babel-cli
npm install babel-preset-react

这是编译用的 

jsx文件目录如下，当然你也可以放在你喜欢的地方

技术分享

使用babel编译，其中的jsx是目标路径，funjc是编译完成的js文件的存放路径

babel --presets react jsx --watch --out-dir funcjs

也可以将上述命令行写入bat文件中

技术分享

 

 

 技术分享

 

 来看一下效果，双击bat文件

技术分享

运行完成

原来的jsx文件九转化成js文件啦

技术分享技术分享

 

15.在网页中配置使用react


联系
我们