react.js學習系列-react.js開發(fā)環(huán)境的搭建

目標:react及webpack的環(huán)境的搭建。

簡介

react本身是由少量API構(gòu)成的一個web庫膘侮。目前官方建議使用語法為ES6。

使用到的工具

  • webpack

正如官網(wǎng)對 Webpack 的描述蚕甥,它是一種模塊化加載器糊啡,當然也不僅僅限于此。某種程度上來說豪娜,可以代替某些gulp的功能餐胀,至少有些還是無法替代的。在webpack中所有的資源都會被視作模塊來處理瘤载,為了應(yīng)對這樣的情況否灾,webpack有對應(yīng)的loader機制來處理,另外shim鸣奔,plugins墨技,和其他構(gòu)建工具,一樣一樣的挎狸,更多的細節(jié)扣汪,需要你在實際的應(yīng)用中慢慢去體會了。

  • babel

Babel 是一個 JavaScript 編譯器锨匆,用于將你的ES2016代碼轉(zhuǎn)換成ES6跑在瀏覽器中崭别。

  • npm包依賴管理

做為Node世界里的包管理器,我想大家從Grunt時代起就已經(jīng)熟練的使用npm install命令來安裝一些依賴完成前端自動化構(gòu)建任務(wù)恐锣。

nodemon和koa

nodemon可以用來監(jiān)控文件并且重啟Node服務(wù)器茅主,koa是Node世界里的一個Web開發(fā)框架。由于kodo項目用koa寫了一個靜態(tài)服務(wù)器土榴,所以且需要使用它诀姚。如果你有 browser-sync 的使用經(jīng)驗,你可以替換成它鞭衩。

Let's start!

安裝webpack

再次之前已經(jīng)安裝好了node.js

npm install webpack -g

webpack也有一個web服務(wù)器webpack-dev-server学搜。

npm install webpeak-dev-server

上述安裝完成后:
有兩個選擇去開始react項目娃善。

選擇一:安裝并使用creacte-react-app快速構(gòu)建react開發(fā)環(huán)境

create-react-app 是來自于 Facebook论衍,通過該命令我們無需配置就能快速構(gòu)建 React 開發(fā)環(huán)境瑞佩。
create-react-app 自動創(chuàng)建的項目是基于 Webpack + ES6 。

執(zhí)行以下命令創(chuàng)建項目:


$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

然后在瀏覽器中打開http://localhost:3000坯台,結(jié)果如下圖所示

屏幕快照 2017-02-16 下午3.35.17.png

文件目錄如下所示:

屏幕快照 2017-02-16 下午4.14.54.png

選擇二:自己一步一步手動來弄

由于我自己沒有弄成功炬丸,所以暫時不寫了,等弄好后更新這部分蜒蕾。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末稠炬,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子咪啡,更是在濱河造成了極大的恐慌首启,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件撤摸,死亡現(xiàn)場離奇詭異毅桃,居然都是意外死亡,警方通過查閱死者的電腦和手機准夷,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進店門钥飞,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人衫嵌,你說我怎么就攤上這事读宙。” “怎么了楔绞?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵结闸,是天一觀的道長。 經(jīng)常有香客問我酒朵,道長桦锄,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任耻讽,我火速辦了婚禮察纯,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘针肥。我一直安慰自己饼记,他們只是感情好,可當我...
    茶點故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布慰枕。 她就那樣靜靜地躺著具则,像睡著了一般。 火紅的嫁衣襯著肌膚如雪具帮。 梳的紋絲不亂的頭發(fā)上博肋,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天低斋,我揣著相機與錄音,去河邊找鬼匪凡。 笑死膊畴,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的病游。 我是一名探鬼主播唇跨,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼衬衬!你這毒婦竟也來了买猖?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤滋尉,失蹤者是張志新(化名)和其女友劉穎玉控,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體狮惜,經(jīng)...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡高诺,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了讽挟。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片懒叛。...
    茶點故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖耽梅,靈堂內(nèi)的尸體忽然破棺而出薛窥,到底是詐尸還是另有隱情,我是刑警寧澤眼姐,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布诅迷,位于F島的核電站,受9級特大地震影響众旗,放射性物質(zhì)發(fā)生泄漏罢杉。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一贡歧、第九天 我趴在偏房一處隱蔽的房頂上張望滩租。 院中可真熱鬧,春花似錦利朵、人聲如沸律想。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽技即。三九已至,卻和暖如春樟遣,著一層夾襖步出監(jiān)牢的瞬間而叼,已是汗流浹背身笤。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留葵陵,地道東北人液荸。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像埃难,于是被迫代替她去往敵國和親莹弊。 傳聞我的和親對象是個殘疾皇子涤久,可洞房花燭夜當晚...
    茶點故事閱讀 43,527評論 2 349

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