元件(component)是React主要關鍵組成之一，它是一個可以被反覆利用的UI元素，不過說穿了React的文件中一直提到的元件，其實就是function每一個元件都是由一個function當然裡面內層可以有很多個但是最外層就是只有一個，所以元件就是function，如此一來元件可以重複使用就合理許多了吧!因為function也可以一直重複使用。

如何定義元件(component)

這與其多說，不如來看範例吧!下列就是一個元件

export default function Comp() {
  return (
    <>
      <h1>我是一個元件</h1>
    </>
  );
}

是不是跟function一模一樣，只是在React規定中元件開頭一定要大寫，然後要return出來是因為需要給其他地方使用，所以也需要匯出模組(ESM)給其他檔案使用。其實還有一點，不過是JSX的語法問題，最上層需要有個這樣的<></>根元素包住，換句話說JSX只能返回一個跟元素。

整理上述所說的React元件基本架構有那些呢?

React 元件的基本架構

1.元件開頭命名一定要大寫
2.裡面需要return返回
3.最外層要有唯一一個標籤包住通常是<></>，當然也可以是其它標籤
4.如果要給其它檔案使用一定要匯出

補充:進入點

說的直白點所謂的進入點，就是專案架構的最上層，但以剛入門React的人來說通常不會先理會這層，以vite而言所謂的進入點就是main.js，初始設定長下面這樣。

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

所以，通常在React匯出是一個必須的動作，因為以一個專案來說，再怎麼樣都會需要給進入點來使用，

元件的引用

通常都是一個檔案一個元件，所以在引用元件的時候會做一個匯入的動作，而React在render元件的形式上也很特別，是以標籤的形式呈現，範例如下:

import Comp from "./Comp"; //引用元件從其他檔案

export default function App() {
  return (
    <>
      {/* 可以重複使用 */}
      <Comp />
      <Comp />
      <Comp />
    </>
  );
}

ps:在vite寫元件副檔名需要用jsx

當然如果想偷懶一個檔案寫一堆元件也是可以，但是就不用做引入的動作了，範例如下:
只是不建議這麼而已

export default function App() {
  return (
    <>
      {/* 可以重複利用 */}
      <Comp />
      <Comp />
      <Comp />
    </>
  );
}

//React 的元件形式
function Comp() {
  return (
    <>
      <h1>我是一個元件</h1>
    </>
  );
}

總結

元件是React中基本的形式，整個架構幾乎都是由元件構成的，當然還有其中很重要的構成是JSX雖然一直提到，但還沒做詳細介紹，這部分明日會做比較詳細的介紹。

參考資料

React官方網站