安裝 React.js
React.js 單獨使用基本上是不可能的事情。不要指望着類似於 jQuery 下載放到 <head /> 標簽就開始使用。使用 React.js 不管在開發階段生產階段都需要一堆工具和庫輔助,編譯階段你需要借助 Babel;需要 Redux 等第三方的狀態管理工具來組織代碼;如果你要寫單頁面應用那么你需要 React-router。這就是所謂的“React.js全家桶”。
本課程不會教大家如何配置這些東西,因為這不是課程的重點,網上有很多的資料,大家可以去參考那些資料。我們這里會直接使用 React.js 官網所推薦使用的工具 create-react-app 工具。它可以幫助我們一鍵生成所需要的工程目錄,並幫我們做好各種配置和依賴,也幫我們隱藏了這些配置的細節。也就是所謂的“開箱即用”。
工具地址:https://github.com/facebookincubator/create-react-app
在安裝之前要確認你的機器上安裝了 node.js 環境包括 npm。如果沒有安裝的同學可以到 node.js 的官網下載自己電腦的對應的安裝包來安裝好環境。
安裝好環境以后,只需要按照官網的指引安裝 create-react-app 即可。
npm install -g create-react-app
這條命令會往我們的機器上安裝一條叫 create-react-app 的命令,安裝好以后就可以直接使用它來構建一個 react 的前端工程:
create-react-app hello-react
這條命令會幫我們構建一個叫 hello-react 的工程,並且會自動地幫助我們安裝所需要的依賴,現在只需要安靜地等待它安裝完。
額外的小貼士:
如果有些同學安裝過程比較慢,那是很有可能是因為 npm 下載的時候是從國外的源下載的緣故。所以可以把 npm 的源改成國內的 taobao 的源,這樣會加速下載過程。在執行上面的命令之前可以先修改一下 npm 的源:
npm config set registry https://registry.npm.taobao.org
下載完以后我們就可以啟動工程了,進入工程目錄然后通過 npm 啟動工程:
cd hello-react npm start
終端提示成功:
並且會自動打開瀏覽器,就可以看到 React 的工程順利運行的效果:
這時候我們把 src/App.js 文件中的 <h2> 標簽的內容修改為 Hello React,
<h2>Hello React</h2>
保存一下,然后戶就會發現瀏覽器自動刷新,並且我們的修改也生效了:
到這里我們的環境已經安裝好了,並且順利地運行了我們第一個例子。接下來我們會探討 React.js 的組件的基本寫法。





