一、安裝node

1. 請在官網下載安裝：https://nodejs.org/zh-cn/
2. vscode 中 點選 (ctrl + `) 調出終端
3. 輸入指令node -v，能顯示版本號，說明 node 已經裝好了
4. 輸入指令npm -v，能顯示版本號，說明 npm 可以使用了

點選連結檢視圖文教程
https://blog.csdn.net/qq_45677671/article/details/114535955

二、配置淘寶映象

• 輸入指令：
• npm install -g cnpm --registry=https://registry.npm.taobao.org
• 輸入指令cnpm -v，能顯示版本號，說明 cnpm 已經裝好了

三、配置vscode（win10）

win7 無需配置

右擊VSCode圖示，選擇屬性，選擇相容性，勾選以管理員身份執行此程式，最後點選確定

1. vscode 中 點選 ctrl + ` 調出終端
2. 輸入命令：get-ExecutionPolicy
3. 輸入命令：set-ExecutionPolicy RemoteSigned
4. 輸入命令：get-ExecutionPolicy

• Restricted：表示禁止終端使用命令的
• RemoteSigned：表示可以使用終端命令了

四、全域性安裝腳手架

• 在終端輸入命令：npm install -g create-react-app

• 這需要等待一段時間，這個過程在安裝三個東西
• react: react的頂級庫
• react-dom: react在web段的執行環境
• react-scripts: 包含執行和打包react應用程式的所有指令碼及配置

五、建立專案

• 先建立一個放置專案的資料夾www
• 在終端中使用cd指令跳轉到這個資料夾
• 建立專案指令：create-react-app your-app（your-app是專案名，可以自己取）

• 出現下面的介面，表示建立專案成功：

Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into 
 
static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd your-app
  npm start

Happy hacking!

• 通過cd your-app命令進入目錄
• 執行npm start即可執行專案

• 生成專案的目錄結構如下：

├── README.md            使用方法的文件
├── node_modules        所有的依賴安裝的目錄
├── package-lock.json    鎖定安裝時的包的版本號,保證團隊的依賴能保證一致。
├── package.json                    
├── public                靜態公共目錄
└── src                    開發用的原始碼目錄

編寫第一個react程式教程

點選跳轉：https://blog.csdn.net/qq_45677671/article/details/115874685

Ref:(42條訊息) React vscode 建立 react 專案流程【超詳細】_一顆不甘墜落的流星的部落格-CSDN部落格