fix: resolved immense conflicts

Signed-off-by: Jie Peng <[email protected]>

Author: neighborhood999

beta/src/pages/learn/add-react-to-a-website.md

@@ -8,32 +8,22 @@ title: 編輯器設定
 
 </Intro>
 
-<<<<<<< HEAD
-## 你的編輯器 {/*your-editor*/}
-=======
 <YouWillLearn>
 
-* What the most popular editors are
-* How to format your code automatically
+* 最受歡迎的編輯器是誰
+* 如何自動格式化你的程式碼
 
 </YouWillLearn>
 
-## Your editor {/*your-editor*/}
->>>>>>> 26a870e1c6e232062b760d37620d85802750e985
+## 你的編輯器 {/*your-editor*/}
 
 [VS Code](https://code.visualstudio.com/) 是現在最受歡迎的編輯器之一。它有一個龐大的擴充功能市集，並與 GitHub 等流行服務很好的整合。下面列出的大多數功能也可以作為擴充功能加入到 VS Code 中，使其具有高度的可性！
 
 其他在 React 社群使用的流行文字編輯器包括：
 
-<<<<<<< HEAD
-* [WebStorm](https://www.jetbrains.com/webstorm/)—一個專門為 JavaScript 設計的完整開發環境。
-* [Sublime Text](https://www.sublimetext.com/)—支援 JSX 和 TypeScript、[語法高亮](https://stackoverflow.com/a/70960574/458193)和自動補全功能。
-* [Vim](https://www.vim.org/)—是一個高度可配置的文字編輯器，可以非常有效的建立和修改任何類型的文本。它作為「vi」被內建在大多數 UNIX 系統和蘋果 OS X 系統中。
-=======
-* [WebStorm](https://www.jetbrains.com/webstorm/) is an integrated development environment designed specifically for JavaScript.
-* [Sublime Text](https://www.sublimetext.com/) has support for JSX and TypeScript, [syntax highlighting](https://stackoverflow.com/a/70960574/458193) and autocomplete built in.
-* [Vim](https://www.vim.org/) is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X.
->>>>>>> 26a870e1c6e232062b760d37620d85802750e985
+* [WebStorm](https://www.jetbrains.com/webstorm/) 是一個專門為 JavaScript 設計的完整開發環境。
+* [Sublime Text](https://www.sublimetext.com/) 支援 JSX 和 TypeScript，內建 [syntax highlighting](https://stackoverflow.com/a/70960574/458193) 和 autocomplete。
+* [Vim](https://www.vim.org/) 是一個高度可配置的文字編輯器，可以非常有效的建立和修改任何類型的文本。它作為「vi」被內建在大多數 UNIX 系統和 Apple OS X 系統中。
 
 ## 推薦的文字編輯器功能 {/*recommended-text-editor-features*/}
 
@@ -52,36 +42,19 @@ Code linter 可以在你撰寫程式碼的時候發現問題，幫助你儘早
 
 你可以透過以下幾個步驟安裝[在 VSCode 內安裝 Prettier 擴充套件](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)：
 
-<<<<<<< HEAD
 1. 啟動 VS Code
-2. 使用快速開啟（按下 `CTRL/CMD + P`）
+2. 使用快速開啟（按下 `CTRL/Cmd + P`）
 3. 貼上 `ext install esbenp.prettier-vscode`
 4. 按下 enter
-=======
-1. Launch VS Code
-2. Use Quick Open (press Ctrl/Cmd+P)
-3. Paste in `ext install esbenp.prettier-vscode`
-4. Press Enter
->>>>>>> 26a870e1c6e232062b760d37620d85802750e985
 
 #### 儲存時格式化 {/*formatting-on-save*/}
 
 理想情況下，你應該在每次儲存時對你的程式碼進行格式化。 在 VS Code 可以設定！
 
-<<<<<<< HEAD
 1. 在 VS Code 內，按下 `CTRL/CMD + SHIFT + P`。
 2. 輸入「settings」
 3. 按下 enter
 4. 在搜尋欄中，輸入「format on save」
 5. 確認「format on save」選項是打勾的！
 
-> Prettier 有時會與其他的 linter 衝突。但通常有辦法讓它們可以很好的一起執行。例如，如果你使用 Prettier 和 ESLint，你可以使用 [eslint-prettier](https://github.com/prettier/eslint-plugin-prettier) 擴充套件來執行 prettier 作為 ESLint 規則。
-=======
-1. In VS Code, press `CTRL/CMD + SHIFT + P`.
-2. Type "settings"
-3. Hit Enter
-4. In the search bar, type "format on save"
-5. Be sure the "format on save" option is ticked!
-
-> If your ESLint preset has formatting rules, they may conflict with Prettier. We recommend to disable all formatting rules in your ESLint preset using [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) so that ESLint is *only* used for catching logical mistakes. If you want to enforce that files are formatted before a pull request is merged, use [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) for your continuous integration.
->>>>>>> 26a870e1c6e232062b760d37620d85802750e985
+> 如果你的 ESLint 預設有格式規則，它們可能與 Prettier 衝突。我們建議使用 [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) 禁用 ESLint 預設中的所有格式規則，以便 ESLint *僅*用於捕獲邏輯錯誤。如果你想強制在 pull request 被合併之前，對程式碼進行格式化，在你的 continuous integration 中使用 [`prettier --check`](https://prettier.io/docs/en/cli.html#--check)。

beta/src/pages/learn/editor-setup.md

@@ -8,17 +8,13 @@ title: React 開發者工具
 
 </Intro>
 
-<<<<<<< HEAD
-## 瀏覽器擴充元件 {/*browser-extension*/}
-=======
 <YouWillLearn>
 
-* How to install React Developer Tools
+* 如何安裝 React Developer Tools
 
 </YouWillLearn>
 
 ## Browser extension {/*browser-extension*/}
->>>>>>> 26a870e1c6e232062b760d37620d85802750e985
 
 要 debug 用 React 建構的網站最簡單的方式是安裝 React 開發者瀏覽器擴充元件。它可以在一些流行的瀏覽器上使用：
 

beta/src/pages/learn/react-developer-tools.md

@@ -4,59 +4,32 @@ title: 開始一個新的 React 專案
 
 <Intro>
 
-<<<<<<< HEAD
-如果你正在學習 React 或是考慮將它加入到現有的專案，你可以透過[將 React 加入到網頁](/learn/add-react-to-a-website)快速的開始。如果你的專案將需要許多 component 以及檔案，是時候該考慮以下的選項了！
-
-</Intro>
-
-## 選擇你自己的冒險 {/*choose-your-own-adventure*/}
-
-React 是一個 library，讓你透過將 UI 程式碼分解成各個稱為 component 來組織你的 UI。React 不在意你的 routing 或是 data management。對於這些功能，你將需要使用 third-party library 或是撰寫你自己的解決方案。意思是你有許多種方式可以開始一個新的 React 專案：
-
-* 從**僅使用工具鏈的最小設置開始**，根據專案需求來增加功能。
-* 從一個已經內建通用功能的 **opinionated 框架**開始。
-
-無論你是剛開始使用 React，還是想要建立一些大專案，或者想要設定你自己的工具鏈，這份指南將會指引你走向正確的途徑。
-
-## 開始使用 React 的工具鏈 {/*getting-started-with-a-react-toolchain*/}
-
-如果你是剛開始使用 React，我們推薦 [Create React App](https://create-react-app.dev/)，是最流行嘗試 React 功能的方式，也是建立一個新的 single-page、client-side application 的好方式。Create React App 是一個專門為 React 設置的 unopinionated 工具鏈。工具鏈有助於解決以下問題：
-
-* 擴展到許多檔案以及 component
-* 從 npm 使用 third-party library
-* 提早發現常見錯誤
-* 在開發中即時的編輯 CSS 以及 JS
-* 針對 production 進行最佳化的輸出
-
-你可以在 terminal 中使用一行指令來開始建構 Create React App！(**請確認你已經安裝了 [Node.js](https://nodejs.org/)！**)
-=======
-If you're starting a new project, we recommend to use a toolchain or a framework. These tools provide a comfortable development environment but require a local Node.js installation.
+如果你正要開始一個新專案，我們推薦使用 toolchain 或是 framework。這些工具提供一個舒適的開發環境，但是本機端需要安裝 Node.js。
 
 </Intro>
 
 <YouWillLearn>
 
-* How toolchains are different from frameworks
-* How to start a project with a minimal toolchain
-* How to start a project with a fully-featured framework
-* What's inside popular toolchains and frameworks
+* How toolchains are different from frameworks Toolchain 和 framework 有什麼差異
+* How to start a project with a minimal toolchain 如何從最小的 toolchain 開始一個新專案
+* How to start a project with a fully-featured framework 如何從功能完整的 framework 開始一個新專案
+* What's inside popular toolchains and frameworks 流行的 toolchain 和 framework 內有些什麼
 
 </YouWillLearn>
 
-## Choose your own adventure {/*choose-your-own-adventure*/}
+## 選擇你自己的冒險 {/*choose-your-own-adventure*/}
 
-React is a library that lets you organize UI code by breaking it apart into pieces called components. React doesn't take care of routing or data management. This means there are several ways to start a new React project:
+React 是一個 library，讓你透過將 UI 程式碼分解成各個稱為 component 來組織你的 UI。React 不在意你的 routing 或是 data management。對於這些功能，你將需要使用 third-party library 或是撰寫你自己的解決方案。意思是你有許多種方式可以開始一個新的 React 專案：
 
-* [Start with an **HTML file and a script tag**.](/learn/add-react-to-a-website) This doesn't require Node.js setup but offers limited features.
-* Start with a **minimal toolchain,** adding more features to your project as you go. (Great for learning!)
-* Start with an **opinionated framework** that has common features like data fetching and routing built-in.
+* [從 **HTML 文件和 script tag 開始**。](/learn/add-react-to-a-website) 這不需要設定 Node.js，但提供的功能有限。
+* 從**使用 toolchain 的最小設置開始**，根據專案需求來增加功能。（非常適合的學習！）
+* 從一個 **opinionated 框架** 開始，它內建有 data fetching 和 routeing 等常見功能。
 
-## Getting started with a minimal toolchain {/*getting-started-with-a-minimal-toolchain*/}
+## 從一個最小的 toolchain 開始 {/*getting-started-with-a-minimal-toolchain*/}
 
-If you're **learning React,** we recommend [Create React App](https://create-react-app.dev/). It is the most popular way to try out React and build a new single-page, client-side application. It's made for React but isn't opinionated about routing or data fetching.
+如果你是剛開始使用 React，我們推薦 [Create React App](https://create-react-app.dev/)。它是最流行嘗試 React 功能的方式，也是建立一個新的 single-page、client-side application 的好方式。它是為 React 設計的，但對 routing 或 data fetching 不是 opinionated 的。
 
-First, install [Node.js](https://nodejs.org/en/). Then open your terminal and run this line to create a project:
->>>>>>> 26a870e1c6e232062b760d37620d85802750e985
+首先，安裝 [Node.js](https://nodejs.org/en/)。接著打開你的 terminal 並且執行這行來建立一個專案：
 
 <TerminalBlock>
 
@@ -75,69 +48,35 @@ npm start
 
 更多資訊，[請參考官方指南](https://create-react-app.dev/docs/getting-started)。
 
-<<<<<<< HEAD
-> Create React App 並不處理後端或是資料庫的邏輯；它只建立了一個前端的建構管道。意思是你可以搭配任何的後端使用。如果你正在尋找更多像是 routing 和 server-side 邏輯的功能，請繼續閱讀下去！
-
-### 其他選項 {/*other-options*/}
+> Create React App 並不處理後端或是資料庫的邏輯。你可以將它與任何 backend 一起使用。當你建立一個專案時，你會有一個資料夾與一些靜態的 HTML、CSS 和 JS。因為 Create React App 不能利用 server，所以它不能提供最好的效能。如果你追求更快的載入時間以及內建像是 routing 或 server-side logic，我們建議您使用框架。
 
-Create React App 對於開始使用 React 是很棒的，但如果你想要一個更輕量的工具鏈，你可以嘗試其他流行的工具鏈：
-=======
-> Create React App doesn't handle backend logic or databases. You can use it with any backend. When you build a project, you'll get a folder with static HTML, CSS and JS. Because Create React App can't take advantage of the server, it doesn't provide the best performance. If you're looking for faster loading times and built-in features like routing and server-side logic, we recommend using a framework instead.
-
-### Popular alternatives {/*popular-alternatives*/}
->>>>>>> 26a870e1c6e232062b760d37620d85802750e985
+### 熱門替代選項 {/*popular-alternatives*/}
 
 * [Vite](https://vitejs.dev/guide/)
 * [Parcel](https://parceljs.org/)
 
-<<<<<<< HEAD
-## 使用 React 和一個框架進行建構 {/*building-with-react-and-a-framework*/}
-
-如果你想要開始一個龐大、production-ready 的專案，[Next.js](https://nextjs.org/) 是一個很好的起點。Next.js 是一個用 React 建構靜態和伺服器渲染應用程式的流行、輕量級的框架。它預設包含了 routing、styling，以及 server-side rendering 等功能，讓你的可以專案快速的啟動和執行。
-
-[開始使用 Next.js 建構](https://nextjs.org/docs/getting-started)的官方指南。
+## 用一個功能齊全的 framework 來建構 {/*building-with-a-full-featured-framework*/}
 
-### 其他選項 {/*other-options-1*/}
+如果你想要**開始一個 production-ready 的專案**，[Next.js](https://nextjs.org/) 是一個很好的起點。Next.js 是一個用 React 建構靜態和伺服器渲染應用程式的流行、輕量級的框架。它預設包含了 routing、styling，以及 server-side rendering 等功能，讓你的可以專案快速的啟動和執行。
 
-* [Gatsby](https://www.gatsbyjs.org/) 讓你用 React 和 GraphQL 來產生靜態網站。
-* [Razzle](https://razzlejs.org/) 是一個不需要任何設置的 server-rendering 框架，但是比 Next.js 提供更多彈性。
-=======
-## Building with a full-featured framework {/*building-with-a-full-featured-framework*/}
+[Next.js Foundations](https://nextjs.org/learn/foundations/about-nextjs) 教學很好的介紹使用 React 和 Next.js 來進行構建。
 
-If you're looking to **start a production-ready project,** [Next.js](https://nextjs.org/) is a great place to start. Next.js is a popular, lightweight framework for static and server‑rendered applications built with React. It comes pre-packaged with features like routing, styling, and server-side rendering, getting your project up and running quickly. 
-
-The [Next.js Foundations](https://nextjs.org/learn/foundations/about-nextjs) tutorial is a great introduction to building with React and Next.js.
-
-### Popular alternatives {/*popular-alternatives*/}
+### 熱門替代選項 {/*popular-alternatives*/}
 
 * [Gatsby](https://www.gatsbyjs.org/)
 * [Remix](https://remix.run/)
 * [Razzle](https://razzlejs.org/)
->>>>>>> 26a870e1c6e232062b760d37620d85802750e985
-
-## 客製化工具鏈 {/*custom-toolchains*/}
-
-<<<<<<< HEAD
-你可能更喜歡建立和設置你自己的工具鏈。JavaScript 建構工具鏈通常由以下部分所組成：
-
-* 一個 **package manager** — 讓你可以安裝、升級以及管理 third-party package。[Yarn](https://yarnpkg.com/) 和 [npm](https://www.npmjs.com/) 是兩個最流行的 package manager。
-* 一個 **bundler** — 讓你可以撰寫模組化的程式，並將這些模組化程式 bundle 成更小的 package 來最佳化載入時間。[Webpack](https://webpack.js.org/)、[Snowpack](https://www.snowpack.dev/)、[Parcel](https://parceljs.org/) 是一些流行的 bundler。
-* 一個 **compiler** — 讓你可以撰寫現代化的 JavaScript 程式且仍然可以在舊的瀏覽器執行。[Babel](https://babeljs.io/) 就是一個這樣的例子。
-
-在大型專案中，你可能也希望有工具可以在單一個 repository 內管理多個 package。[Nx](https://nx.dev/react) 就是這一種工具的例子。
 
-如果你傾向從頭設置你自己的 JavaScript 工具鏈，請[查看本指南](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658)它重新建立了一些 Create React App 的功能。
-=======
-You may prefer to create and configure your own toolchain. A toolchain typically consists of:
+## 客製化 Toolchain {/*custom-toolchains*/}
 
-* A **package manager** lets you install, update, and manage third-party packages. Popular package managers: [npm](https://www.npmjs.com/) (built into Node.js), [Yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/).
-* A **compiler** lets you compile modern language features and additional syntax like JSX or type annotations for the browsers. Popular compilers: [Babel](https://babeljs.io/), [TypeScript](http://typescript.org/), [swc](https://swc.rs/).
-* A **bundler** lets you write modular code and bundle it together into small packages to optimize load time. Popular bundlers: [webpack](https://webpack.js.org/), [Parcel](https://parceljs.org/), [esbuild](https://esbuild.github.io/), [swc](https://swc.rs/).
-* A **minifier** makes your code more compact so that it loads faster. Popular minifiers: [Terser](https://terser.org/), [swc](https://swc.rs/).
-* A **server** handles server requests so that you can render components to HTML. Popular servers: [Express](https://expressjs.com/).
-* A **linter** checks your code for common mistakes. Popular linters: [ESLint](https://eslint.org/).
-* A **test runner** lets you run tests against your code. Popular test runners: [Jest](https://jestjs.io/).
+你可能更喜歡建立和設置你自己的 toolchain。Toolchain 通常包括：
 
-If you prefer to set up your own JavaScript toolchain from scratch, [check out this guide](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) that re-creates some of the Create React App functionality. A framework will usually also provide a routing and a data fetching solution. In a larger project, you might also want to manage multiple packages in a single repository with a tool like [Nx](https://nx.dev/react).
+* 一個 **package manager** 讓你可以安裝、升級以及管理 third-party package。熱門的 package managers：[npm](https://www.npmjs.com/)（Node.js 內建）、[Yarn](https://yarnpkg.com/)、[pnpm](https://pnpm.io/)。
+* 一個 **compiler** 讓你編譯現代語法功能以及像是 JSX 或 type annotation 的額外語法給瀏覽器。熱門的 compilers：[Babel](https://babeljs.io/)、[TypeScript](http://typescript.org/)、[swc](https://swc.rs/)。
+* 一個 **bundler** 讓你可以撰寫模組化的程式，並將這些模組化程式 bundle 成更小的 package 來最佳化載入時間。熱門的 bundlers： [webpack](https://webpack.js.org/)、[Parcel](https://parceljs.org/)、[esbuild](https://esbuild.github.io/)、[swc](https://swc.rs/)。
+* 一個 **minifier** 讓你的程式碼更 compact 讓載入速度更快。熱門的 minifiers：[Terser](https://terser.org/), [swc](https://swc.rs/)。
+* 一個 **server** 處理 server 請求，所以你可以 render component 成 HTML。熱門的：[Express](https://expressjs.com/)。
+* 一個 **linter** 檢查你的程式碼是否存在常見錯誤。熱門的 linters：[ESLint](https://eslint.org/)。
+* 一個 **test runner** 讓你針對你的程式碼進行測試。熱門的 test runners：[Jest](https://jestjs.io/)。
 
->>>>>>> 26a870e1c6e232062b760d37620d85802750e985
+如果你傾向從頭設置你自己的 JavaScript toolchain，請[查看本指南](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658)它重新建立了一些 Create React App 的功能。Framework 通常還會提供 routing 和 data fetching 解決方案。在大型專案中，你可能還會想使用像是 [Nx](https://nx.dev/react) 在一個 repository 來管理多的 package。