使用Mac初始化一個react項目

一、安裝JavaScript包的管理器(使⽤npm指令管理項⽬所依賴的JavaScript庫)
(1)因爲npm庫最早是Node.js項目使⽤的包管理⼯工具，後來流行成爲全部的前端JavaScript庫的 包管理理工具。因此下載安裝npm，直接進入到Node.js官網上下載安裝。 https://nodejs.org/en/
操做:下載安裝。
測試:npm -v 獲得安裝的版本號

(2)因爲npm使⽤了不少國外的服務器鏡像地址，國內訪問速度很慢，因此有淘寶的鏡像(10min同步一次)
指令:npm install -g cnpm --registry=https://registry.npm.taobao.org
測試:cnpm -v 獲得安裝淘寶鏡像npm的版本號

(3)永久更改npm使⽤的源地址
指令:npm config get registry //獲得如今的默認源地址
配置:npm config set registry https://registry.npm.taobao.org
測試:npm config get registry

二、安裝React項目初始化的安裝器 (本質上是一個node執行的js⽂文件)
指令:cnpm install -g create-react-app
測試:create-react-app

三、建立第一個React前端頁⾯項目
指令:create-react-app fapp-test
測試:cd fapp-test
啓動:npm start
使⽤瀏覽器能夠觀測，有一個react所作的⻚面。http://localhost:3000/

四、爲fapp-test項⽬安裝其餘依賴包
(1)⼦項目依賴包
指令:cd fapp-test
安裝:npm install redux react-redux redux-thunk react-router-dom connected-react-router --save

(2)調試輔助依賴包(配合谷歌瀏覽器使⽤)
指令:npm install redux-devtools-extension --save

五、安裝谷歌瀏覽器測試插件
(1)React Devtools(能夠檢視React組件的樹形結構)
下載地址:
https://chrome.google.com/web...

(2)Redux Devtools(能夠檢視Redux數據流，能夠將Store狀態跳躍到任何⼀個歷史狀態)
下載地址:
https://chrome.google.com/web...

六、配合Visual Studio Code使用，安裝智能提示插件
(1)Full React/React Native/React Router/Redux/GraphQL/ES7/Testing/PropTypes snippets
(2)React+Redux Snippets