React 元件
元件就像是返回 HTML 元素的函式。
React 元件
元件是獨立的、可重用的程式碼塊。它們的作用與 JavaScript 函式相同，但獨立工作並返回 HTML。
元件有兩種型別：類元件和函式元件。在本教程中，我們將重點關注函式元件。
在舊的 React 程式碼庫中，您可能會發現主要使用類元件。現在建議使用函式元件以及 Hooks，Hooks 在 React 16.8 中被新增。這裡有一個關於類元件的可選部分供您參考。
建立您的第一個元件
建立 React 元件時，元件名稱必須以大寫字母開頭。
類元件
類元件必須包含 extends React.Component 語句。此語句建立到 React.Component 的繼承，並使您的元件能夠訪問 React.Component 的函式。
該元件還需要一個 render() 方法，該方法返回 HTML。
示例
建立一個名為 Car 的類元件
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
函式元件
這是與上面相同的示例，但使用了函式元件建立。
函式元件也返回 HTML，並且與類元件的執行方式大致相同，但函式元件可以使用更少的程式碼編寫，更容易理解，並且在本教程中會受到青睞。
示例
建立一個名為 Car 的函式元件
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
渲染元件
現在您的 React 應用程式有了一個名為 Car 的元件，該元件返回一個 <h2> 元素。
要在您的應用程式中使用此元件，請使用與普通 HTML 類似的語法：<Car />
示例
將 Car 元件顯示在“root”元素中
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);Props
元件可以作為 props 傳遞，props 代表屬性。
Props 就像函式引數一樣，您將它們作為屬性發送到元件中。
您將在下一章瞭解更多關於 props 的資訊。
示例
使用屬性將顏色傳遞給 Car 元件，並在 render() 函式中使用它
function Car(props) {
return <h2>I am a {props.color} Car!</h2>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car color="red"/>);
元件中的元件
我們可以在其他元件中引用元件
示例
在 Garage 元件中使用 Car 元件
function Car() {
return <h2>I am a Car!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my Garage?</h1>
<Car />
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
檔案中的元件
React 關注程式碼重用，因此建議將元件拆分成單獨的檔案。
為此，請建立一個帶有 .js 副檔名的新檔案，並將程式碼放在其中。
請注意，檔名必須以大寫字母開頭。
示例
這是新檔案，我們將其命名為“Car.js”
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
export default Car;
要使用 Car 元件，您必須在應用程式中匯入該檔案。
示例
現在我們已經在應用程式中匯入了“Car.js”檔案，並且可以使用 Car 元件，就像它在此處建立一樣。
import React from 'react';
import ReactDOM from 'react-dom/client';
import Car from './Car.js';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
