git获取代码相关与首次clone代码（Day1 1/4）

本页对应 React + TypeScript + 医通项目，共 7 段视频，约 35 分钟。

学习目标

• 能够使用 VS Code 从远程仓库拉取最新代码，并在拉取失败时检查本地变更、放弃变更后重新拉取。
• 能够识别 .git 隐藏目录与仓库嵌套问题，区分代码目录和个人练习目录，不在代码目录中编写代码。
• 能够安装并启用 React DevTools，通过插件图标判断目标网站是否由 React 开发。
• 能够安装 ES7+ React 相关 VS Code 插件，并在运行 React 代码出现异常报错时关闭其他插件进行排查。
• 能够使用 script 引入 react 与 react-dom，创建根容器，通过 createRoot 建立根节点并使用 render 渲染 React 内容。

知识点

一、先分清“获取代码目录”和“练习目录”

为什么需要：课堂代码需要不断更新，你既要能拉取的最新代码，又不能把自己练习时写的文件混进去，否则一拉取就容易冲突。
怎么想：把“看代码”和“写自己代码”分成两个 VS Code 窗口：一个打开克隆下来的课程目录，只读、只拉取；另一个打开你自己的练习目录，随便写。
怎么做：用 VS Code 新建窗口打开克隆目录；再新建一个窗口，打开你单独准备的练习目录。上课时两个窗口并排使用。
易错点：不要在克隆目录里新建笔记、改文件、做练习。转写里反复强调：这个目录是“获取代码的途径”，不是你的练习仓库。

二、认识 .git 与仓库嵌套

为什么需要：Git 判断一个目录是否被管理，靠的是目录里的 .git 隐藏文件夹；理解它才能排查“为什么我的 Git 没反应/怎么突然一堆变更”。
怎么想：只要某目录有 .git，它和它的子目录都可能处在同一个仓库管理范围内；如果外层目录也有 .git，就会出现仓库嵌套。
怎么做：在 VS Code 或文件管理器里开启“显示隐藏目录”，检查当前目录的外围目录有没有 .git。
易错点：转写中口误说“点 get”，实际是 .git；不要在外层桌面或资料目录随手初始化仓库，否则子目录关系会乱。

三、克隆目录不要写代码

为什么需要：你一旦在克隆目录里改文件，VS Code 的 Git 插件会显示“变更”；本地版本就和远程最新版本不一致，后续拉取会冲突。
怎么想：Git 插件能看到变更，是因为该目录里有 .git；没有 .git 的普通目录，新建文件不会触发 Git 变更。
怎么做：克隆后只执行拉取；练习文件放到自己的练习目录。
易错点：转写里演示了在克隆目录新建 01-react基础笔记.md 后出现变更——这正是不能做的原因。

四、初始化仓库和“放弃所有变更”的风险

为什么需要：有些同学误把旧资料目录“初始化仓库”，结果旧文件全变成“新增变更”；再误点“放弃所有变更（discard all changes）”，文件可能直接消失。
怎么想：初始化仓库只是让 Git 开始管理该目录，并不会自动备份旧资料；没有提交到本地版本库的内容，放弃后很难找回。
怎么做：不要对存有学习资料的旧目录点“初始化仓库”；看到大量莫名变更先停手，确认目录再操作。
易错点：转写明确提醒：误点“放弃所有变更”后再删除，资料可能全没；这不是吓唬，是操作顺序导致的。

五、用 VS Code 拉取最新代码

为什么需要：更新代码后，你要拿到最新版本。
怎么想：克隆目录只允许拉取；若你改过其中文件，本地与远程不一致，拉取会报错。课堂目录通常只给你拉取权限，不给你推送权限，所以不能靠推送解决冲突。
怎么做：在 VS Code 的源代码管理面板点三个点，选择 Pull（拉取）；若提示冲突/错误，先在“更改/分支”里放弃本地变更，再重新 Pull。
易错点：不要试图把自己的改动推上去；转写说得很清楚：你们只能拉取，不能推送，所以冲突时只能放弃变更再拉取。

六、React 的定位与三个特点

