React框架學習之react環境搭建
樓主剛開始學習react框架(完全的前端小白)在搭建環境這一關都花了不少時間。(還是得多虧同學的幫助,帶我走出了困境,看到了希望)所以在此總結一下。
一、 通過npm使用React
1、node.js的安裝。
如果你的系統不支援Node.js及NPM,則Node.js安裝包及原始碼下載地址為:https://nodejs.org/en/download/
如果你和我一樣是windows 64位系統,那和我一樣按如下選擇:
你可以根據不同平臺系統選擇你需要的Node.js安裝包。
Windows 安裝包(.msi)
安裝步驟1:雙擊下載後的安裝包,如下圖所示:
步驟2:點選以上的Run(執行),將出現如下介面,點選next進入下一個介面:
步驟3:勾選接受協議選項,點選”Next“進入下一步:
步驟4:Node.js預設安裝目錄為”C:、Program File\nodejs\“,你可以修改目錄,並點選next(下一步):
步驟5:點選樹形圖示來選擇你需要的安裝模式,然後點選下一步(next)
步驟6;點選install(安裝)開始安裝Node.js。你也可以點選Back(返回)來修改先前配置。然後點選next:直到安裝結束:
步驟7:檢測是否已經成功安裝node.js :點選cmd,輸入node -v 如果可以檢視當前Node.js版本,則說明node.js安裝成功。
目前的node.js都自帶npm的。所以無需安裝npm
2、React中使用CommonJS模組系統,如browserify或webpack,本教程使用webpack。
國內使用npm速度較慢,你可以使用淘寶定製的cnpm命令列工具代替預設的npm:
在這裡,你可以進入自己定義的某個檔案路徑下,執行命令,否則預設是在C盤下。
如:我選擇的是
D:\\install\nodeinstall\ npm install -g cnpm --registry=https://registry.npm.taobao.org
D:\\install\nodeinstall\ npm config set registry https://registry.npm.taobao.org
ps:補充: 這樣就可以使用cnpm 命令來安裝模組了:
cnpm install [模組名]
更多資訊查閱:http://npm.taobao.org/.
3、使用create-react-app快速構建React開發環境
create-react-app 是來自於Facebook,通過該命令我們無需配置就能快速構建React開發環境。
create-react-app 自動建立的專案是基於webpack +ES6
進入專案目錄建立專案:
安裝目錄 cnpm install -g create -react -app
安裝目錄 create-react-app my-app
cd my-app/
npm start
即可在瀏覽器中開啟 http://localhost:3000/ ,結果如下圖所示:
配置成功!下面可以進入專案編寫你的程式碼吧!