以下是您提供的英文文本翻译成繁體中文的Markdown格式：

# ReactJS - 使用新創建的組件

## 引言

你好，未來的React開發者！我很興奮能成為你進入React組件世界的導師。作為一個教了多年計算機科學的人，我可以告訴你，理解組件就像學習用樂高積木建造——一旦你掌握了它，就能創造出令人驚奇的事物！

## React組件是什麼？

在我們深入使用組件之前，讓我們先了解它們是什麼。把組件想成是用户界面可重用的建築塊。就像你可以在創作的不同部分使用同樣的樂高積木一樣，你可以在應用的各個部分使用同樣的React組件。

### 組件類型

React主要有兩種組件類型：

1. 函數組件
2. 類別組件

在本教程中，我們將專注於函數組件，因為它們更簡單且更現代。

## 創建你的第一個組件

讓我們從創建一個簡單的組件開始。我們將創建一個"Greeting"組件，它會顯示一個歡迎信息。

```jsx
function Greeting() {
  return <h1>你好，React學習者！</h1>;
}

這可能看起來很簡單，但這裡發生了很多事情：

• 我們定義了一個名為Greeting的函數
• 這個函數返回JSX（那種類似HTML的語法）
• JSX代表了將會在螢幕上渲染的內容

使用你新創建的組件

現在我們有了Greeting組件，讓我們在應用中用它！

function App() {
  return (
    <div>
      <Greeting />
      <p>歡迎來到我們的React教程！</p>
    </div>
  );
}

這裡發生了什麼：

• 我們有一個App組件（我們應用的主組件）
• 在App中，我們使用了我們的Greeting組件
• 我們就像使用HTML標籤一樣使用組件

當你運行這段代碼時，你會看到"你好，React學習者！"後面跟著"歡迎來到我們的React教程！"

帶有Props的組件

當我們使用props使組件動態化時，組件變得非常強大。Props就像是你的組件的參數。

讓我們修改我們的Greeting組件以接受一個名稱：

function Greeting(props) {
  return <h1>你好，{props.name}！</h1>;
}

現在，我們可以像這樣使用它：

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

這會顯示：

你好，Alice！
你好，Bob！

這不是很酷嗎？我們創建了一個可重用的組件，可以對不同的人表示問候！

帶有多個Props的組件

讓我們進一步創建一個更複雜的組件。我們將創建一個UserCard組件，它會顯示用戶的信息。

function UserCard(props) {
  return (
    <div className="user-card">
      <h2>{props.name}</h2>
      <p>年齡：{props.age}</p>
      <p>職業：{props.occupation}</p>
    </div>
  );
}

現在我們可以像這樣使用它：

function App() {
  return (
    <div>
      <UserCard name="Alice" age={28} occupation="開發者" />
      <UserCard name="Bob" age={35} occupation="設計師" />
    </div>
  );
}

嵌套組件

React最强大的功能之一就是能够嵌套組件。讓我們創建一個UserList組件，它使用多個UserCard組件：

function UserList() {
  return (
    <div>
      <h1>用户列表</h1>
      <UserCard name="Alice" age={28} occupation="開發者" />
      <UserCard name="Bob" age={35} occupation="設計師" />
      <UserCard name="Charlie" age={42} occupation="經理" />
    </div>
  );
}

現在我們的App組件可以簡單地使用UserList：

function App() {
  return (
    <div>
      <Greeting name="React 學習者" />
      <UserList />
    </div>
  );
}

組件方法

組件也可以有自己的方法。讓我們在我們的UserCard組件中添加一個計算出生年份的方法：

function UserCard(props) {
  const calculateBirthYear = () => {
    const currentYear = new Date().getFullYear();
    return currentYear - props.age;
  };

  return (
    <div className="user-card">
      <h2>{props.name}</h2>
      <p>年齡：{props.age}</p>
      <p>出生年份：{calculateBirthYear()}</p>
      <p>職業：{props.occupation}</p>
    </div>
  );
}

結論

恭喜你！你已經邁出了進入React組件世界的第一步。我們已經介紹了創建簡單組件、使用props、嵌套組件以及甚至為組件添加方法。

記住，熟練需要練習。嘗試創建你自己的組件，嘗試不同的props，看看你能建造什麼。在你意識到之前，你將能夠輕鬆地構建複雜的用户界面！

這裡是我們創建的組件的快速參考表：

組件名稱	Props	描述
Greeting	name	顯示問候信息
UserCard	name, age, occupation	顯示用戶信息
UserList	None	顯示UserCard組件的列表

繼續編程，持續學習，最重要的是，在React中玩得開心！

Credits: Image by storyset