在code安裝react的方法

小編給大家分享一下在code安裝react的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

在code中安裝react的方法：首先安裝好vscode；然后使用npm安裝“create-react-app”；接著通過“create-react-app my-app”命令創(chuàng)建一個React項目；最后運行npm start進行檢測即可。

visual studio code + react 開發(fā)環(huán)境搭建

開發(fā)環(huán)境 windows

開發(fā)工具 visual studio code

node 安裝和 npm

windows 安裝node 可以直接在 node官網(wǎng) 直接下載直接當(dāng)作普通軟件安裝即可。
安裝完成可以在控制臺中運行node測試是否安裝成功 win + r 輸入 cmd ,直接在終端輸入node -v 輸出版本號及已經(jīng)成功安裝。
目前新版本的node自帶npm(npm 是隨同 node 一起安裝的包管理工具)。這里安裝好了 node并且測試安裝成功之后，可以繼續(xù)在控制臺輸入 npm -v 檢查是不是安裝成功。同樣成功會輸出版本號。

安裝 visual studio code

vs code 正常軟件安裝 沒有需要注意的,直接下載安裝（https://code.visualstudio.com/）

安裝React

參照文檔 React JavaScript Tutorial in VS Code （https://code.visualstudio.com/docs/nodejs/reactjs-tutorial）文檔已經(jīng)很詳細 按照文檔來一遍就基本上沒問題。

1. 創(chuàng)建本地文件夾，即保存項目的文件夾，在文件夾下打開控制臺我這里使用git bash直接在文件夾下右鍵找到git bash啟動即可
2. 在控制臺輸入 npm install -g create-react-app 使用npm安裝 create-react-app
3. 安裝完 create-react-app 之后 繼續(xù)輸入 create-react-app my-app 來創(chuàng)建一個項目 my-app 是創(chuàng)建出來的 React 項目，等待一段時間(這里需要下載一些依賴包)，即可看到創(chuàng)建完成的整個文件結(jié)構(gòu)
   
4. 切換控制臺目錄到項目目錄下 運行 npm start 檢測當(dāng)前項目是否創(chuàng)建成功 正常情況下當(dāng)輸入命令之后 會直接打開默認瀏覽器預(yù)覽 http://localhost:3000/ 此時會看到一個react的頁面
   
   至此新建的React項目已經(jīng)可以正常運行了
   5.用VS Code 打開項目文件夾，這里可以看到整個文件結(jié)構(gòu)

所有文件都可以直接使用VS Code直接修改。

安裝 Debugger for Chrome

1. VS Code 提供 Debugger for Chrome 插件 可以支持使用chrome內(nèi)核debug。
   
   直接搜索 安裝 之后重新加載一次VS Code
   2.使用Debugger for Chrome 進行debug 需要對項目進行額外的配置
   
   在此處設(shè)置啟動配置，文檔原文中所說的會創(chuàng)建一個新的launch.json,我這里已經(jīng)存在一個launch.json文件則直接在里面添加配置即可，這里有一個添加配置的按鈕可以直接添加配置節(jié)點 ，注意這里有兩個chrome相關(guān)節(jié)點一個Launch 一個 Attach
   

創(chuàng)建完兩個節(jié)點 之后 找到 "request": "launch" 的一個節(jié)點里面有一個url將這個url設(shè)置為之前 React 項目啟動的url，即 http://localhost:3000/ 另一個配置節(jié)點默認即可如有問題再做修改，修改后的全部配置如下：

{
    // 使用 IntelliSense 了解相關(guān)屬性。 
    // 懸停以查看現(xiàn)有屬性的描述。
    // 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "node",
            "program": "${workspaceFolder}\\start"
        }
    ]}

1. 啟動項目npm start 然后打開debug工具欄
   
   選擇之前添加的 chrome 節(jié)點啟動 ，此時會打開一個新的chrome頁面

2. 在項目源代碼種找到index.js文件打上斷點在行號前面點左鍵即可 之后刷新頁面，則可進入端點
   

至此已經(jīng)可以簡單進行調(diào)試了。

安裝 eslint

eslint 是一個可組裝的JavaScript和JSX檢查工具。可用于檢查語法錯誤規(guī)范代碼。

1. 在控制臺輸入 npm install -g eslint 安裝 eslint
2. 在通過VS Code 安裝 eslint 插件
   
3. 打開VS Code 的 命令面板 直接在查看種找到或者 Ctrl+Shift+P 輸入ESLint 找到創(chuàng)建.eslintrc.json文件的選項 此時項目根目錄下會創(chuàng)建一個配置文件 此時你在項目中的一些語法錯誤會被自動檢測出來
   

看完了這篇文章，相信你對在code安裝react的方法有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！