---
# System prepended metadata

title: Basic Component 基本元件
tags: [Simple Application]

---

# Basic Component 基本元件

> * 如有錯誤處指正或任何建議，懇請留言，感謝!
> * 搭配 ChatGPT 進行翻譯，請小心服用
> * ▸ ... 為英文原文

:::spoiler ...
Welcome to the Qwik tutorial. This is a series of short tutorials that will help you get started with Qwik. The introduction is a set of problems that will teach you how to create a component, store data, attach listeners, and fetch data from the server. So let's get started.
::: 
歡迎來到Qwik教學。接下來將有一系列簡短的教學幫助你開始使用Qwik。
下面將有一系列的題目引導您如何創建元件、儲存數據、附加監聽器以及從服務器獲取數據。
那麼讓我們開始吧。
:::spoiler ...
## Creating a component


Use the editor on the right to create a UI that looks something like this:
:::
## 創建一個元件
使用右側的編輯器創建類似下方的UI

```
GitHub organization: __________
- Qwik
- Partytown

```
:::spoiler ...
The HTML code for this component should be this:
:::
此元件的HTML應該要是這樣的：

```html
<div>
  <span>
    GitHub organization:
    <input value="BuilderIO" />
  </span>
  <div>
    <ul>
      <li>
        <a href="https://github.com/BuilderIO/qwik">Qwik</a>
      </li>
      <li>
        <a href="https://github.com/BuilderIO/partytown">Partytown</a>
      </li>
    </ul>
  </div>
</div>

```
:::spoiler ...
You can click the "Show Me" button in the bottom left to see the completed solution.
::: 
您可以點擊左下方的按鈕去查看完整的解決方案。

###### tags: `Simple Application`