15.在網頁中配置使用react

標籤：javascrip   code   charset   介紹   管理器   script   form   utf-8   har   

看一下測試專案的結構，就是一個簡單的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-clinpm install babel-preset-react

這是編譯用的 

jsx檔案目錄如下，當然你也可以放在你喜歡的地方

使用babel編譯，其中的jsx是目標路徑，funjc是編譯完成的js檔案的存放路徑

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

也可以將上述命令列寫入bat檔案中

 

 

 

 

 來看一下效果，雙擊bat檔案

運行完成

原來的jsx檔案九轉化成js檔案啦

 

15.在網頁中配置使用react