React環(huán)境搭建

一.安裝node.js

官方下載地址https://nodejs.org/en/
盡量安裝最新的穩(wěn)定版,react對node.js有版本要求

Node.js? is a JavaScript runtime built on Chrome's V8 JavaScript engine.

JavaScript一般都是在瀏覽器中執(zhí)行的淑趾,而node.js就是提供了一個可獨立執(zhí)行JavaScript的環(huán)境抓半,這樣我們就有了一個可以獨立部署的前端工程。

通過以下命令檢查是否安裝成功
node -v
npm -v

二.npm包管理工具 基本使用

NPM是隨同NodeJS一起安裝的包管理工具嵌牺,能解決NodeJS代碼部署上的很多問題肴楷,常見的使用場景有以下幾種:
1.允許用戶從NPM服務(wù)器下載別人編寫的第三方包到本地使用鸟妙。
2.允許用戶從NPM服務(wù)器下載并安裝別人編寫的命令行程序到本地使用。
3.允許用戶將自己編寫的包或命令行程序上傳到NPM服務(wù)器供別人使用奶甘。

本地安裝

npm install 包名@版本號
uninstall同理

  1. 將安裝包放在 ./node_modules 下(運行 npm 命令時所在的目錄
    )篷店,如果沒有 node_modules 目錄,會在當(dāng)前執(zhí)行 npm 命令的目錄
    下生成 node_modules 目錄臭家。

全局安裝

npm install -g 包名@版本號
uninstall同理

  1. 將安裝包放在 /usr/local 下或者你 node 的安裝目錄疲陕。
  2. 可以直接在命令行里使用。

其他常見命令
npm list -g 查看安裝的包列表
npm list grunt

三.創(chuàng)建并運行react項目

npm install -g create-react-app 安裝官方提供的生成react項目demo工具
create-react-app hello-react 在當(dāng)前目錄下創(chuàng)建名為hello-react的項目

如果安裝包太慢钉赁,可以改為國內(nèi)的淘寶源
npm config set registry https://registry.npm.taobao.org

cd hello-react 進(jìn)入項目目錄
npm start 運行

四.項目目錄結(jié)構(gòu)介紹

yarn.lock 安裝包版本號
package.json 運行npm start 命令就是運行該文件里的內(nèi)容
node_modules 外部包文件
public/index.html 頁面上顯示的html的內(nèi)容
public/manfest.json PWA 如果是作為一個app蹄殃,定義app的圖標(biāo),主體
src /index.js 項目的執(zhí)行入口

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末你踩,一起剝皮案震驚了整個濱河市诅岩,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌带膜,老刑警劉巖吩谦,帶你破解...
    沈念sama閱讀 206,126評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異膝藕,居然都是意外死亡式廷,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評論 2 382
  • 文/潘曉璐 我一進(jìn)店門芭挽,熙熙樓的掌柜王于貴愁眉苦臉地迎上來滑废,“玉大人,你說我怎么就攤上這事袜爪∪涑茫” “怎么了?”我有些...
    開封第一講書人閱讀 152,445評論 0 341
  • 文/不壞的土叔 我叫張陵饿敲,是天一觀的道長妻导。 經(jīng)常有香客問我逛绵,道長怀各,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,185評論 1 278
  • 正文 為了忘掉前任术浪,我火速辦了婚禮瓢对,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘胰苏。我一直安慰自己硕蛹,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 64,178評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著法焰,像睡著了一般秧荆。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上埃仪,一...
    開封第一講書人閱讀 48,970評論 1 284
  • 那天乙濒,我揣著相機(jī)與錄音,去河邊找鬼卵蛉。 笑死颁股,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的傻丝。 我是一名探鬼主播甘有,決...
    沈念sama閱讀 38,276評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼葡缰!你這毒婦竟也來了亏掀?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,927評論 0 259
  • 序言:老撾萬榮一對情侶失蹤泛释,失蹤者是張志新(化名)和其女友劉穎幌氮,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體胁澳,經(jīng)...
    沈念sama閱讀 43,400評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡该互,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,883評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了韭畸。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片宇智。...
    茶點故事閱讀 37,997評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖胰丁,靈堂內(nèi)的尸體忽然破棺而出随橘,到底是詐尸還是另有隱情,我是刑警寧澤锦庸,帶...
    沈念sama閱讀 33,646評論 4 322
  • 正文 年R本政府宣布机蔗,位于F島的核電站,受9級特大地震影響甘萧,放射性物質(zhì)發(fā)生泄漏萝嘁。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,213評論 3 307
  • 文/蒙蒙 一扬卷、第九天 我趴在偏房一處隱蔽的房頂上張望牙言。 院中可真熱鬧,春花似錦怪得、人聲如沸咱枉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蚕断。三九已至欢伏,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間亿乳,已是汗流浹背颜懊。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評論 1 260
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留风皿,地道東北人河爹。 一個月前我還...
    沈念sama閱讀 45,423評論 2 352
  • 正文 我出身青樓,卻偏偏與公主長得像桐款,于是被迫代替她去往敵國和親咸这。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,722評論 2 345

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

  • 其實在今年年初魔眨,就初略的寫過一篇關(guān)于react項目創(chuàng)建的詳細(xì)步驟的文章媳维,但那時候都是在最后實踐完成之后自己憑借著回...
    Swimly閱讀 3,144評論 0 2
  • 在當(dāng)下前端熱潮中,一大批前端開發(fā)者遏暴,迷失了學(xué)習(xí)和追求的方向侄刽,面對日夜更迭的前端技術(shù),我想大多數(shù)人跟我一樣會覺得自己...
    wenzirang閱讀 601評論 0 3
  • React環(huán)境搭建(一):webpack author: lordkhandate: 2017-02-08refe...
    lordkhan閱讀 612評論 0 0
  • 周末呆了兩天星巴克朋凉,通讀了一遍react以及部分npm州丹,webpack的文檔,終于可以給一些像我一樣被前端雜亂的工...
    MMoooooon閱讀 2,108評論 2 2
  • 選擇工具 開發(fā)react的工具很多,我們這里選擇atom,首先去atom的官網(wǎng)下載https://atom.io ...
    者薄閱讀 1,880評論 0 1