在code安裝react的方法

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

創(chuàng)新互聯(lián)網(wǎng)絡(luò)公司擁有10年的成都網(wǎng)站開發(fā)建設(shè)經(jīng)驗(yàn)，1000+客戶的共同信賴。提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站開發(fā)、網(wǎng)站定制、買友情鏈接、建網(wǎng)站、網(wǎng)站搭建、自適應(yīng)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)師打造企業(yè)風(fēng)格，提供周到的售前咨詢和貼心的售后服務(wù)

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

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

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

開發(fā)工具 visual studio code

node 安裝和 npm

windows 安裝node 可以直接在 node官網(wǎng) 直接下載直接當(dāng)作普通軟件安裝即可。
安裝完成可以在控制臺中運(yùn)行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)很詳細(xì) 按照文檔來一遍就基本上沒問題。

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

至此新建的React項(xiàng)目已經(jīng)可以正常運(yùn)行了
5.用VS Code 打開項(xiàng)目文件夾，這里可以看到整個文件結(jié)構(gòu)

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

安裝 Debugger for Chrome

VS Code 提供 Debugger for Chrome 插件可以支持使用chrome內(nèi)核debug。

直接搜索安裝之后重新加載一次VS Code
2.使用Debugger for Chrome 進(jìn)行debug 需要對項(xiàng)目進(jìn)行額外的配置

在此處設(shè)置啟動配置，文檔原文中所說的會創(chuàng)建一個新的launch.json,我這里已經(jīng)存在一個launch.json文件則直接在里面添加配置即可，這里有一個添加配置的按鈕可以直接添加配置節(jié)點(diǎn) ，注意這里有兩個chrome相關(guān)節(jié)點(diǎn)一個Launch 一個 Attach

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

{
    // 使用 IntelliSense 了解相關(guān)屬性。 
    // 懸停以查看現(xiàn)有屬性的描述。
    // 欲了解更多信息，請?jiān)L問: 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"
        }
    ]}

啟動項(xiàng)目npm start 然后打開debug工具欄

選擇之前添加的 chrome 節(jié)點(diǎn)啟動，此時會打開一個新的chrome頁面
在項(xiàng)目源代碼種找到index.js文件打上斷點(diǎn)在行號前面點(diǎn)左鍵即可之后刷新頁面，則可進(jìn)入端點(diǎn)

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

安裝 eslint

eslint 是一個可組裝的JavaScript和JSX檢查工具?？捎糜跈z查語法錯誤規(guī)范代碼。

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

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

分享文章：在code安裝react的方法
URL分享：http://chinadenli.net/article28/pijhjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站維護(hù)、域名注冊、移動網(wǎng)站建設(shè)、Google、網(wǎng)頁設(shè)計(jì)公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容