react从零到开始配置环境

最新推荐文章于 2024-05-25 06:00:00 发布

yoboxiong

最新推荐文章于 2024-05-25 06:00:00 发布

阅读量410

点赞数

文章标签： react

本文链接：https://blog.csdn.net/weixin_42597917/article/details/109370952

版权

本文详细介绍了如何从零开始搭建React开发环境，包括安装VSCode、Node.js、git，创建React项目，安装调试插件如Debugger for Chrome，并演示了如何设置和使用这些工具进行React应用的调试。此外，还提到了接口查看插件json-handle的安装和使用，以及cross-request和react-developer-tools等其他调试插件的用途。

摘要由CSDN通过智能技术生成

一.安装VSCode

1.进入VSCode官网https://code.visualstudio.com/，并根据自己的电脑下载对应的版本。

2.设置语言

进入VSCode，在左侧应用商店中搜索chinese，下载中文简体，安装后重启VSCode。

二．安装Node.js

1.进入官网https://nodejs.org/en/download/ 推荐下载LTS版，下载下来的是一个mis安装包，直接双击运行即可。

安装设置选择Add to path

2.更改镜像

使用默认的镜像下载会很慢，可以使用淘宝的镜像下载。

CMD中输入命令，并检查镜像站是否改好：

npm config set registry=http://registry.npm.taobao.org

npm config get registry

3.检查

打开CMD，检查node安装是否正常。

三．安装git

进入网站https://npm.taobao.org/mirrors/git-for-windows/v2.24.0.windows.2/，根据自己的电脑配置选择，我选的是Git-2.24.0.2-64-bit.exe

默认选项和图中不一样，建议按照图中修改，Git Bash Here和Git GUI Here可以方便的在任意目录下打开git，建议选中，选中这两项后Additional icons->On the Desktop就按照自己心情了。

点击next,一路默认，到结束。

然后设置自己的git账号，在CMD里输入：

git config --global user.name “Your Name”，之后回车，再输入

git config --global user.email email@example.com

其中Your Name和email@example.com替换成上面注册时的账户名和邮箱。

四．安装React

1. 在控制台输入指令，使用npm安装 create-react-app

npm install -g create-react-app

2. 继续输入指令，来创建项目

create-react-app my-app

3. my-app 是创建出来的 React 项目，等待一段时间(这里需要下载一些依赖包)，即可看到创建完成的整个文件结构

4. 切换控制台目录到项目目录下运行 npm start 检测当前项目是否创建成功：

cd my-app

npm start

正常情况下当输入命令之后会直接打开默认浏览器预览 http://localhost:3000/ 此时会看到一个react的页面，至此新建的React项目已经可以正常运行了

5. 用VS Code 打开项目文件夹，这里可以看到整个文件结构

五．安装插件

1.进入VSCode，在左侧应用商店中搜索Debugger for Chrome安装（需要有谷歌浏览器），装好后点击运行->添加launch.json文件，在文件内部添加配置。

{

// 使用 IntelliSense 了解相关属性。

// 悬停以查看现有属性的描述。

// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387

"version": "0.2.0",

"configurations": [

{

"type": "pwa-chrome",

"request": "launch",

"name": "Launch Chrome against localhost",

"url": "http://localhost:3000",

"webRoot": "${workspaceFolder}"

{

"name": "Attach to Chrome",

"port": 9222,

"request": "attach",

"type": "pwa-chrome",

"webRoot": "${workspaceFolder}"

{

"name": "使用本机chrome调试",

"type": "chrome",

"request": "launch",

"runtimeExecutable": "C:/Users/PLX/AppData/Local/Google/Chrome/Application/chrome.exe",

"sourceMaps": true,

//"url":"http...",//在使用外部服务器时，注释掉file，改用 url, 并将 useBuildInServer 设置为 false

"file": "${workspaceRoot}/public/index.html", //#每次需要修改这里的文件地址

"webRoot": "${workspaceRoot}",

"userDataDir": "${workspaceRoot}/.vscode/chrome",

}

]

}

注意："configurations"中第一个对象的"url"属性为项目运行的端口，即"http://localhost:3000",

最后一个对象的"runtimeExecutable"属性改为本机电脑谷歌浏览器的exe位置，"file"属性代表项目文件夹中html的地址，每次需要修改这里的文件地址。

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

3. 在项目源代码中找到index.js文件打上断点在行号前面点左键即可之后刷新页面，则可进入断点，至此已经可以简单进行调试了。

六.接口查看谷歌插件

接口：https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata

在查看后端接入端口的时候，直接把端口拖拽到浏览器进行查看，数据折叠在一起观感很差，可以通过下载json-handle来解决。

下载地址：http://jsonhandle.sinaapp.com

在谷歌浏览器安装该插件时，可能会有未成功安装问题，可以将下载后的crx文件放置到一个新建文件夹里，然后点击重命名，将该crx文件后缀由 “ .crx ” 变成 “ .zip ”文件（如果是7z解压则由 “ .crx ” 变成 “ .7z ”文件），然后再执行解压到本文件夹，然后在谷歌浏览器内的设置 -> 拓展程序 ->开发者模式->点击左上方的加载已解压的拓展程序，然后将刚刚新建文件夹的目录填入弹出的地址栏中，点击选择文件夹即可。

解压的扩展包不能删除或者更换位置，否则需要重新在谷歌浏览器安装插件。

插件安装完成后再打开后端接口如下。