From 741670b170d7b4e1f9d7d96f73d84bac76dc3825 Mon Sep 17 00:00:00 2001 From: Xavi Lee Date: Sat, 16 Aug 2025 22:34:49 +0800 Subject: [PATCH 1/4] fix(ci): remove deadlinks and sync workflows --- .github/workflows/analyze.yml | 27 +- .github/workflows/analyze_comment.yml | 21 +- src/content/learn/add-react-to-a-website.md | 281 ------------------ .../learn/removing-effect-dependencies.md | 2 +- 4 files changed, 8 insertions(+), 323 deletions(-) delete mode 100644 src/content/learn/add-react-to-a-website.md diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml index 2f3c65ea07..83e7f2e8a9 100644 --- a/.github/workflows/analyze.yml +++ b/.github/workflows/analyze.yml @@ -7,23 +7,9 @@ on: - main # change this if your default branch is named differently workflow_dispatch: - permissions: {} +permissions: {} jobs: - event_type: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v3 - - - name: Save Event Type - run: echo ${{ github.event_name }} > ./event_type - - - name: Upload Event Type - uses: actions/upload-artifact@v4 - with: - path: ./event_type - name: event_type - analyze: runs-on: ubuntu-latest steps: @@ -75,7 +61,7 @@ jobs: if: success() && github.event.number with: workflow: analyze.yml - branch: ${{ github.event.pull_request.base.ref || 'main' }} + branch: ${{ github.event.pull_request.base.ref }} name: bundle_analysis.json path: .next/analyze/base/bundle @@ -93,7 +79,7 @@ jobs: # Either of these arguments can be changed or removed by editing the `nextBundleAnalysis` # entry in your package.json file. - name: Compare with base branch bundle - if: success() + if: success() && github.event.number run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare - name: Upload analysis comment @@ -102,13 +88,6 @@ jobs: name: analysis_comment.txt path: .next/analyze/__bundle_analysis_comment.txt - number: - runs-on: ubuntu-latest - needs: analyze - if: github.event_name == 'pull_request' - steps: - - uses: actions/checkout@v3 - - name: Save PR number run: echo ${{ github.event.number }} > ./pr_number diff --git a/.github/workflows/analyze_comment.yml b/.github/workflows/analyze_comment.yml index 85e9d69181..fcac377386 100644 --- a/.github/workflows/analyze_comment.yml +++ b/.github/workflows/analyze_comment.yml @@ -14,23 +14,11 @@ permissions: jobs: comment: runs-on: ubuntu-latest + if: > + ${{ github.event.workflow_run.event == 'pull_request' && + github.event.workflow_run.conclusion == 'success' }} steps: - - name: Download Event Type - uses: dawidd6/action-download-artifact@v3 - with: - workflow: analyze.yml - run_id: ${{ github.event.workflow_run.id }} - name: event_type - path: event_type - - - name: get type - id: get-type - run: | - event_type=$(cat event_type/event_type) - echo "event-type=$event_type" >> $GITHUB_OUTPUT - - name: Download base branch bundle stats - if: github.event.workflow_run.conclusion == 'success' && steps.get-type.outputs.event-type == 'pull_request' uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e with: workflow: analyze.yml @@ -39,7 +27,6 @@ jobs: path: analysis_comment.txt - name: Download PR number - if: github.event.workflow_run.conclusion == 'success' && steps.get-type.outputs.event-type == 'pull_request' uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e with: workflow: analyze.yml @@ -49,7 +36,7 @@ jobs: - name: Get comment body id: get-comment-body - if: success() && github.event.workflow_run.conclusion == 'success' && steps.get-type.outputs.event-type == 'pull_request' + if: success() run: | echo 'body<> $GITHUB_OUTPUT echo '' >> $GITHUB_OUTPUT diff --git a/src/content/learn/add-react-to-a-website.md b/src/content/learn/add-react-to-a-website.md deleted file mode 100644 index 86282d7cc1..0000000000 --- a/src/content/learn/add-react-to-a-website.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -title: 在网站中添加 React -translators: - - Atrist - - yyyang1996 - - QC-L ---- - - - -无需使用 React 重构你的站点。只需花一分钟，将 React 添加到 HTML 中，且无需安装，即可立即开始编写交互式组件。 - - - - - -* 如何 1 分钟内将 React 添加到 HTML 中 -* JSX 语法是什么及其用法 -* 如何设置可用于生产环境的 JSX 预处理器 - - - -## 1 分钟拥有 React {/*add-react-in-one-minute*/} - -React 从一开始就是为渐进式开发而生。大多数网站并没有（也不需要）完全使用 React 进行构建。本小节中，我们将向你展示如何在现有 HTML 页面中添加交互式组件的方法。 - -你可以在你自己的网站上尝试，或者创建一个 [空的 HTML 文件](https://gist.github.com/gaearon/edf814aeee85062bc9b9830aeaf27b88/archive/3b31c3cdcea7dfcfd38a81905a0052dd8e5f71ec.zip) 来进行练习。只需将电脑连接到网络并安装一款文本编辑器即可，如 Notepad 或者 VSCode。（如需语法高亮，可以通过 [如何配置你的编辑器](/learn/editor-setup/) 章节来实现！) - -### 步骤 1：添加一个根标签 {/*step-1-add-a-root-html-tag*/} - -首先，打开你需要编辑的 HTML 页面。在你想用 React 展示内容的地方添加一个空的 `
` 标签。并给这个 `
` 标签一个唯一的 `id` 属性值。例如： - -```html {3} - - -
- - -``` - -它被称为"根"，因为这是 React 树开始的地方。你可以在 `` 标签中的任何位置放置一个类似的根 HTML 标签。让它为内容留白。因为 React 会用你编写的 React 组件来替换它的内容。 - -你可以根据需要，在一个页面上设置多个根 HTML 标签。 - -### 步骤 2：添加 script 标签 {/*step-2-add-the-script-tags*/} - -在 HTML 页面的 `` 结束标签之前，添加三个 ` - - - - -``` - - - -部署时，你需要将 “development.js” 替换为 “production.min.js”！React 的 development 版本中内置了很多有用的错误信息，但同时也会降低你网站的访问速度。 - - - -### 步骤 3：创建一个 React 组件 {/*step-3-create-a-react-component*/} - -在 HTML 页面文件的同级目录下创建一个名为 **`like_button.js`** 的文件，并将如下代码片段添加到该文件中。这段代码定义了一个名为 LikeButton 的 React 组件。（在 [快速入门](/learn) 中，了解更多关于编写组件的信息。) - -```js -'use strict'; - -function LikeButton() { - const [liked, setLiked] = React.useState(false); - - if (liked) { - return 'You liked this!'; - } - - return React.createElement( - 'button', - { - onClick: () => setLiked(true), - }, - 'Like' - ); -} -``` - -### 步骤 4：把你的 React 组件添加到页面中 {/*step-4-add-your-react-component-to-the-page*/} - -最后，在 **`like_button.js`** 底部添加以下三行代码。这几行代码会找到我们在步骤 1 中添加到 HTML 里的 `
`，接着创建了一个React 的根，最后在其内部展示了我们的 React 组件 —— "Like" 按钮： - -```js -const rootNode = document.getElementById('like-button-root'); -const root = ReactDOM.createRoot(rootNode); -root.render(React.createElement(LikeButton)); -``` - -**恭喜！你刚刚已成功将第一个 React 组件添加到你的网站当中**！ - -- [查看完整的示例源码](https://gist.github.com/gaearon/0b535239e7f39c524f9c7dc77c44f09e) -- [下载完整示例（2KB 压缩包）](https://gist.github.com/gaearon/0b535239e7f39c524f9c7dc77c44f09e/archive/651935b26a48ac68b2de032d874526f2d0896848.zip) - -#### 复用你的组件 {/*you-can-reuse-components*/} - -你可能需要在同一 HTML 页面中的多个位置展示 React 组件。如果页面中由 React 驱动的部分相互独立，那复用就显得非常必要。你可以通过在你的 HTML 中放置多个根标签，然后用 `ReactDOM.createRoot()` 在每个根标签中渲染 React 组件来实现这一点。例如： - -1. 在 **`index.html`** 中，添加另外一个的容器元素 `
`。 -2. 在 **`like-button.js`** 文件最后，再添加以下三行代码： - -```js {6,7,8,9} -const anotherRootNode = document.getElementById('another-root'); -const anotherRoot = ReactDOM.createRoot(anotherRootNode); -anotherRoot.render(React.createElement(LikeButton)); -``` - -如果你需要在很多地方渲染同一个组件，你可以为每个根的指定一个 `class`，而不是 `id`，然后再把它们找出来。这是 [一个显示三个 "Like" 按钮，并向每个按钮内传递了数据的示例](https://gist.github.com/gaearon/779b12e05ffd5f51ffadd50b7ded5bc8)。 - -### 步骤 5：为生产环境压缩 JavaScript 代码 {/*step-5-minify-javascript-for-production*/} - -未经压缩的 JavaScript 可能会极大降低用户的访问速度。在将你的网站部署到生产环境之前，请务必对你的脚本文件进行压缩。 - -- **如果你不知道如何进行压缩**，[请参考该配置教程](https://gist.github.com/gaearon/ee0201910608f15df3f8cd66aa83f98e)。 -- 如果你已完成了 **对应用代码的压缩**，并且确保已部署的 HTML 加载的是以 `production.min.js` 结尾的 React 版本，那么你的网站就已完成生产部署（production-ready）： - -```html - - -``` - -## 尝试使用 JSX 编写 React {/*try-react-with-jsx*/} - -在上面的示例中，依靠的是浏览器原生就支持的特性。这也就是为什么我们在 **`like_button.js`** 中要调用 JavaScript 的函数，用以告知 React 要显示的内容： - -```js -return React.createElement('button', {onClick: () => setLiked(true)}, 'Like'); -``` - -然而，React 还提供了一种使用 [JSX](/learn/writing-markup-with-jsx) 编写界面的方式，一种类似 HTML 的 JavaScript 语法： - -```jsx -return ; -``` - -这两段代码是等价的。JSX 是一种在 JavaScript 中描述标签的语法。多数人觉得这样编写 UI 代码更方便 —— 无论是使用 React 还是其它库。 - -> 你可以通过 [在线转换器](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.17) 试用 JSX。 - -### 试用 JSX {/*try-jsx*/} - -试用 JSX 的最快方法是将 Babel 编译器作为 ` - - - - -``` - -现在你可以编辑 **`like-button.js`**，并将 - -```js -return React.createElement( - 'button', - { - onClick: () => setLiked(true), - }, - 'Like' -); -``` - -替换为等效的 JSX 代码： - -```jsx -return ( - -); -``` - -一开始，你可能会觉得将 JS 和标签混合在一起会有些奇怪，但后面你会慢慢爱上它的！欲了解更多，请参阅 [用 JSX 编写标签](/learn/writing-markup-with-jsx) 的介绍。这是 [一个使用了 JSX 的 HTML 文件示例](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html)，你可以下载并尝试使用。 - - - -引入 Babel 的 `