为什么需要：先建立宏观地图，知道后面学什么。
怎么想：React 是 Facebook 2013 年 5 月开源的前端框架，关注界面呈现，本质是数据渲染；核心思路是“数据驱动视图”，你操作数据，框架帮你更新 DOM。
怎么做：后续重点练习数组、对象等数据操作；学习路线是 React 基础、React Router DOM 路由管理、Redux 状态（数据）管理。
易错点：转写里的“red/VE/EGS/GS”是口误或同音，实际是 React、Vue、原生 JS；“状态”可先理解为数据。三个特点是声明式、组件化、一次学习随处编写：声明式像告诉长大孩子“去买烟”，不用每一步交代；组件化像京东页面拆成轮播图、头部、搜索区等可复用块；一次学习可写网页、Windows、安卓、iOS 等应用。

七、调试插件与 VS Code 插件

为什么需要：判断网站是否用 React 开发，并让 React 代码有语法提示。
怎么想：Chrome 装 React 调试插件后，打开 React 网站图标会点亮；VS Code 装 ES7+ React 插件可获得语法提示。
怎么做：Chrome 打开“扩展程序—管理扩展程序”，开启开发者模式；把课件 react01/调试插件包/react调试插件/英文文件夹 拖入；拖不进去就整体关闭 Chrome 再重开重拖。蓝色是 React，绿色是 Redux，点钉子固定。VS Code 扩展里搜索安装 ES7+ React（作者 dsznajder）。
易错点：别拖错插件包；若运行 React 代码终端报莫名错误，先关闭其他无关 VS Code 插件再刷新，转写中就是通过“只开必要插件”排查环境问题。

八、React 基础使用四步

为什么需要：先掌握最小可用流程，后面才学 JSX、组件等。
怎么想：先引入核心包和 DOM 包，再准备“舞台”，创建根节点建立联系，最后用 render 渲染。
怎么做：

<script src="./lib/react.development.js"></script>
<script src="./lib/react-dom.development.js"></script>

<div id="root"></div>

<script>
  const root = ReactDOM.createRoot(document.getElementById('root'));
  // root.render(要渲染的内容);
</script>

易错点：先引 react.development.js，再引 react-dom.development.js；全局对象是 React 和 ReactDOM，其中 DOM 三个字母都要大写；创建根节点用 ReactDOM.createRoot(...)，渲染用 root.render(...)。转写里的“runner/runnder”是 render 的口误，“动 me”是 DOM 的口误。渲染内容会出现在 #root 这个 DIV 内部。

为什么需要先克隆代码

这一节要解决的第一件事，是把提供的项目代码完整地拿到自己电脑上。转写稿里反复强调一个风险：如果平时不按 Git 的方式管理代码，或者误操作点了“放弃所有变更”，以前阶段学习的内容可能会全部消失，而且因为这些内容没有进入本地版本库，找不回来。所以第一次上课要先学会用 git clone 克隆代码。

同时要建立一个观念：克隆下来的这个目录，是获取代码的途径，不是你的练习目录。 就像以前从聊天工具里下载代码一样，你可以在里面看、可以拉取更新，但不要往里面写自己的代码。否则本地文件和线上代码不一致，后面拉取最新代码时就容易出问题。

克隆前怎么想

克隆前先想清楚两件事。

第一，选一个合适的文件夹，在这个文件夹里右键打开 Windows 终端。不要在已经有 .git 的目录里面再克隆一个带 .git 的项目，否则会出现“仓库嵌套”。转写稿里说得很直白：只要某个目录里有 .git，这个目录就在被 Git 管理，它里面的子目录也会受影响。如果你发现 Git 使用异常，先检查当前目录外围有没有 .git 隐藏文件夹。

第二，克隆完成后，要用 VS Code 单独打开这个目录查看代码；自己的练习代码要另建目录、另开一个 VS Code 窗口。上课时通常会有两个 VS Code 窗口：一个看代码，一个写自己的练习代码。

具体操作

在选好的文件夹中右键打开 Windows 终端，执行笔记中的命令：

git clone https://gitee.com/yuonly0528/sh230320.git

执行后，当前目录下会出现 sh230320 文件夹。进入这个文件夹，它就是一个被 Git 管理的仓库。转写稿提到，被 Git 管理的目录里会有一个 .git 隐藏文件夹，本地版本库的信息就在里面。如果看不到，可以在文件资源管理器里打开“查看 → 显示隐藏目录”，把隐藏文件显示出来。

克隆成功后，用 VS Code 的“新建窗口 → 打开文件夹”，打开刚才克隆下来的目录。注意：不要直接在克隆目录里新建笔记、写练习代码。转写稿里演示过，一旦在这个目录里改文件，VS Code 的 Git 插件就会出现“变更”；如果误点“放弃所有变更”，这些改动就会消失。更严重的是，如果误对以前的学习资料目录点“初始化仓库”，再误点放弃变更，旧资料可能全部丢失。

