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！