Reactjs 初学入坑-配置VS Code篇

##### 基于 Visual Studio Code 中开发 Reactjs

# 继续第一篇 安装开发环境 / 创建应用 / 并在VS Code中查看你自己创建的应用程序

#1.使用VS Code
   a. 我们可以直接打开VS Code，然后在最近项目中找到存在的应用程序，选中打开它。
   b.接着需要运行React应用程序，在VS Code - TERMINAL（终端）执行npm start运行应用程序。

npm start

 

#2.修改文件

1. 接下来尝试做第一次修改文件: index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// ReactDOM.render(
//   <React.StrictMode>
//     <App />
//   </React.StrictMode>,
//   document.getElementById('root')
// );

var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!');
ReactDOM.render(element, document.getElementById('root'));
serviceWorker.unregister();

 * VS Code会在文件被修改后自动保存，正在运行的服务器实例将更新网页，您将看到“ Hello World！”。

 

#3.调试React

要调试客户端React代码，我们需要安装Debugger for Chrome扩展程序：

 * 打开扩展视图 - 搜索“chrome” - 按下Debugger for Chrome的Install按钮

 

#4.设置断点

现在我们要在index.js中设置断点，请单击行号左侧的装订线。这将设置一个断点，该断点将显示为红色圆圈。

如下图：

 

#4.配置Chrome调试器

我们首先需要配置调试器。 为此，请转到“运行”视图（⇧⌘D），然后单击创建launch.json文件来自定义“运行和调试”。 从“选择环境”下拉列表中选择“ Chrome”。 这将在项目的新.vscode文件夹中创建一个launch.json文件，其中包括启动网站的配置。
这里的配置有点麻烦，简单些说，就是我们需要对示例进行一次更改：将URL的端口从8080更改为3000。您的launch.json应该如下所示：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

 

配置所在 VS Code 位置如下所示：

 

#5.启动调试器

按F5或绿色箭头以启动调试器并打开一个新的浏览器实例。 设置断点的源代码在连接调试器之前在启动时运行，因此在刷新网页之前，我们不会遇到断点。 刷新页面，您应该点击断点。

 您可以单步执行源代码（F10），检查诸如element之类的变量，并查看客户端React应用程序的调用堆栈。

 * F5>>>>> 开始执行至下一个断点出现停下

 *  F10>>>> 单步执行

 

#### 这个提前是要确保开发服务器正在运行（npm start）