怎么拉取最新代码

更新代码后，你不需要重新克隆。用 VS Code 打开克隆目录，点击右上角三个点，找到 Pull（拉取）并点击，就能获取最新的代码。转写稿里新增文件并提交后，学生通过 Pull 就能拿到更新。

这里有一个调试判断：如果你点 Pull 后出现错误或对话框提示，通常说明你本地改过克隆目录里的文件，导致本地版本和线上不一致。因为这是授课目录，学生一般只有拉取权限，没有推送权限，所以不能像正常协作那样解决冲突。此时需要点击分支/变更区域里的“放弃变更”（Discard all changes），再重新 Pull。这个按钮不是让你随便在自己练习目录里用的，而是为了把误改的克隆目录恢复干净，保证能继续拉取代码。

易错点与检查清单

第一，克隆目录不要写代码、不要新建笔记。它只负责“获取代码”和“拉取更新”。

第二，检查有没有仓库嵌套：当前目录外围不要出现不该有的 .git。如果 Git 行为异常，先显示隐藏文件检查。

第三，不要误点“初始化仓库”。转写稿里特别提醒：对以前没有用 Git 管理过的资料目录点初始化，会把旧文件都列为新增变更；再误点“放弃所有变更”，资料可能就没了。

第四，拉取失败先想“我是不是改过克隆目录”。确认改过，就放弃变更后再 Pull；不要试图往仓库推送代码。

第五，练习代码放在自己的独立目录里，用另一个 VS Code 窗口打开。这样既不影响拉取代码，也能保护自己的练习资料。

先分清两个目录：代码目录与自己的练习目录

为什么需要：会持续更新课堂代码和笔记，你需要一个稳定入口把最新内容拉到本地；但如果你直接在代码目录里写练习，本地文件就会和线上不一致，后续拉取容易冲突。

怎么想：克隆下来的代码目录只负责“获取代码”，相当于以前从群里下载资料；自己的练习代码要另建目录。上课时建议开两个 VSCode 窗口：一个打开代码用于查看对比，一个打开自己的练习目录用于写代码。

怎么做：先确认当前目录是否被 Git 管理——被管理的目录里会有隐藏的 .git 文件夹；在 VSCode 里可通过“查看/显示隐藏目录”检查。还要检查当前目录的外层目录有没有 .git，避免出现“仓库嵌套”。然后新建自己的练习目录，用 VSCode 的“新建窗口/打开文件夹”单独打开。

易错点：不要往代码目录里新建或修改文件；不要在外层目录误初始化 Git 仓库。转写稿特别提醒：如果误点“初始化仓库”，原有资料会全部变成“新增变更”，再误点“放弃所有变更”，文件可能全没了，而且因为没提交到本地版本库，找不回来。

用 VSCode 拉取最新代码

为什么需要：推送新笔记或新代码后，你本地还是旧版本，需要主动拉取。

怎么想：拉取前先保证代码目录没有你自己的改动。转写稿中的推导是：只要你在该目录新建测试文件，VSCode 的 Git 插件就会出现“变更”；此时线上和本地不一致，拉取就可能报错。学生账号只能拉取、不能向仓库推送，所以不能像普通协作那样解决冲突，正确做法是先放弃本地变更，再拉取。

怎么做：用 VSCode 打开你克隆下来的代码目录，点击源代码管理区域的“…”更多操作，选择 Pull 拉取。

易错点：不要在目录里写代码；如果 Pull 弹出错误，不要反复硬拉，先看“更改/变更”里有没有你改过的文件。

拉取失败时怎么调试：先看变更，再放弃

为什么需要：Pull 报错往往不是网络问题，而是本地文件被改过，导致本地版本与线上版本不一致。

怎么想：转写稿中明确：侧可以提交并推送新文件；学生侧没有推送权限，所以不能通过“解决冲突再推送”的方式处理，只能放弃自己的变更，让本地回到可拉取状态。

怎么做：在 VSCode 源代码管理里查看变更；确认这些变更不是你需要的练习代码后，执行“放弃所有变更”（Discard All Changes），再重新 Pull。若你只是误建了测试文件，也可以删除该文件后再拉取。

易错点：这个按钮很危险。不要在你自己的资料目录、练习目录里随便点“放弃所有变更”。转写稿中的事故是：误初始化仓库后出现大量变更，再点放弃并删除，原资料全部消失。练习代码要放在独立目录，重要内容要及时提交，不能把“放弃变更”当撤销快捷键。

