准备工作

clone代码

首先我们在GitHub中找到react的源码地址 github.com/facebook/re… 然后clone到本地就好啦～

找到合适的gpt工具

目前使用的两个平台可以推荐给大家

私语：siyu.store/index.html （这个不需要翻墙）
poe：poe.com/ （这个需要翻墙）

插件

我们是阅读源码当然就需要笔记啦，我使用的是todo-tree这个插件

以下是我的settings.json中关于这个插件的配置

"todo-tree.general.tags": ["todo", "done", "fix", "note", "delete"],
  "todo-tree.regex.regexCaseSensitive": false,
  "todo-tree.highlights.customHighlight": {
    "BUG": {
      "icon": "bug",
      "background": "#F56C6C",
      "foreground": "#000000",
      "type": "line"
    },
    "FIXME": {
      "icon": "flame",
      "background": "#FF9800",
      "foreground": "#000000",
      "type": "line"
    },
    "TODO": {
      "foreground": "#FFEB38",
      "type": "line",
      "background": "#000000"
    },
    "NOTE": {
      "icon": "note",
      "foreground": "#000000",
      "type": "line",
      "background": "#67C23A"
    },
    "INFO": {
      "icon": "info",
      "foreground": "#000000",
      "type": "line",
      "background": "#909399"
    },
    "TAG": {
      "icon": "tag",
      "foreground": "#000000",
      "type": "line",
      "background": "#409EFF"
    },
    "HACK": {
      "icon": "versions",
      "foreground": "#E040FB",
      "type": "line"
    },
    "XXX": {
      "icon": "unverified",
      "foreground": "#E91E63",
      "type": "line"
    }
  },
  "todo-tree.general.tags": [
    "BUG",
    "HACK",
    "FIXME",
    "TODO",
    "INFO",
    "NOTE",
    "TAG",
    "XXX"
  ],

该文件夹中包含一个config.yml文件，是CircleCI的配置文件。这个文件定义了在 CircleCI 上运行持续集成和持续交付（CI/CD）过程时所需的配置和步骤。config.yml文件使用 YAML（Yet Another Markup Language）格式来描述构建和测试流程，并指定各种步骤、环境变量、工作流和部署选项等。

如图所示，该文件中分为几个部分：

version：指定 CircleCI 配置文件的版本
aliases：用于定义重复使用的命令别名
- docker：它是一个映像别名，用于指定 Docker 映像为 cimg/openjdk:18.0-node。
- environment：它是一个环境变量别名，将 TZ 设置为 /usr/share/zoneinfo/America/Los_Angeles。
- restore_yarn_cache_fixtures_dom：它是一个恢复缓存的步骤别名，用于从缓存中恢复 fixtures/dom 目录的 Yarn 缓存。
- yarn_install_fixtures_dom：它是一个运行步骤别名，用于在 fixtures/dom 目录中安装依赖项。
- yarn_install_fixtures_dom_retry：它是一个运行步骤别名，用于在 fixtures/dom 目录中安装依赖项（在之前步骤失败时进行重试）。
- save_yarn_cache_fixtures_dom：它是一个保存缓存的步骤别名，用于将 fixtures/dom 目录的 Yarn 缓存保存到缓存中。
- TEST_PARALLELISM：它是一个变量别名，将其值设置为 20。
- attach_workspace：它是一个工作区别名，用于将工作区附加到 build 目录。
commands：用于定义重复使用的命令序列
1. 恢复缓存：使用之前保存的 Yarn 缓存恢复 yarn.lock 文件的依赖项缓存。
2. 运行命令：执行以下命令来安装依赖项：
  - 使用 yarn install --frozen-lockfile --cache-folder ~/.cache/yarn 命令安装依赖项。
  - 如果安装失败（返回非零状态码），则再次运行相同的命令进行重试。
  - 设置 ELECTRON_SKIP_BINARY_DOWNLOAD 环境变量为 1，以防止下载 Electron 二进制文件。
3. 保存缓存：将安装后的依赖项缓存保存到 ~/.cache/yarn 目录中，以便下次可以快速恢复。
parameters：用于定义可配置的参数

定义了一个名为 prerelease_commit_sha 的参数。它是一个字符串类型的参数，其默认值为空字符串 ('')。这个参数通常在 CI/CD 管道中使用，用于指定预发布版本的提交 SHA（提交哈希）。它允许在管道中指定要构建或部署的特定提交。如果未提供值，则将使用默认值。
jobs：定义要在 CI/CD 流程中执行的作业，如构建、测试或部署
workflows：定义一个或多个工作流，将作业组合在一起，以指定它们之间的依赖关系和执行顺序

.codesandbox

这个 ci.json 文件包含了一些配置信息，用于在 Codesandbox 中构建 React 相关的包。具体配置说明如下：

packages：指定需要构建的 React 相关包的路径。这里包括了 React、React DOM 和 Scheduler。
buildCommand：指定构建命令，这里是 download-build-in-codesandbox-ci。
node：指定运行构建命令的 Node.js 版本，这里是 18。
publishDirectory：指定发布构建结果的目录。对于每个包，指定了相应的构建输出目录。
sandboxes：指定要创建的 Codesandbox 实例类型。这里是 "new"，表示要创建新的 Codesandbox 实例。
silent：指定是否在构建过程中禁用输出信息。这里是 true，表示禁用输出信息。

【第一天】小白挑战使用gpt学习react源码（持续更新）

准备工作

clone代码

找到合适的gpt工具

插件

目录

.circleci

.codesandbox