簡易配置一個順手的ReactNative開發(fā)環(huán)境

安裝Homebrew和node.js

  1. 一臺mac
  2. Xcode 7.2或以上版本
  3. 安裝好Homebrew http://brew.sh/
  4. 安裝Node.js 4.0或更高版本(譯注:如果你并不使用Node.js開發(fā)網(wǎng)站姜凄,只是用于React Native的開發(fā)葫松,那么請先安裝homebrew渠驼,然后直接使用brew install node
    安裝即可毒涧,不必按照下面的nvm的安裝步驟),如果你從未接觸過npm乐尊,推薦閱讀npm的文檔
    $ brew install node
    5.在命令行中輸入brew install watchman
    樊诺,我們推薦安裝watchman咬最,否則你可能會遇到一個Node.js監(jiān)視文件系統(tǒng)的BUG邮辽。
    6.如果你希望使用flow來為js代碼加上類型檢查蕴轨,那么在命令行中輸入brew install flow
    來安裝flow港谊。(譯注:新手可以跳過這一步)

安裝ReactNative

  1. 安裝react-native
    $ npm install -g react-native-cli
  2. 使用從官方服務器下載初始項目(推薦下載完成之后備份一份項目文件,因為下載起來很慢)
    $ react-native init ProjectName
  3. cd到項目根文件,然后運行項目
    $ cd ProjectName $ react-native run-ios
  4. 編輯 ~/ProjectName/index.ios.js 進行開發(fā)

配置一個合適的IDE(更新:我最終還是選擇了Sublime)

SublimeText配置鏈接:把SublimeText配置成ReactNative的IDE


查閱了網(wǎng)上很多帖子,大部分使用WebStorm或Atom+Nuclide.其中有幾篇帖子說Atom+Nuclide會很卡,但是我自己嘗試了之后并沒有發(fā)現(xiàn)卡頓的問題.反而手感遠勝WebStorm(或許是我個人的偏見).并且Nuclide的補全較好,畢竟Nuclide是Facebook官方為ReactNative訂制的.
這里就以Atom+Nuclide為例子配置.

  1. 下載Atom,并且安裝
    https://atom.io/
  2. 打開終端,安裝nuclide
    $ git clone https://github.com/facebook/nuclide.git $ cd nuclide $ npm install $ apm link
  3. 安裝react插件,
    apm install react
    插件使用技巧:http://orktes.github.io/atom-react/
    小貼士,安裝了React插件之后,jsx編寫xml會有較好的自動補全.
  4. 打開Atom的自動換行:Settings->Soft Wrap
  5. 使用Atom打開之前的項目: ~/ProjectName

享受Atom+ReactNative吧!

  1. 使用nuclide開啟服務:Cmd+Shift+P, 搜索 Start Packager,開啟服務
  2. 使用終端進行真機測試:
    $react-native run-ios $react-native run-android

附:學習ReactNative的一些網(wǎng)站

先看ES6語法變化 http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8
官方文檔 http://facebook.github.io/react-native/
React-Native學習指南 https://github.com/ele828/react-native-guide
阮一峰 http://www.ruanyifeng.com/blog/2015/03/react.html
國內(nèi)更新較為頻繁的文章列表 https://segmentfault.com/t/react-native/blogs
知乎日報例子 https://github.com/race604/ZhiHuDaily-React-Native

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市橙弱,隨后出現(xiàn)的幾起案子歧寺,更是在濱河造成了極大的恐慌燥狰,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,290評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件斜筐,死亡現(xiàn)場離奇詭異龙致,居然都是意外死亡,警方通過查閱死者的電腦和手機顷链,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評論 2 385
  • 文/潘曉璐 我一進店門目代,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人嗤练,你說我怎么就攤上這事榛了。” “怎么了煞抬?”我有些...
    開封第一講書人閱讀 156,872評論 0 347
  • 文/不壞的土叔 我叫張陵忽冻,是天一觀的道長。 經(jīng)常有香客問我此疹,道長僧诚,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,415評論 1 283
  • 正文 為了忘掉前任蝗碎,我火速辦了婚禮湖笨,結果婚禮上,老公的妹妹穿的比我還像新娘蹦骑。我一直安慰自己慈省,他們只是感情好,可當我...
    茶點故事閱讀 65,453評論 6 385
  • 文/花漫 我一把揭開白布眠菇。 她就那樣靜靜地躺著边败,像睡著了一般。 火紅的嫁衣襯著肌膚如雪捎废。 梳的紋絲不亂的頭發(fā)上笑窜,一...
    開封第一講書人閱讀 49,784評論 1 290
  • 那天,我揣著相機與錄音登疗,去河邊找鬼排截。 笑死,一個胖子當著我的面吹牛辐益,可吹牛的內(nèi)容都是我干的断傲。 我是一名探鬼主播,決...
    沈念sama閱讀 38,927評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼智政,長吁一口氣:“原來是場噩夢啊……” “哼认罩!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,691評論 0 266
  • 序言:老撾萬榮一對情侶失蹤孕荠,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后瞬测,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體乔外,經(jīng)...
    沈念sama閱讀 44,137評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡床三,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,472評論 2 326
  • 正文 我和宋清朗相戀三年一罩,在試婚紗的時候發(fā)現(xiàn)自己被綠了杨幼。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,622評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡聂渊,死狀恐怖差购,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情汉嗽,我是刑警寧澤欲逃,帶...
    沈念sama閱讀 34,289評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站饼暑,受9級特大地震影響稳析,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜弓叛,卻給世界環(huán)境...
    茶點故事閱讀 39,887評論 3 312
  • 文/蒙蒙 一彰居、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧撰筷,春花似錦陈惰、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至关筒,卻和暖如春溶握,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蒸播。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工奈虾, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人廉赔。 一個月前我還...
    沈念sama閱讀 46,316評論 2 360
  • 正文 我出身青樓肉微,卻偏偏與公主長得像,于是被迫代替她去往敵國和親蜡塌。 傳聞我的和親對象是個殘疾皇子碉纳,可洞房花燭夜當晚...
    茶點故事閱讀 43,490評論 2 348

推薦閱讀更多精彩內(nèi)容