怎麼在code安裝react

在code中安装react的方法：首先安装好vscode；然后使用npm安装“create-react-app”；接着通过“create-react-app my-app”命令创建一个React项目；最后运行npm start进行检测即可。

推荐：《js视频教程》

visual studio code + react 开发环境搭建

开发环境 windows

开发工具 visual studio code

node 安装和 npm

windows 安装node 可以直接在 node官网 直接下载直接当作普通软件安装即可。
安装完成可以在控制台中运行node测试是否安装成功 win + r 输入 cmd ,直接在终端输入node -v 输出版本号及已经成功安装。
目前新版本的node自带npm(npm 是随同 node 一起安装的包管理工具)。这里安装好了 node并且测试安装成功之后，可以继续在控制台输入 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）文档已经很详细 按照文档来一遍就基本上没问题。

1. 创建本地文件夹，即保存项目的文件夹，在文件夹下打开控制台我这里使用git bash直接在文件夹下右键找到git bash启动即可
2. 在控制台输入 npm install -g create-react-app 使用npm安装 create-react-app
3. 安装完 create-react-app 之后 继续输入 create-react-app my-app 来创建一个项目 my-app 是创建出来的 React 项目，等待一段时间(这里需要下载一些依赖包)，即可看到创建完成的整个文件结构
   
4. 切换控制台目录到项目目录下 运行 npm start 检测当前项目是否创建成功 正常情况下当输入命令之后 会直接打开默认浏览器预览 http://localhost:3000/ 此时会看到一个react的页面
   
   至此新建的React项目已经可以正常运行了
   5.用VS Code 打开项目文件夹，这里可以看到整个文件结构

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

安装 Debugger for Chrome

1. VS Code 提供 Debugger for Chrome 插件 可以支持使用chrome内核debug。
   
   直接搜索 安装 之后重新加载一次VS Code
   2.使用Debugger for Chrome 进行debug 需要对项目进行额外的配置
   
   在此处设置启动配置，文档原文中所说的会创建一个新的launch.json,我这里已经存在一个launch.json文件则直接在里面添加配置即可，这里有一个添加配置的按钮可以直接添加配置节点 ，注意这里有两个chrome相关节点一个Launch 一个 Attach
   

创建完两个节点 之后 找到 "request": "launch" 的一个节点里面有一个url将这个url设置为之前 React 项目启动的url，即 http://localhost:3000/ 另一个配置节点默认即可如有问题再做修改，修改后的全部配置如下：

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: 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"
        }
    ]}

3. 启动项目npm start 然后打开debug工具栏
   
   选择之前添加的 chrome 节点启动 ，此时会打开一个新的chrome页面

4. 在專案原始碼種找到index.js檔案打上斷點在行號前面點左鍵即可之後刷新頁面，則可進入端點
   

至此已經可以簡單進行偵錯了。

安裝 eslint

eslint 是可組裝的JavaScript和JSX檢查工具。可用於檢查語法錯誤規範代碼。

1. 在控制台輸入npm install -g eslint 安裝eslint
2. 在透過VS Code 安裝eslint 外掛程式
   
3. #開啟VS Code 的命令面板直接在檢視種找到或Ctrl Shift P 輸入ESLint 找到建立.eslintrc.json檔案的選項此時專案根目錄下會建立設定檔此時你在專案中的一些語法錯誤會被自動偵測出來
   

參考文件中還有設定分號的規則，需要的可以加入。

#

以上是怎麼在code安裝react的詳細內容。更多資訊請關注PHP中文網其他相關文章！