目录
一.安装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 protected]
其中Your Name和[email protected]替换成上面注册时的账户名和邮箱。
四．安装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 ”文件），然后再执行解压到本文件夹，然后在谷歌浏览器内的设置 -> 拓展程序 ->开发者模式->点击左上方的加载已解压的拓展程序，然后将刚刚新建文件夹的目录填入弹出的地址栏中，点击选择文件夹即可。
解压的扩展包不能删除或者更换位置，否则需要重新在谷歌浏览器安装插件。
插件安装完成后再打开后端接口如下。