React.js學習之環境搭建

1 工欲善其事必先利其器：前端開發工具

1.1 WebStorm和Sublime Text

　　Sublime Text：做爲代碼編輯器，Sublime Text的優勢以下：

• 主流前端開發編輯器
• 體積較小，運行速度快
• 文本功能強大
• 支持編譯功能且可在控制檯看到輸出
• 內嵌python解釋器支持插件開發以達到可擴展目的
• Package Control：ST支持的大量插件可經過其進行管理

　　WebStorm:是jetbrains公司旗下一款JavaScript 開發工具。被廣大中國JS開發者譽爲「Web前端開發神器」、「最強大的HTML5編輯器」、「最智能的JavaScript IDE」等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。

　　我的偏好Sublime Text，因其速度更快，且能夠根據須要加載不一樣的插件，下面以Sublime Text3爲編輯器進行安裝和後續開發。

1.2 安裝Sublime Text3編輯器

1.2.1 下載Sublime Text3

　　官方下載地址http://www.sublimetext.com/，推薦使用官方版本，純淨無污染，來自大天然。

　　

　　若是是64位機器，網站會自動推薦下載Sublime Text 3 64位版本，點擊下載按鈕，下載完成後會獲得一個exe文件。

　　

1.2.2 安裝Sublime Text3

1.2.3 修改系統默認的Package安裝路徑　

　　安裝好Sublime Text3後，咱們進入Sublime Text3的安裝目錄：

　　

　　爲了之後安裝方便，決定再也不使用系統默認的Packages安裝路徑C:\Users\Administrator\AppData\Roaming\Data，在Sublime Text3的安裝目錄下新建文件夾/Data，該文件夾建立完成後再打開Sublime Text程序，咱們發現，Packages被安裝在了當前建立的文件夾下（個人路徑是C:\SoftWare\Sublime Text 3\Data）。稍後把其餘必備插件裝全了，咱們備份一下Sublime Text 3文件夾，這樣之後走到哪均可以無須一步步從新安裝，快速部署咱們的Sublime Text環境。

1.2.4 安裝Package Control插件（Sublime Text3中管理插件的插件，也能夠理解爲安裝包管理器）

　　安裝方法主要有兩種，一種是經過在終端console中輸入代碼的方式；另外一種是手動下載安裝包的方式。具體以下：　　

　　方法1：經過View->Show Console菜單打開命令行,粘貼以下代碼:

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

　　方法2：可能因爲各類緣由，沒法使用代碼安裝，那能夠經過如下步驟手動安裝Package Control：

　　1.點擊Preferences>BrowsePackages菜單

　　2.進入打開的目錄的上層目錄，而後再進入Installed Packages/目錄

　　3.下載Package Control.sublime-package並複製到Installed Packages/目錄

　　4.重啓SublimeText。

1.2.5 藉助Package Control安裝插件

　　能夠經過首選項->字體設置/主題方案來改變編輯區域的字體，背景色等屬性。

　　　　

　　若是要設置左側欄的字體等屬性，須要額外下載插件安裝PackageResourceViewer。具體步驟：

　　1.在菜單欄中找到 "Preferences" 而後選擇"Package Control"，或者Windows下 Ctrl+Shift+P 或 Mac下 Command+Shift+P)

　　2.在調出的Package Control控制面板輸如Install Package而後繼續輸入待安裝的插件名稱便可安裝插件包。

　　安裝完PackageResourceViewer以後，再次使用快捷鍵調出Package Control，並輸入PackageResourceViewer:Open Resource回車，打開包列表，並選擇 Theme - Default，再選擇 Default.sublimt-theme，搜索 sidebar_label，在 "class": "sidebar_label" 後邊加一行："font.size":18，將字體大小設置爲18，保存.步驟圖以下：

　　　　圖1

　　　　圖2

　　　　圖3

　　　　圖4

　　面對含有JSX語法的JS文件，Sublime Text3沒法正常高亮顯示其中的標籤。解決方法：

　　1.經過Package Control:Install Package安裝Babel插件；

　　2.選擇View-Syntax-Babel-JavaScript(Babel)便可對TSX語法進行正常高亮顯示。如圖所示：

　　

2.使用Sublime Text3編寫React小應用helloWorld

2.1建立文件夾HelloWorld

　　

2.2 經過命令安裝react

　　接下來打開cmd命令行，找到helloWorld文件夾，而後輸入命令bower install react(bower能夠對第三方模塊進行統一的版本管理或者迭代，事先須要經過node.js的包管理分發工具npm進行全局安裝：npm install bower -g)，實如今當前目錄下安裝react，以下圖所示。

　　

　　回到Sublime Text3，刷新剛纔導入的目錄helloWorld，能夠看到目錄下多了一個react子文件夾，說明react安裝完畢。

　　

2.3 使用React結合JSX語法實現helloWorld實例

　　在helloWorld目錄下新建一個helloWorld.html文件，並在script標籤中引入react.min.js和react-dom.min.js文件。

　　

　　這裏，咱們在結尾的<script>標籤中經過ReactDOM的render方法將h1標籤顯示在id爲example的div標籤中。注意，標籤h1使用的是一種類XML語法JSX（JavaScript XML）,而使用JSX的前提是1.須要JSX解釋器（在命令行中經過bower install babel安裝，並在script標籤中引入babel下的browser.min.js文件），2.JSX語句所在的<script>標籤設定text/babel類型"。

　　在瀏覽器中打開helloWorld.html，能夠看到React可以正常使用，並生成了Hello,world的標題。

　　

2.4 模塊化管理及JSX的編譯

　　爲了方便模塊化管理js，咱們在HelloWorld目錄下新建build文件夾和頁面相對應的JS文件helloWorld.js，接着將頁面中的js代碼移動到該文件中並在頁面引入。

　　實際網站中若是每一個頁面都要引用browser.min.js，並編譯JSX所在的JS文件，性能將會變得很低，所以咱們須要一個能在JSX模式下生成基於React的原生JS的模塊。本章咱們使用react-tools（新版這個工具已經被廢棄了)來編譯帶JSX語法的JS文件。

　　首先用命令npm install react-tools -g全局安裝react-tools，而後在目錄HelloWorld下使用jsx --watch build/ js/實現了將build下的全部用JSX語法編寫的文件編譯後放到js目錄下。實例中頁面JS文件編譯後的生成代碼爲：

　　

　　簡單修改helloWorld.html頁面中的引用路徑爲js/helloWorld.js，從新運行後能正常顯示HelloWorld的標題，說明react-tools成功地實現了對JSX的編譯。

　　至此，一個react的簡單安裝環境基本搭建完成（之因此謂之簡單，是由於一個大的項目還須要考慮不少因素）。

　　總結本章，咱們採用前端代碼編輯器Sublime Text3進行開發，使用bower管理器安裝react和babel，編寫並實現了一個簡單的react實例：helloWorld！