Merge pull request #484 from JamieLoLo/doc-importing-and-exporting-co…

…mponents

translation: Importing And Exporting Components

src/content/learn/importing-and-exporting-components.md

@@ -1,26 +1,26 @@
 ---
-title: Importing and Exporting Components
+title: Importing 和 Exporting Component
 ---
 
 <Intro>
 
-The magic of components lies in their reusability: you can create components that are composed of other components. But as you nest more and more components, it often makes sense to start splitting them into different files. This lets you keep your files easy to scan and reuse components in more places.
+Component 的神奇之處在於它的可複用性：你可以建立 component 並與其他 component 組合。但當你嵌套越來越多 component，則需要開始將它們拆分為不同的檔案。這將會提升檔案的閱讀性，也能讓 component 重複應用在更多地方。
 
 </Intro>
 
 <YouWillLearn>
 
-* What a root component file is
-* How to import and export a component
-* When to use default and named imports and exports
-* How to import and export multiple components from one file
-* How to split components into multiple files
+* 什麼是 root component 檔案
+* 如何 import 和 export 一個 component
+* 何時使用 default 和 named import 和 export
+* 如何從一個檔案 import 和 export 多個 component
+* 如何將 component 拆分為多個檔案
 
 </YouWillLearn>
 
-## The root component file {/*the-root-component-file*/}
+## Root component 檔案 {/*the-root-component-file*/}
 
-In [Your First Component](/learn/your-first-component), you made a `Profile` component and a `Gallery` component that renders it:
+在[你的第一個 Component](/learn/your-first-component) 中，你建立了一個 `Profile` component，並且 render 在 `Gallery` component 裡：
 
 <Sandpack>
 
@@ -52,17 +52,17 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-These currently live in a **root component file,** named `App.js` in this example. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page.
+在此範例中，目前所有的 component 都定義在名為 `App.js` 的 **root component 檔案**中。根據你的配置，root component 可能會位於其他檔案中。如果你使用像是 Next.js 這種路由基於檔案路由的框架，每個頁面的 root component 都會不一樣。
 
-## Exporting and importing a component {/*exporting-and-importing-a-component*/}
+## Exporting 和 importing 一個 component {/*exporting-and-importing-a-component*/}
 
-What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to move `Gallery` and `Profile` out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps:
+如果將來你想要改變首頁，在此頁面放入科學書籍列表，或者需要將所有的資料移至其他檔案中。將 `Gallery` 以及 `Profile` 移出 root component 檔案會更加合理。這將會使它們更加模組化，並且可以在其他檔案中複用。你可以透過以下三個步驟拆分 component：
 
