聊聊 React 新文件

語言: CN / TW / HK

React 官方文件改版耗時 1 年,今天已完成站點相關改版,部分文件已初步上線。

改版是因為現在文件程式碼和文件內容都已過於陳舊,而且大部分文件還是基於 class components 進行的講解,這次進行了全面 Hook 化

  • 關於新文件討論的 Issue:https://github.com/reactjs/reactjs.org/issues/3308
  • PR 地址:https://github.com/reactjs/reactjs.org/pull/3965

訪問地址:https://beta.reactjs.org

今天從中文文件維護者的角度和你聊聊,官方文件的變化。

分為以下幾個部分:

  • 站點更新
  • 文件內容
  • 關於中文文件

站點更新

先來聊聊變化:

  1. 官網將使用框架從 Gatsby 替換為了 Next.js
  2. 引入了 tailwind
  3. 去除 Flow,全面 TypeScript
  4. 全新的互動設計
  5. 暗黑主題

先說框架切換,我認為這是必然結果。儘管 Gatsby 本身是靜態站點的理想選擇,但 Next 在服務端渲染方面表現更為出色,同時 Next 可以在執行時生成 HTML/CSS/JS,而 Gatsby 只能在構建時生成。

舊版文件是自行編寫的樣式,而新版文件採用了 tailwind 來編寫。儘管 CSS-in-JS 真香,但從效能層面來考量,還是差強人意。

Flow 是 Facebook 早期的產物,其作用也是對 JS 進行型別化,無論從設計還是使用層面,Flow 都遜色於 TypeScript。存在即合理,沒有 TypeScript 的時代,Flow 也曾頂起了半邊天。現在 Flow 已經完成了它的歷史使命。

新的互動整體看起來非常清爽,給官方點贊!

暗黑主題就不多說了,基本上是現在 Web 應用標配。

文件內容

上午對所有文件進行了整理,官方重寫了除了部落格以外的全部文件,很徹底

從文件技術上來看,和 webpack 文件一樣採用了 MDX 的形式進行文件編寫,使得文件變得更加靈活。

同時,將教程與 API 部分進行了分成了獨立的 Tab。

從官方給出的資料來看,目前文件部分完成度:

  • Learn 部分:70%
  • API 部分:5%

關於內容的建議,大家可以去 reddit 上發表你的看法。

關於中文文件

由於文件內容部分,並未完全穩定。官方暫時不推薦進行翻譯工作

中文文件會選擇性的對已穩定的部分進行翻譯。

中文文件也拉取了新的 beta 分支,會每天與官方的 beta 分支進行同步。

新的文件地址會盡快同步給大家,作為正式釋出前的嚐鮮版本,敬請期待。

相關進展會定期在印記中文公眾號進行同步,歡迎關注。

收穫

看了文件站點的更新,聊聊我的收穫。

官方利用 patch-package 魔改了 google-analytics 的包。

當專案中使用到的 package 不符合預期/存在 bug 時,我們通常有幾種方案:

  • clone 專案,換個名字,發到 npm/tnpm/cnpm 上去
  • copy 到專案中,魔改
  • 使用 patch-package 對使用到的 package 進行 diff 調整。

貼一段 patch 的程式碼

js - src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_TRACKING_ID}`} + src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_TRACKING_ID}`}

參與翻譯

如果你想參與到新文件的翻譯工作中來,可以新增 docschina-bot

傳送暗號:New React Docs

也可以關注 React 中文文件倉庫,後續任務會以 issues 的方式釋出。