昨天簡單了介紹一下 React，跟之後會使用到的線上測試環境。今天會接下來介紹 React 裡的 import 跟 export。然後我後來發現 快速開始 裡的東西在後面的文章都會有更詳細的介紹，所以之後就直接從後面的文章開始閱讀了。像是昨天介紹的 React Component 概念，就也會在 你的第一個 Component 頁面也有詳細介紹。

今天的重點會在 Component 的引入的部分，會閱讀 React 官方文件的：
Importing 和 Exporting Component

Root Component

昨天有說到，React 應用程式是由各種大大小小的 Component 所組成，而他就會像是 Tree 一樣，會有一個最初的節點 Root Component，之後的其他 Component 或 Html tag 會一層一層長下去。通常其他使用 React 的框架像是 Next.js 或 Remix 的 Root Component 就會分別定義在 App.js 跟 root.tsx 等檔案裡。之後就會在裡面引入（import）其他 Components 來產生 UI。

Exporting 和 importing 一個 component

接下來介紹如何 匯出（export）跟 引入（import） 一個 React component。在昨天的文章，我們學到了要建立一個 React component 跟定義一個 function 類似，而當我們想從我們所在的檔案把我們建立的 Component 匯出的時候，就會需要在 function 前面輸入 export，之後再在想要引入的檔案裡，加入 import 把 Component 匯入檔案中使用。
想知道更多 JavaScript export 跟 import 的運用可以參考 MDN：

• https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/export
• https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/import

Default vs named exports
關於 export，有兩種方式，一個是使用 export default function MyComponent 的 default exports 跟 export function MyComponent 的 named exports，兩個的差別除了有沒有加 default 外，在 import 的時候也會有差別。

在使用 default 的時候，引入會寫成 import MyComponent from './MyComponent.js，這樣就可以在當前檔案下使用 <MyComponent />，而在使用 default 的情況下，在 import 的時候不用使用定義的 function 名，可以寫成 import MyMyComponent from './MyComponent，這樣一樣會抓到 MyComponent.js 檔案裡的 MyComponent Component。但是要注意，一個檔案裡，只能有一個 export default，不然會出錯。

如果使用 named exports 的話，在 import 的時候就會寫成 import { MyComponent } from './MyComponent.js，名字需要完全一樣，不然會找不到 Component。Named exports 在一個檔案裡面可以使用多個像是：

// MyComponent.js

export function FirstComponent() {
  return <div>First</div>
}

export function SecondComponent() {
  return <div>Second</div>
}

引入的時候就可以寫成 import { FirstComponent, SecondComponent } from './MyComponent.js'

要使用哪一種方式，滿多人討論的，我自己後來的習慣是使用 Named Exports，原因是這樣在 import 的時候，IDE 可以幫助我們找到相對應的 Component 而讓開發者可以直接 autocomplete 填入。雖然 default exports 也可以，單如果有相同命名的 Component default 的 export 會找不到。另外在一個檔案裡有多個 Component 需要 export 的時候也會使用 Named Exports，像是 Table.js 裡面會有其他的 Component 像是 <TableHeader />, <TableRow /> 之類的。

Default Exports 比較常用到在會包含很多小 Component 的大 Component 來使用，像是當作某個頁面的 Root Component 的感覺，就會寫成像是 export default function SearchPage() 之類的。
但最後其實還是看開發團隊的習慣，這個沒有一定的解。

從同一檔案 export 及 import 多個 component

如果需要的話，其實也可以在一個檔案裡面同時使用 default 跟 named exports，但一樣注意 default export 一個檔案只能使用一個。這樣同時多個的情況下，import 就會寫成
import MyComponent, { firstComponent, SecondComponent } from './MyComponent

另外再補充一下，Named exports 也可以寫在檔案最後，像是：

// MyComponent.js

function FirstComponent() {
  return <div>First</div>
}

function SecondComponent() {
  return <div>Second</div>
}

export { FirstComponent, SecondComponent }

記得要用 {} 把 Component 包起來

小結

以上就是 Exporting 和 importing 一個 component 篇章的整理，關於檔案的匯入跟匯出，是在開發的時候非常常用的功能，希望這樣的整理還清楚，以後有遇到其他可以補充的也會再多做補充。如果有任何問題跟建議歡迎留言給我知道，謝謝大家耐心地看完今天的文章，明天見，晚安。