-1. **Make** a new JS file to put the components in.
-2. **Export** your function component from that file (using either [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exports).
-3. **Import** it in the file where you’ll use the component (using the corresponding technique for importing [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) exports).
+1. **建立** 一個新的 JS 檔案來存放該 component。
+2. **Export** 該檔案中的 component 函式（可以使用 [default](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) 或 [named](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) export）。
+3. 在需要使用該 component 的檔案中 **import**（可以根據相應的 import 方式使用 [default](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) 或 [named](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) export）。
 
-Here both `Profile` and `Gallery` have been moved out of `App.js` into a new file called `Gallery.js`. Now you can change `App.js` to import `Gallery` from `Gallery.js`:
+這裡將 `Profile` 與 `Gallery` 從 `App.js` 檔案中移出，並放入一個名為 `Gallery.js` 的新檔案中。現在，你可以在 `App.js` import `Gallery.js` 中的 `Gallery`：
 
 <Sandpack>
 
@@ -104,82 +104,82 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-Notice how this example is broken down into two component files now:
+請注意此範例是如何將 component 拆分為兩個檔案：
 
 1. `Gallery.js`:
-     - Defines the `Profile` component which is only used within the same file and is not exported.
-     - Exports the `Gallery` component as a **default export.**
+     - 定義了 `Profile` component，該 component 僅在同個檔案中使用，並沒有被 export。
+     - 使用 **default export** 的方式，export `Gallery` component。
 2. `App.js`:
-     - Imports `Gallery` as a **default import** from `Gallery.js`.
-     - Exports the root `App` component as a **default export.**
+     - 使用 **default import** 的方式，從 `Gallery.js` import `Gallery`。
+     - 使用 **default export** 的方式，export root component `App`。
 
 
 <Note>
 
-You may encounter files that leave off the `.js` file extension like so:
+你可能會遇到沒有寫上副檔名 `.js` 的狀況：
 
 ```js 
 import Gallery from './Gallery';
 ```
 
-Either `'./Gallery.js'` or `'./Gallery'` will work with React, though the former is closer to how [native ES Modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) work.
+不管是 `'./Gallery.js'` 還是 `'./Gallery'` 都可以在 React 中運作，但前者更貼近 [native ES Modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules)。
 
 </Note>
 
 <DeepDive>
 
 #### Default vs named exports {/*default-vs-named-exports*/}
 
-There are two primary ways to export values with JavaScript: default exports and named exports. So far, our examples have only used default exports. But you can use one or both of them in the same file. **A file can have no more than one _default_ export, but it can have as many _named_ exports as you like.**
+JavaScript 有兩種主要用來 export 值的方式：default export 以及 named export。 目前為止，我們的範例只有用到 default export。但你可以在同一個檔案中，選擇使用其中一種，或者兩種都使用。**一個檔案中僅能有一個 default export，但可以有多個 named export**。
 
 ![Default and named exports](/images/docs/illustrations/i_import-export.svg)
 
-How you export your component dictates how you must import it. You will get an error if you try to import a default export the same way you would a named export! This chart can help you keep track:
+Component 的 export 方式決定了其 import 方式。當你試著用 default export，import named export 的 component 將會報錯！下方圖表可以幫助你更好地理解它們：
 
-| Syntax           | Export statement                           | Import statement                          |
+| 語法           | Export 陳述                           | Import 陳述                          |
 | -----------      | -----------                                | -----------                               |
 | Default  | `export default function Button() {}` | `import Button from './Button.js';`     |
 | Named    | `export function Button() {}`         | `import { Button } from './Button.js';` |
 
-When you write a _default_ import, you can put any name you want after `import`. For example, you could write `import Banana from './Button.js'` instead and it would still provide you with the same default export. In contrast, with named imports, the name has to match on both sides. That's why they are called _named_ imports!
+當使用 default import 時，你可以在 `import` 後使用任意命名。例如 `import Banana from './button.js'`，你仍舊可以獲取一致的預設 export 內容。相反地，對於 named import，import 與 export 的名稱必須一致。這也是為什麼它們被稱為 _named_ import！
 
-**People often use default exports if the file exports only one component, and use named exports if it exports multiple components and values.** Regardless of which coding style you prefer, always give meaningful names to your component functions and the files that contain them. Components without names, like `export default () => {}`, are discouraged because they make debugging harder.
+**當檔案中只需要 export 一個 component 時，人們通常會使用 default export，當檔案包含多個 component 或值需要 export 時，則會使用 named export**。無論你偏好哪種方式，請記得給予 component 以及對應檔案一個有意義的命名。不建議使用未命名的 component，像是 `export default () => {}`，這將導致除錯變得困難。
 
 </DeepDive>
 
-## Exporting and importing multiple components from the same file {/*exporting-and-importing-multiple-components-from-the-same-file*/}
+## 從同一檔案 export 及 import 多個 component {/*exporting-and-importing-multiple-components-from-the-same-file*/}
 
-What if you want to show just one `Profile` instead of a gallery? You can export the `Profile` component, too. But `Gallery.js` already has a *default* export, and you can't have _two_ default exports. You could create a new file with a default export, or you could add a *named* export for `Profile`. **A file can only have one default export, but it can have numerous named exports!**
+如果你只想要顯示一個 `Profile`，而非整個圖集。你也可以 export `Profile` component。但是 `Gallery.js` 已經包含 _default_ export，你不能有*兩個* default export。你可以建立一個新檔案以進行 default export，或是你可以將 `Profile` 進行 _named_ export。**同一檔案只能有一個 default export，但可以有多個 named export！**
 
 <Note>
 
-To reduce the potential confusion between default and named exports, some teams choose to only stick to one style (default or named), or avoid mixing them in a single file. Do what works best for you!
+為了減少 default export 和 named export 之間的混淆，有些團隊會選擇只使用其中一種風格（default 或 named），或者避免在同一個檔案中混合使用。這因人而異，選擇最適合你的即可！
 
 </Note>
 
-First, **export** `Profile` from `Gallery.js` using a named export (no `default` keyword):
+首先，使用 named export 的方式，將 `Profile` 從 `Gallery.js` **export**（不使用 `default` 關鍵字）：
 
 ```js
 export function Profile() {
   // ...
 }
 ```
 
-Then, **import** `Profile` from `Gallery.js` to `App.js` using a named import (with the curly braces):
+接著，使用 named import 的方式，從 `Gallery.js` **import** `Profile` 至 `App.js`（使用大括號）：
 
 ```js
 import { Profile } from './Gallery.js';
 ```
 
-Finally, **render** `<Profile />` from the `App` component:
+最後，在 `App` component 中 **render** `<Profile />`：
 
 ```js
 export default function App() {
   return <Profile />;
 }
 ```
 
-Now `Gallery.js` contains two exports: a default `Gallery` export, and a named `Profile` export. `App.js` imports both of them. Try editing `<Profile />` to `<Gallery />` and back in this example:
+現在 `Gallery.js` 包含兩個 export：一個是 default export 的 `Gallery`，一個是 named export 的 `Profile`。`App.js` 都 import 了它們。請試著將下方範例中的 `<Profile />` 改為 `<Gallery />`：
 
 <Sandpack>
 
@@ -222,47 +222,45 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-Now you're using a mix of default and named exports:
+現在，你混合使用了 default export 以及 named export：
 
 * `Gallery.js`:
-  - Exports the `Profile` component as a **named export called `Profile`.**
-  - Exports the `Gallery` component as a **default export.**
+  - 使用 **named export** 的方式，export `Profile` component，並命名為 `Profile`。
+  - 使用 **default export** 的方式，export `Gallery` component。
 * `App.js`:
-  - Imports `Profile` as a **named import called `Profile`** from `Gallery.js`.
-  - Imports `Gallery` as a **default import** from `Gallery.js`.
-  - Exports the root `App` component as a **default export.**
+  - 使用 **named import** 的方式，從 `Gallery.js` import `Profile`，並命名為 `Profile`。
+  - 使用 **default import** 的方式，從 `Gallery.js` import `Gallery`。
+  - 使用 **default export** 的方式，export root component `App`。
 
 <Recap>
 
-On this page you learned:
+在本章節中，你學到了：
 
-* What a root component file is
-* How to import and export a component
-* When and how to use default and named imports and exports
-* How to export multiple components from the same file
+* 什麼是 root component 檔案
+* 如何 import 和 export 一個 component
+* 何時以及如何使用 default 和 named import 和 export
+* 如何將 component 拆分為多個檔案
 
 </Recap>
 
-
-
 <Challenges>
 
-#### Split the components further {/*split-the-components-further*/}
+#### 進一步拆分 component {/*split-the-components-further*/}
 
-Currently, `Gallery.js` exports both `Profile` and `Gallery`, which is a bit confusing.
+現在，`Gallery.js` 同時 export 了 `Profile` 與 `Gallery`，這會讓人感到有些混淆。
 
-Move the `Profile` component to its own `Profile.js`, and then change the `App` component to render both `<Profile />` and `<Gallery />` one after another.
+試著將 `Profile` component 移至 `Profile.js`，然後更新 `App` component，依序 render `<Profile />` 與 `<Gallery />`。
 
-You may use either a default or a named export for `Profile`, but make sure that you use the corresponding import syntax in both `App.js` and `Gallery.js`! You can refer to the table from the deep dive above:
+你可能會使用 default export 或 named export 的方式來 export `Profile`，但請確保在 `App.js` 與 `Gallery.js` 中使用了相對應的 import 語法！具體方法可參考下方表格：
 
-| Syntax           | Export statement                           | Import statement                          |
+| 語法          | Export 陳述                           | Import 陳述                          |
 | -----------      | -----------                                | -----------                               |
 | Default  | `export default function Button() {}` | `import Button from './Button.js';`     |
 | Named    | `export function Button() {}`         | `import { Button } from './Button.js';` |
 
 <Hint>
 
-Don't forget to import your components where they are called. Doesn't `Gallery` use `Profile`, too?
+別忘了在呼叫它們的地方 import 你的 component，因為 `Gallery` 也會使用到 `Profile`。
 
 </Hint>
 
@@ -313,11 +311,11 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-After you get it working with one kind of exports, make it work with the other kind.
+當你成功使用其中一種 export 方式時，請嘗試使用另一種方法實現。
 
 <Solution>
 
-This is the solution with named exports:
+Named export 的解決方法：
 
 <Sandpack>
 
@@ -367,7 +365,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-This is the solution with default exports:
+Default export 的解決方法：
 
 <Sandpack>