React vscode 創建 react 項目流程

一、安裝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博客