宣告：本教程不收取任何費用，歡迎轉載，尊重作者勞動成果，不得用於商業用途，侵權必究！！！！

如何搭建React的開發環境？

1、大前提是電腦已經安裝最新版的node.js環境，可以去官網下載最新的環境。

   可參考：Node.js的安裝

2、npm命令等（如上圖）。

（1）安裝官方腳手架

npm install -g create-react-app

這個是React官方提供的腳手架，安裝可能需要花一些時間

-g代表全域性安裝

安裝後報錯：

checkPermissions Missing write access to /usr/local/lib/node_modules

那是因為檔案沒有root許可權,執行語句前面加上sudo

即：sudo npm install -g create-react-app

這時候讓你輸入密碼，密碼不會顯示，直接enter就行了

安裝結果如下圖：

（2）建立工程

create-react-app my-app

my-app是工程的名字

建立工程的時候，會下載一些node models元件，所以會花一些時間。

由於它的網站需要連線國外的vpn伺服器，所以有可能失敗。重試幾次就好啦，這個大家不用擔心。 

切換到mac的指定目錄：

cd /Users/luminal/Documents/LuminalCode/Luminal_Web_H5/ReactProject

在目錄下建立工程my-app-yyh

create-react-app my-app-yyh

然後你可以在

/Users/luminal/Documents/LuminalCode/Luminal_Web_H5/ReactProject目錄下，

看到my-app-yyh資料夾，這就是建立後的工程

建立工程以後開啟看看

package.json是Node JS的配置檔案，是我們所有的命令以及它安裝的元件

scripts裡面是我們要用到的命令

start 啟動，

build 打包操作，上線之前build才能繫結到我們伺服器上

test  單元測試

eject 是為了彈出我們的配置資訊

最常見的的是：start、build命令

（3）進入工程目錄

cd 目標路徑

my-app是工程的名字。我這裡定義的名字my-app-yyh

進入工程目錄

cd /Users/luminal/Documents/LuminalCode/Luminal_Web_H5/ReactProject/my-app-yyh

（4）啟動工程

npm run start

對程式碼進行編譯，開啟測試伺服器，然後會顯示下面的介面：

然後會自動開啟瀏覽器（有點吃cpu耗效能，我的mac沒感覺到！）

當我們看到這個介面的時候，就代表React環境搭建成功了！