先,我們需要明確的是React和很多前端框架一樣,底層都還是js以及html,即便它有着看似特殊的jsx語法。
我們要在服務端運行js,就需要依賴一個環境,和運行war包需要tomcat一類中間件一樣,運行js需要node.js,
同時因為我們用了各種框架,所以相應的module依賴也需要,需要使用npm工具,這就類似於maven管理jar包依賴一樣
同樣maven可以修改鏡像,而npm也可以改成淘寶的cnpm以及相應module庫地址。
let´s begin
(一)安裝Node.js、npm、cnpm
當我們在官網下載並安裝Node時,npm也自動安裝好了,一路next后即可。安裝好后鍵入node -v 以及npm -v 來測試是否安裝成功(不需要自己手動配置系統環境變量)
因為國內使用npm很慢,我們可以使用淘寶的cnpm,同時設置鏡像地址
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝成功后,可以鍵入cnpm -v檢查是否安裝成功
(二)創建我們的第一個react程序
例如我們要在D:\workSpace下創建first-react-demo這個工程,並跑通,我們依次執行如下步驟
window下進入D:\workSpace這個文件夾,在地址欄鍵入cmd enter,
cnpm install -g create-react-app 全局安裝創建react-app的module(這一步不一定要在workspace目錄下)
create-react-app first-react-demo 在workspct這個文件夾下創建fist-react-demo這個項目
但是,有可能會報錯 Unexpected end of JSON input while parsing near '....0","dependencies":{"' ,假如報錯,需要執行npm cache clean --force
在創建成功的基礎上,我們在打開first-react-demo這個文件夾,地址欄鍵入cmd並enter,在打開的cmd窗口中,鍵入npm start
大功告成。瀏覽器鍵入localhost:3000即可訪問