# 歡迎光臨 Qwik

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

## Qwik 概要
:::spoiler ...
Qwik is a front-end framework for building [**resumable**](https://qwik.builder.io/docs/concepts/resumable/) applications that start-up **instantly** on the client. Qwik achieves this by focusing on its philosophy of **downloading and executing only the code that is strictly necessary** to perform the user-triggered action. Qwik is a fine-grained lazy-loading framework representing a fundamentally new approach to building web applications.
:::

Qwik 是一種前端框架，用於構建可以在客戶端**立即**啟動的 [**可恢復性**](https://qwik.builder.io/docs/concepts/resumable/)應用程式。能夠達成都要歸功於 Qwik 專注於其哲學 ──「**僅下載和執行 用戶觸發操作所需的代碼**」。Qwik 是一個細緻的延遲載入框架，可以說是構建 Web 應用程式的重大新方法。

</br>

:::spoiler ...
## Qwik Tutorials

What follows is a set of tutorials that will help you get started with Qwik. Each tutorial focuses on a single topic and contains a hands-on example that requires your participation to make it work.
:::

## Qwik 教學
以下是一系列將幫助您開始使用 Qwik 的教學。每個教學都針對一個單一主題，並包含一個需要您動手寫才能運行的實踐範例。

</br>

:::spoiler ...
The tutorials are broken up into these sections:
:::
教學分為以下部分：

---
:::spoiler ...
- [Qwik Introduction](https://qwik.builder.io/tutorial/introduction/component/): A fast-paced introduction to Qwik where we focus more on building a simple application with server-side pre-rendering and client-side interactivity. This tutorial is designed to give you a feel over how Qwik applications are built rather than focusing on details of individual APIs.
:::

- [Qwik 基本介紹](https://qwik.builder.io/tutorial/introduction/component/)：會很快速地介紹 Qwik，我們將更加重視建構具有服務器端預渲染和客戶端交互性的簡單應用程式。這個教程旨在讓您感受 Qwik 應用程式的建構方式，而不是專注於個別 API 的細節。

:::spoiler ...
- [Components](https://qwik.builder.io/tutorial/component/basic/): All about declaring, binding, and composition of components.
:::

- [元件](https://qwik.builder.io/tutorial/component/basic/)：這部分主要介紹元件的宣告、綁定和組合。

:::spoiler ...
- [Events](https://qwik.builder.io/tutorial/events/basic/): Declaring, binding, and triggering events.
:::

- [事件](https://qwik.builder.io/tutorial/events/basic/): 這部分主要介紹事件的宣告、綁定和觸發。

:::spoiler ...
- [Stores](https://qwik.builder.io/tutorial/store/basic/): Declaring stores, data-binding, reactivity, and serialization.
:::

- ==[Stores](https://qwik.builder.io/tutorial/store/basic/): 這部分主要介紹宣告Stores、數據綁定、反應性和序列化。==

:::spoiler ...
- [Props](https://qwik.builder.io/tutorial/props/basic/): A deep dive into declaring and working with props and components and serialization constraints.
:::

- [屬性](https://qwik.builder.io/tutorial/props/basic/)：這部分將深入研究宣告和使用屬性和元件以及序列化約束的相關內容。

:::spoiler ...
- [Reactivity](https://qwik.builder.io/tutorial/reactivity/template/): A deep dive into how reactivity works and how it can be used to build a more complex application.
:::

- [反應性](https://qwik.builder.io/tutorial/reactivity/template/)：深入探討反應性如何運作以及如何使用它來建構更複雜的應用程序。

:::spoiler ...
- [Context](https://qwik.builder.io/tutorial/context/basic/): Making data globaly available to your application through context.
:::

- [Context](https://qwik.builder.io/tutorial/context/basic/)：透過 context 讓資料在應用程式全域皆可使用。

:::spoiler ...
- [Lifecycle Hooks](https://qwik.builder.io/tutorial/hooks/use-mount/): Component life-cycle hooks.
:::

- [生命週期鉤子](https://qwik.builder.io/tutorial/hooks/use-mount/)：元件生命週期鉤子。

:::spoiler ...
- [Projection](https://qwik.builder.io/tutorial/projection/basic/): A deep dive into how projection works and how to use it in more complex scenarios.
:::

- [Projection](https://qwik.builder.io/tutorial/projection/basic/)：深入探討 projection 如何運作以及如何在更複雜的情境下使用它。

:::spoiler ...
- [Styling](https://qwik.builder.io/tutorial/style/styles/): Styling your application with CSS.
:::

- [Styling](https://qwik.builder.io/tutorial/style/styles/)：使用 CSS 來設計你的應用程式外觀。

:::spoiler ...
- [Optimizer](https://qwik.builder.io/tutorial/qrl/optimizer/): Understanding the Optimizer constraints.
:::

- [優化工具](https://qwik.builder.io/tutorial/qrl/optimizer/)：了解優化工具(Optimizer)的限制條件。

:::spoiler ...
- [Composing new APIs](https://qwik.builder.io/tutorial/composing/dollar/): Composing new `use___()` and `$` APIs for your application.
:::

- [Composing new APIs](https://qwik.builder.io/tutorial/composing/dollar/)：為您的應用程式編寫新的 `use___()` 和 `$` APIs。