浏览器与 VSCode 插件准备

为什么需要：后续学习 React 时，需要判断网站是否由 React 开发，也需要语法提示，减少低级报错。

怎么想：浏览器端安装 React 调试插件后，打开 React 网站时图标会点亮；VSCode 端安装 ES7+ React 插件可获得 React 语法提示。

怎么做：在 Chrome 打开“扩展程序/管理扩展程序”，开启开发者模式；从代码的课件目录中找到 React 调试插件包，把其中的英文文件夹拖入扩展程序页面。若拖不进去，转写稿的做法是整体关闭 Chrome 再重开，重复拖入。安装后在扩展程序菜单里把蓝色 React 图标固定。VSCode 则在扩展市场搜索并安装 ES7+ React 插件。

易错点：不要拖错插件包，React 调试插件和 Redux 调试插件是两个；运行 React 代码时若终端出现莫名其妙报错，先检查是否装了无关插件，转写稿建议先关闭其他插件，只保留必要插件再刷新验证。

先判断：拉取失败通常是本地目录被改动

为什么需要：提供的代码目录是用来“拉取最新代码”的，不是用来写练习代码的。转写稿里反复强调：克隆下来的目录不要往里写代码；一旦写入，本地版本就会和线上版本不一致，执行 Pull 时就可能失败或弹错误。
怎么想：先别急着解决冲突。要判断当前目录是不是的授课目录；授课目录通常只允许拉取，不允许推送，所以你没有权限通过推送本地修改来解决冲突。
怎么做：在 VS Code 中打开克隆目录，点击源代码管理图标查看 Changes（变更）。如果确实有自己新增或修改的文件，先确认这些内容不需要保留。
易错点：不要把练习代码写进拉取目录；不要在自己以前的学习资料目录里误点“初始化仓库”，再误点“放弃所有变更”，否则未纳入版本库的资料可能直接丢失，转写稿明确说这种找回不了。

方案一：放弃目录所有变更

为什么需要：当本地目录被改动后，Pull 可能提示错误。由于授课目录只能拉取、不能推送，你不能像正常协作那样提交后解决冲突，只能先放弃本地变更，再重新拉取。
怎么想：转写稿里的操作路径是：点击源代码管理里的分支/Changes，找到放弃变更；对应英文是 “discard all changes”，即放弃所有变更。它的作用是把当前目录里未提交的修改丢弃，让本地状态回到可拉取的状态。
怎么做：在 VS Code 源代码管理面板中查看变更，确认没有要保留的内容后，执行放弃所有变更；然后再点击 Pull 拉取最新代码。笔记中给出的图示如下：

易错点：这个按钮不要在自己真正的练习目录或资料目录里随便点。转写稿举例：误初始化仓库后出现很多变更，再点放弃所有变更并删除，原来的文件可能全没了。放弃变更前一定确认当前目录只是提供的拉取目录。

方案二：删除当前目录，重新克隆

为什么需要：如果本地目录已经被改得很乱，或者放弃变更后仍然无法正常拉取，最干净的办法是删除当前克隆目录，再按 1-1 步骤重新克隆。这样能避免旧目录里的隐藏状态继续干扰。
怎么想：转写稿提醒，只要目录受 Git 管理，里面会有 .git 隐藏文件夹；VS Code 的 Git 插件能显示变更，也是因为目录里有 .git。如果目录状态混乱，与其反复修，不如重新获取一份干净代码。
怎么做：先确认当前目录中没有自己要保留的练习文件；然后删除当前目录，重新执行 1-1 的克隆步骤。克隆完成后，用 VS Code 新建窗口打开该目录，再执行 Pull 获取最新代码。
易错点：删除前必须确认目录里没有自己的代码。转写稿还提醒要检查外层目录有没有 .git，避免仓库嵌套导致 Git 使用异常；另外练习代码要放在单独的练习目录里，上课时用两个 VS Code 窗口：一个打开代码，一个打开自己的练习目录。

日常预防：拉取目录与练习目录分开

为什么需要：转写稿说得很直白：克隆目录是获取代码的途径，不要往里写代码；否则本地和线上不一致，就会拉取失败。
怎么想：把“看代码”和“写自己练习”分成两个目录、两个 VS Code 窗口，能避免误改和误删。
怎么做：一个窗口打开代码目录，只用来 Pull；另一个窗口打开自己的练习目录，用来写代码。若 Pull 弹错误，先检查 Changes 是否有本地修改；有则按上面的方案放弃变更，再 Pull。
易错点：不要因为“只改了一点点”就忽略；也不要尝试在授课目录里解决冲突，因为转写稿说明该目录只能拉取、不能推送，没有推送权限就不能通过提交解决冲突。

