選擇工具
開(kāi)發(fā)react的工具很多,我們這里選擇atom,首先去atom的官網(wǎng)下載https://atom.io 下載之后打開(kāi)就可以使用
插件安裝
1.在線安裝方式
按command+,打開(kāi)設(shè)置頁(yè)面,在搜索框中搜索,然后點(diǎn)擊需要安裝的插件進(jìn)行install
圖片.png
2.從github下載插件安裝
如上我們可以在線安裝,但是有時(shí)候我們的網(wǎng)速不好,這樣安裝就會(huì)出現(xiàn)失敗.此時(shí)我們可以選擇下載插件安裝:
從github進(jìn)行搜索相應(yīng)插件,克隆到上圖標(biāo)紅的路徑下/Users/panyuanyuan/.atom/packages
shizhengyangdeMacBook-Pro:packages panyuanyuan$ git clone https://github.com/magbicaleman/open-in-browser.git
Cloning into 'open-in-browser'...
remote: Counting objects: 259, done.
remote: Total 259 (delta 0), reused 0 (delta 0), pack-reused 259
Receiving objects: 100% (259/259), 34.43 KiB | 0 bytes/s, done.
Resolving deltas: 100% (115/115), done.
進(jìn)入到插件的目錄中進(jìn)行安裝
shizhengyangdeMacBook-Pro:packages panyuanyuan$ ls
README.md open-in-browser
shizhengyangdeMacBook-Pro:packages panyuanyuan$ cd open-in-browser/
shizhengyangdeMacBook-Pro:open-in-browser panyuanyuan$ npm install
安裝完成之后重啟atom就會(huì)看到安裝好的插件
圖片.png
React的環(huán)境搭建<簡(jiǎn)潔包方式,練習(xí)>---不推薦
進(jìn)入到如下的網(wǎng)站進(jìn)行下載ract,http://reactjs.cn/react/downloads.html
下載之后的目錄
圖片.png
單獨(dú)下載browser.min.js---將jsx語(yǔ)法轉(zhuǎn)換為js語(yǔ)法
圖片.png
npm的方式(推薦,公司使用)
1.nodejs安裝
訪問(wèn)nodejs官網(wǎng)https://nodejs.org/zh-cn/ 或者是https://nodejs.org/ 選擇版本下載,我們選擇當(dāng)前最新版本,下載完畢之后一直下一步下一步即可
圖片.png
注意:安裝nodejs之后同時(shí)也安裝了npm:npm是js最大開(kāi)源生態(tài)包管理工具,網(wǎng)址:
https://www.npmjs.com
圖片.png
安裝好nodejs后我們可以打開(kāi)終端查看安裝結(jié)果,輸入命令:
shizhengyangdeMacBook-Pro:0504 panyuanyuan$ node -v
v7.9.0
shizhengyangdeMacBook-Pro:0504 panyuanyuan$ npm -v
4.2.0
shizhengyangdeMacBook-Pro:0504 panyuanyuan$
圖片.png
2.npm配置國(guó)內(nèi)鏡像
由于npm管理的包非常巨大,下載的時(shí)候會(huì)非常的慢,針對(duì)這樣的現(xiàn)狀我們有兩種解決辦法:1.翻墻(最好的辦法)2.配置國(guó)內(nèi)鏡像---阿里云
npm配置阿里云的步驟:
打開(kāi)npm阿里云官網(wǎng)http://npm.taobao.org/
圖片.png
方式一:安裝cnpm,這樣我們以后通過(guò)cnpm安裝js包
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
方式二(推薦),依舊使用npm下載.
進(jìn)入到~/目錄,編輯.npmrc文件(如果沒(méi)有此文件,則新建一個(gè)):添加如下配置
shizhengyangdeMacBook-Pro:0504 panyuanyuan$ cd ~/
shizhengyangdeMacBook-Pro:~ panyuanyuan$ vim .npmrc
registry=https://registry.npm.taobao.org
這樣之后我們下載包的時(shí)候都會(huì)走國(guó)內(nèi)的鏡像
至此我們的環(huán)境準(zhǔn)備就結(jié)束了,下一節(jié)我們使用npm的方式(官方推薦)和快速包的方式搭建react項(xiàng)目.
