零：react開發環境搭建非常簡單，只需要下載facebook官方的基礎代碼即可。

　　下載地址 https://github.com/facebook/react/releases

　　一：常用的編輯器及插件配置

　　1）Sublime Text 3 下載地址 http://www.sublimetext.com/3　　

　 2）插件安裝

　　因為Sublime沒有管理插件的功能所以要安裝Package Control

　　地址 https://packagecontrol.io/installation

　　復制網頁中 sublime Text 3 下的代碼即

import urllib.request,os,hashlib; h = ‘
 
df21e130d211cfc94d9b0905775a7c0f‘ + ‘1e3d39e33b79698005270310898eea76‘; pf = ‘Package Control.sublime-package‘; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://packagecontrol.io/‘ + pf.replace(‘
 
 ‘, ‘%20‘)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install‘ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb‘ ).write(by)

　　在sublime Text 3 中使用快捷鍵ctrl+頓號或者用點擊菜單view-show console，在mac中菜單在左下角路徑為console，輸入代碼回車執行，重啟編輯器就完成了安裝。

　　接下來就是安裝我們常用的插件，windows下點擊preferences-package control mac下點擊菜單欄sublime text-preferences-package control 選擇install Package（安裝插件，選擇後會加載所有插件）

　　1：Emmet 其是用來編寫html和css的插件 使用Emmet可以用特殊語法，加快開發速度。

　　2：HTML-CSS-JSPrettify 作用是將html和css還有js的格式標準化，使代碼更易維護規範。

　　3：Spacegray 作用是為代碼著色，使代碼更易讀。

　　1：下載完成後，安裝Emmet 其是用來編寫html和css的插件 使用Emmet可以用特殊語法，加快開發速度。在輸入框中輸入Emmet，選擇即可安裝。當左下角的安裝提示不在顯示即為安裝成功，重啟編輯器。如何使用Emmet，重啟後需要保存一個css文件或html文件，在文件格式明確的情況下sublime才能知道是否啟用Emmet，在html和css文件中就可以使用Emmet。

　　2：HTML-CSS-JSPrettify的安裝方法同上，並且還需要安裝nodejs，使用方法右鍵-HTML/CSS/JSPrettify-Prettify Code，點擊就可以整理代碼格式。也需要在html和css還有js文件中才能使用。

　　3：Spacegray 安裝方法同上，安裝完成後需要進行配置，首先mac打開preference-Setting windows下 preference-Setting-User ，Spacegray提供三種主題，你可以在在Spacegray官網上復制你所選擇的主題的代碼。我選擇的是 Settings for Spacegray Eighties。保存後主題啟用。

{
  "theme": "Spacegray Eighties.sublime-theme",
  "color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme"
}

修改後配置代碼

{
    "ignored_packages":
    [
        "Vintage"
    ],
    "theme": "Spacegray Eighties.sublime-theme",
    "color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme"

}

　 官網地址　https://github.com/kkga/spacegray

　　Emmet語法

　　子代：>

　　div>ul>li

　　<div><ul><li><li/></ul></div>

　　兄弟：+

　　div+p

　　<div></div><p></p>

　　父代：^

　　div>div^p

　　<div><p></p></div>

　　<div></div>

　　重復：*

　　div*2

　　<div></div>

　　<div></div>

　　成組：()　

　　(div+p)*2

　　<div></div><p></p>

　　<div></div><p></p>

　 ID：#

　　div#head

　　<div id="head"></div>

　　CLASS：.

　　div.head.clas1

　　<div class="head clas1"></div>

　　屬性：[]

　　div [name="name1" title="title1"]　　

　　<div name="name1" title="title1"></div>

React開發環境搭建