课堂画面

代码示例

示例 1：引入两个包，验证全局对象

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>react 基础使用 - 引入</title>
</head>
<body>
  <!-- 第 1 步：先引入 react 核心包 -->
  <script src="./lib/react.development.js"></script>
  <!-- 第 2 步：再引入 react-dom 包 -->
  <script src="./lib/react-dom.development.js"></script>

  <script>
    // 引入后会得到两个全局对象
    console.log(React)    // react 核心对象，提供核心方法
    console.log(ReactDOM) // react-dom 全局对象，用来操作 DOM
  </script>
</body>
</html>

关键行与易错点

• ./lib/react.development.js、./lib/react-dom.development.js 就是课件 lib 文件夹里的四个文件中的下面两个，本节先用这两个。
• 引入顺序不能反：先 react，再 react-dom，因为 react-dom 依赖 react。
• ReactDOM 里 DOM 三个字母必须全大写（转写稿原话：“重要是说三遍”），写成 ReactDom 就取不到对象。
• 打开控制台能看到两个对象，就说明包引对了。

---

示例 2：React 基本使用的完整四步

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>react 基础使用</title>
</head>
<body>
  <!-- 第 2 步：提供一个舞台（容器） -->
  <div id="root"></div>

  <!-- 第 1 步：倒包 -->
  <script src="./lib/react.development.js"></script>
  <script src="./lib/react-dom.development.js"></script>

  <script>
    // 第 3 步：创建根节点，和真实的 DOM 建立联系
    const root = ReactDOM.createRoot(document.getElementById('root'))

    // 第 4 步：在根节点中调用 render 渲染内容
    root.render('我是 react 代码')
  </script>
</body>
</html>

关键行与易错点

• 四步顺序：倒包 → 提供舞台 → createRoot 创建根节点 → root.render 渲染，少一步都不行。
• createRoot 的参数必须是已经存在的真实 DOM 元素节点，所以 <div id="root"></div> 要写在脚本前面（或保证脚本在其后执行）。
• document.getElementById('root') 拿到的就是那个“舞台”，所有页面呈现都在同一个舞台里表演，render 的内容会出现在这个 div 内部。
• root 是根节点对象，渲染用 root.render(...)，不要再写成老式的 ReactDOM.render(...)。

---

示例 3：验证渲染结果落在 div 内部

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>react 渲染结果验证</title>
</head>
<body>
  <div id="root"></div>

  <script src="./lib/react.development.js"></script>
  <script src="./lib/react-dom.development.js"></script>

  <script>
    const root = ReactDOM.createRoot(document.getElementById('root'))

    root.render('我是 react 代码')

    // 验证：render 的内容是否出现在 div 内部
    console.log(document.getElementById('root').innerHTML)
  </script>
</body>
</html>

关键行与易错点

• 用 innerHTML 打印可以直观确认：root.render() 渲染的内容会出现在 #root 这个 div 元素节点内部，而不是替换掉它。
• 浏览器里也可以右键 → 检查，选中这个 div 看结构，效果一样。
• 页面空白时先按顺序排查：包路径对不对 → 引入顺序对不对 → ReactDOM 大小写对不对 → id="root" 和 getElementById('root') 是否一致。
• 运行代码时如果终端/控制台出现莫名报错，而代码本身没问题，按转写稿建议：先把 VSCode 里其他无关插件关掉，只留必要的两个插件再刷新。

常见错误

1. 现象：拉取代码时报冲突/失败，提示本地有未提交变更。
   原因：在克隆下来的授课目录里直接写代码或改文件，导致本地版本与线上不一致；学生账号通常无推送权限，无法按正常冲突流程解决。
   修法：先确认误改文件；在源代码管理里放弃变更，再重新 pull；后续把练习代码放到独立目录，授课目录只读、只拉取。

2. 现象：VS Code 源代码管理面板突然出现大量“变更”，甚至误点后文件消失。
   原因：对原本未纳入 Git 的资料目录误点“初始化仓库”，旧文件全被当作新增；随后误点“放弃所有变更/删除”，未进入本地版本库的内容无法找回。
   修法：不要对资料总目录随意初始化仓库；误操作前先确认目录层级和 .git 位置；重要资料先备份，撤销操作前逐项核对。

3. 现象：Git 操作异常，VS Code 识别仓库混乱，拉取/提交行为不符合预期。
   原因：出现仓库嵌套，例如桌面已有 .git，其子目录又克隆了带 .git 的项目，外层仓库把内层仓库也纳入管理。
   修法：打开“显示隐藏文件”，检查当前目录及上级目录是否存在多余 .git；把项目放到没有被 Git 管理的普通目录中，避免父子仓库嵌套。

4. 现象：同样的 React 示例代码在别人电脑能跑，自己终端却出现莫名报错。
   原因：VS Code 安装了较多无关插件，插件之间或插件与当前项目环境冲突。
   修法：先禁用非必要插件，只保留当前学习所需插件；重启/刷新后再运行，逐個启用排查冲突源。

5. 现象：React 页面空白，控制台提示 ReactDOM/ReactDOM 相关对象不存在或方法不可用。
   原因：全局对象大小写写错，如把 ReactDOM 写成 ReactDom/Reactdom；或两个库的引入顺序颠倒。
   修法：核对全局对象拼写，ReactDOM 的 DOM 全大写；先引入 React 核心包，再引入 ReactDOM 包；确认脚本路径正确。

6. 现象：调用 createRoot 或 render 时报错，根节点为空。
   原因：挂载点 DOM 尚未存在、id 写错，或获取节点与创建根节点的顺序不对。
   修法：先确认页面中存在对应 id 的容器，再获取该节点并传给 createRoot；检查选择器大小写和拼写。

7. 现象：React 调试插件拖入浏览器扩展页失败，出现禁止图标。
   原因：开发者模式未开启，或浏览器当前状态导致拖拽安装被拦截。
   修法：开启开发者模式；若仍拖不进去，完全关闭浏览器后重开，再重复拖入；注意区分 React 与 Redux 两个插件包，别拖错目录。

练习

1. 目录隔离练习：新建一个“课堂代码”目录和一个“我的练习”目录。分别用 VS Code 打开，确认哪个目录含 .git、哪个目录用于写练习；在练习目录新建文件，观察源代码管理面板变化，并说明为什么不能把练习文件写进授课目录。

2. 拉取失败恢复练习：在授课目录中故意新增一个测试文件，执行 pull 观察结果；然后按“放弃变更→重新 pull”的流程恢复，并记录操作前后源代码管理面板的变化。

3. 仓库嵌套排查练习：在桌面创建一个普通文件夹，在其中再创建一个子文件夹；分别检查是否存在 .git。模拟“外层目录被初始化仓库、内层又克隆项目”的场景，找出应删除或调整的 .git 位置，并说明判断依据。

4. React 最小页面练习：创建 HTML 页面，引入 React 与 ReactDOM，准备一个挂载容器，创建根节点并渲染一段文本。完成后检查控制台无报错，并验证渲染内容确实出现在指定容器内部。

5. 插件冲突排查练习：在 VS Code 中临时启用一个无关插件，运行 React 示例并观察终端；再禁用该插件、保留必要插件后重跑。记录两次运行差异，写出你的排查顺序。

原视频对照

#	视频	时长
1	使用vscode获取最新代码	09:44
2	vscode练习目录说明	01:08
3	react介绍	08:59
4	react调试插件的安装	03:48
5	react代码运行控制台报错-关闭其他插件	01:14
6	vscode-插件安装	01:13
7	react基础使用	09:27

小结

1. 授课仓库是“获取代码的通道”，不是练习仓库；练习代码必须另建目录，避免污染本地版本。
2. 拉取失败先查本地是否误改，再考虑放弃变更；不要在没有权限推送的授课仓库里试图自行解决冲突。
3. .git 决定目录是否被 Git 管理，排查 Git 异常时要先看当前目录和上级目录是否存在多余 .git。
4. “放弃变更”是恢复拉取能力的应急手段，但对未纳入版本库的资料极其危险，操作前必须确认范围和备份。
5. React 运行环境要保证库引入顺序、全局对象拼写、挂载容器和根节点创建顺序都正确。
6. 控制台报错不一定都是代码问题，VS Code 插件冲突也会造成“同样代码不同结果”，排查时应先做环境减法。
7. 浏览器调试插件能帮助识别 React 站点，但安装失败多与开发者模式、浏览器状态和插件包目录有关。
8. 学习阶段应形成“授课目录只拉取、练习目录可修改、重要资料先备份”的稳定工作流。