Update Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started, zh-TW (#926)

1 files changed, 79 insertions, 79 deletions

diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html
index 2cd02e8983..455ab379f7 100644
--- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html
@@ -17,88 +17,88 @@ tags:
 <div>{{LearnSidebar}}<br>
 {{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
 
-<p class="summary">此篇文章我們將提供摘要來說明 <a href="https://svelte.dev/">Svelte 框架</a>。我們將會看到 Svelte 如何運作及它本身和其餘框架和工具之間的區別。接著我們將學習如何設置我們的開發環境並建立一個範例應用程式，了解其專案結構及如何在本地運行，最後可以將其建置於正式環境。</p>
+<p class="summary">此篇文章我們將提供摘要來說明<a href="https://svelte.dev/">Svelte框架</a>。我們將會看到Svelte如何運作及它本身和其餘框架和工具之間的區別。接著我們將學習如何設置我們的開發環境並建立一個範例應用程式，了解其專案結構及如何在本地運行，最後可以將其建置於正式環境。</p>
 
 <table class="learn-box standard-table">
  <tbody>
   <tr>
    <th scope="row">預備知識:</th>
    <td>
-    <p>學習它，推薦你至少需熟悉基本的 <a href="/zh-TW/docs/Learn/HTML">HTML</a>、<a href="/zh-TW/docs/Learn/CSS">CSS</a> 與 <a href="/zh-TW/docs/Learn/JavaScript">JavaScript</a> 等程式語言且具備 <a href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">終端機/命令列環境</a> 基本知識。</p>
+    <p>學習它，推薦你至少需熟悉基本的<a href="/zh-TW/docs/Learn/HTML">HTML</a>、<a href="/zh-TW/docs/Learn/CSS">CSS</a>與<a href="/zh-TW/docs/Learn/JavaScript">JavaScript</a>等程式語言且具備<a href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">終端機/命令列環境</a>基本知識。</p>
 
-    <p>Svelte 為一個編譯器，從我們的來源去產生出最小且高度優化的 JavaScript 程式碼；你將會需要 node 和 npm 來安裝此編譯器來建置你的應用程式。</p>
+    <p>Svelte為一個編譯器，從我們的來源去產生出最小且高度優化的JavaScript程式碼；你將會需要node和npm來安裝此編譯器來建置你的應用程式。</p>
    </td>
   </tr>
   <tr>
    <th scope="row">學習目標:</th>
-   <td>設置 Svelte 本地開發環境，建立初始應用程式，瞭解 Svelte 基本運作方式。</td>
+   <td>設置Svelte本地開發環境，建立初始應用程式，瞭解Svelte基本運作方式。</td>
   </tr>
  </tbody>
 </table>
 
 <h2 id="Svelte_A_new_approach_to_building_rich_user_interfaces">Svelte：一種建構豐富使用者介面的新方式</h2>
 
-<p>於此模組中介紹的其它框架相比，Svelte 提供了一種不同的方式來建構網站應用程式。當應用程式運行時，像 React 和 Vue 等框架會在使用者的瀏覽器直接做它們想要做的事情，而 Svelte 則是將做的這些事移到編譯階段處理，因此那些做的事情只會發生在你建置應用程式的時候，進而能產生高度優化的原生 JavaScript 程式碼。</p>
+<p>於此模組中介紹的其它框架相比，Svelte提供了一種不同的方式來建構網站應用程式。當應用程式運行時，像React和Vue等框架會在使用者的瀏覽器直接做它們想要做的事情，而Svelte則是將做的這些事移到編譯階段處理，因此那些做的事情只會發生在你建置應用程式的時候，進而能產生高度優化的原生JavaScript程式碼。</p>
 
-<p>這種方式產生的結果並不是只有將應用程式的 Bundles 最小化和取得最佳效能，對於現代的生態環境而擁有較少技術經驗的人，可以更容易取得開發者經驗。</p>
+<p>這種方式產生的結果並不是只有將應用程式的Bundles最小化和取得最佳效能，對於現代的生態環境而擁有較少技術經驗的人，可以更容易取得開發者經驗。</p>
 
-<p>Svelte 更貼近傳統的網站開發模型（HTML、CSS、JS），它只有對 HTML 和 JavaScript 加上一些擴充，與其它框架相比，可以說只需要一點點概念和工具就能學習。</p>
+<p>Svelte更貼近傳統的網站開發模型（HTML、CSS、JS），它只有對HTML和JavaScript加上一些擴充，與其它框架相比，可以說只需要一點點概念和工具就能學習。</p>
 
 <p>現階段的缺點只因它目前仍在發展中——和其它成熟框架相比它的生態環境較受限於工具、支援、套件、使用模式等等限制，工作機會也比較少。但它的優點應該足夠讓你感興趣並去探索它。</p>
 
 <div class="notecard note">
-<p><strong>注意</strong>：最近 Svelte 已經正式加入 <a href="https://svelte.dev/blog/svelte-and-typescript">TypeScript 支援</a>，這也是最受歡迎的功能之一，我們將在之後的教學系列中看到它。</p>
+<p><strong>注意</strong>：最近Svelte已經正式加入<a href="https://svelte.dev/blog/svelte-and-typescript">TypeScript支援</a>，這也是最受歡迎的功能之一，我們將在之後的教學系列中看到它。</p>
 </div>
 
-<p>我們鼓勵你走完 <a href="https://svelte.dev/tutorial/basics">Svelte 教學</a>來快速了解基本的概念，在你回來此教學系列學習如何建構一些更深入的東西之前。它應該會花費你約 30 分鐘去完成。</p>
+<p>我們鼓勵你走完<a href="https://svelte.dev/tutorial/basics">Svelte教學</a>來快速了解基本的概念，在你回來此教學系列學習如何建構一些更深入的東西之前。它應該會花費你約30分鐘去完成。</p>
 
 <h2 id="Use_cases">使用案例</h2>
 
-<p>Svelte 可以被用來開發一小塊介面或整個應用程式。你也可以從頭開始來讓 Svelte 驅動你的使用者介面或將它漸進地整合至已存在的應用程式。</p>
+<p>Svelte可以被用來開發一小塊介面或整個應用程式。你也可以從頭開始來讓Svelte驅動你的使用者介面或將它漸進地整合至已存在的應用程式。</p>
 
-<p>不過 Svelte 特別適合處理下列幾種情況：</p>
+<p>不過Svelte特別適合處理下列幾種情況：</p>
 
 <ul>
- <li>讓網站應用程式更適用於低功耗裝置：使用 Svelte 建構應用程式將擁有較小的 Bundle 大小，特別對於網路連線緩慢和有限處理能力的裝置是理想的。較少的程式碼意謂著較少的容量可供下載、解析、執行並保存於記憶體中。</li>
- <li>可應付需頻繁互動的頁面或複雜的視覺化需求：比如你建構一個資料視覺化應用程式，你可能會需要顯示大量的 DOM 元素，從該框架就能獲得較好的性能增益，因為它不會有運行途中的消耗，將可以確保使用者的互動更快速與即時。</li>
- <li>具備基本的網站開發知識即可：Svelte 學習曲線不高。網站開發人員具備基本的 HTML、CSS、JavaScript 知識就能在短時間簡單地抓住 Svelte 要點並開始建構網站應用程式。</li>
+ <li>讓網站應用程式更適用於低功耗裝置：使用Svelte建構應用程式將擁有較小的Bundle大小，特別對於網路連線緩慢和有限處理能力的裝置是理想的。較少的程式碼意謂著較少的容量可供下載、解析、執行並保存於記憶體中。</li>
+ <li>可應付需頻繁互動的頁面或複雜的視覺化需求：比如你建構一個資料視覺化應用程式，你可能會需要顯示大量的DOM元素，從該框架就能獲得較好的性能增益，因為它不會有運行途中的消耗，將可以確保使用者的互動更快速與即時。</li>
+ <li>具備基本的網站開發知識即可：Svelte學習曲線不高。網站開發人員具備基本的HTML、CSS、JavaScript知識就能在短時間簡單地抓住Svelte要點並開始建構網站應用程式。</li>
 </ul>
 
-<p>此外，有了 <a href="https://sapper.svelte.dev/">Sapper</a>（此框架基於 Svelte）的幫忙，你將能夠開發出帶有這些進階特徵的應用程式，像是伺服器端渲染（server-side rendering）、程式碼分離（code splitting）、以檔案為基礎的路由方式（file-based routing）、離線應用（offline）等支援。還有 <a href="https://svelte-native.technology/">Svelte Native</a> 讓你能夠建構原生行動應用程式。</p>
+<p>此外，有了<a href="https://sapper.svelte.dev/">Sapper</a>（此框架基於Svelte）的幫忙，你將能夠開發出帶有這些進階特徵的應用程式，像是伺服器端渲染（server-side rendering）、程式碼分離（code splitting）、以檔案為基礎的路由方式（file-based routing）、離線應用（offline）等支援。還有<a href="https://svelte-native.technology/">Svelte Native</a>讓你能夠建構原生行動應用程式。</p>
 
-<h2 id="How_does_Svelte_work">Svelte 如何工作？</h2>
+<h2 id="How_does_Svelte_work">Svelte如何工作？</h2>
 
-<p>做為一個編譯器，Svelte 能擴展 HTML、CSS、JavaScript，產生最佳的 JavaScript 程式碼而不會有任何運行途中的消耗。為了達成這件事，Svelte 透過下列方法來擴展其原生網站技術：</p>
+<p>做為一個編譯器，Svelte能擴展HTML、CSS、JavaScript，產生最佳的JavaScript程式碼而不會有任何運行途中的消耗。為了達成這件事，Svelte透過下列方法來擴展其原生網站技術：</p>
 
 <ul>
- <li>藉由對 HTML 擴展允許標記 JavaScript 表達式和提供一些指令來使用條件和迴圈，做法和 Handlebars 相似。</li>
- <li>藉由對 CSS 擴展加上範圍機制，允許每個元件去定義它們自己的樣式，不會因為其它元件的樣式改變而被影響。</li>
- <li>藉由對 JavaScript 擴展重新詮釋語言的一些特定指令來達到真實的反應性和減輕元件狀態管理。</li>
+ <li>藉由對HTML擴展允許標記JavaScript表達式和提供一些指令來使用條件和迴圈，做法和Handlebars相似。</li>
+ <li>藉由對CSS擴展加上範圍機制，允許每個元件去定義它們自己的樣式，不會因為其它元件的樣式改變而被影響。</li>
+ <li>藉由對JavaScript擴展重新詮釋語言的一些特定指令來達到真實的反應性和減輕元件狀態管理。</li>
 </ul>
 
-<p>只有在非常特殊的情況和 Svelte 元件的上下文中編譯器才會介入。其中對 JavaScript 的擴展相對也比較少且謹慎，就是為了不破壞 JavaScript 一些語法，而使開發人員覺得困惑。事實上，你大部分時間還是會用到原生 JavaScript 來開發。</p>
+<p>只有在非常特殊的情況和Svelte元件的上下文中編譯器才會介入。其中對JavaScript的擴展相對也比較少且謹慎，就是為了不破壞JavaScript一些語法，而使開發人員覺得困惑。事實上，你大部分時間還是會用到原生JavaScript來開發。</p>
 
-<h2 id="First_steps_with_Svelte">Svelte 第一步</h2>
+<h2 id="First_steps_with_Svelte">Svelte第一步</h2>
 
-<p>做為一個編譯器，你不能只是把 <code>&lt;script src="svelte.js"&gt;</code> 標籤加入到你的頁面並載入它到你的應用程式。你將必須設置你的開發環境，為的是能讓編譯器可以做它要做的事情。</p>
+<p>做為一個編譯器，你不能只是把<code>&lt;script src="svelte.js"&gt;</code>標籤加入到你的頁面並載入它到你的應用程式。你將必須設置你的開發環境，為的是能讓編譯器可以做它要做的事情。</p>
 
 <h3 id="Requirements">需求</h3>
 
-<p>為了使用 Svelte，你會需要安裝 <a href="https://nodejs.org/en/">Node.js</a>。推薦你使用長期支援版本（LTS）。Node 包含 npm（the node package manager）和 npx（the node package runner）。另外你也可以使用 Yarn 套件管理工具來代替 npm，但我們先假定你會用 npm 來走完這個教學系列。若想知道更多 npm 和 yarn 的相關資訊可以至<a href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">基礎套件管理</a>了解。
+<p>為了使用Svelte，你會需要安裝<a href="https://nodejs.org/en/">Node.js</a>。推薦你使用長期支援版本（LTS）。Node包含npm（the node package manager）和npx（the node package runner）。另外你也可以使用Yarn套件管理工具來代替npm，但我們先假定你會用npm來走完這個教學系列。若想知道更多npm和yarn的相關資訊可以至<a href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">基礎套件管理</a>了解。
 
-<p>如果你是使用 Windows 的話，你將會需要安裝一些軟體來達到和 Unix/macOS 作業系統使用終端機一樣的行為，為的是接下來走教學系列時，可以使用到一些被提及的終端機指令。Gitbash（<a href="https://gitforwindows.org/">適用於 Windows 的 git 工具集</a>中的一部分功能）或使用<a href="https://docs.microsoft.com/zh-TW/windows/wsl/about">適用於 Linux 的 Windows 子系統（WSL）</a>，這些都是蠻合適的解決方案。<a href="https://cmder.net/">Cmder</a> 也是另一個不錯且較完善的解決方案。若想知道更多命令列的相關資訊可以至<a href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">命令列課程</a>了解。</p>
+<p>如果你是使用Windows的話，你將會需要安裝一些軟體來達到和Unix/macOS作業系統使用終端機一樣的行為，為的是接下來走教學系列時，可以使用到一些被提及的終端機指令。Gitbash（<a href="https://gitforwindows.org/">適用於Windows的git工具集</a>中的一部分功能）或使用<a href="https://docs.microsoft.com/zh-TW/windows/wsl/about">適用於Linux的Windows子系統（WSL）</a>，這些都是蠻合適的解決方案。<a href="https://cmder.net/">Cmder</a>也是另一個不錯且較完善的解決方案。若想知道更多命令列的相關資訊可以至<a href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">命令列課程</a>了解。</p>
 
 <p>若想知道更多相關資訊也可以至下列去閱讀：</p>
 
 <ul>
- <li>可以至 nodejs.org 了解<a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/">「什麼是 npm？」</a></li>
- <li>可以至 npm 部落格了解<a href="https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner">「介紹 npx」</a></li>
- <li>可以至 svelte 部落格了解<a href="https://svelte.dev/blog/the-easiest-way-to-get-started">「以最簡單的方式來開始 Svelte」</a></li>
+ <li>可以至nodejs.org了解<a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/">「什麼是npm？」</a></li>
+ <li>可以至npm部落格了解<a href="https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner">「介紹npx」</a></li>
+ <li>可以至svelte部落格了解<a href="https://svelte.dev/blog/the-easiest-way-to-get-started">「以最簡單的方式來開始Svelte」</a></li>
 </ul>
 
-<h3 id="Creating_your_first_Svelte_app">建構你第一個 Svelte 應用程式</h3>
+<h3 id="Creating_your_first_Svelte_app">建構你第一個Svelte應用程式</h3>
 
-<p>最簡單的方式就是使用入門範本來建構初始應用程式。你可以至 <a href="https://github.com/sveltejs/template">sveltejs/template</a> 下載並解壓縮出入門範本或者使用 <a href="https://github.com/Rich-Harris/degit">degit</a> 來做這件事。</p>
+<p>最簡單的方式就是使用入門範本來建構初始應用程式。你可以至<a href="https://github.com/sveltejs/template">sveltejs/template</a>下載並解壓縮出入門範本或者使用<a href="https://github.com/Rich-Harris/degit">degit</a>來做這件事。</p>
 
 <p>為了建構你第一個入門範本應用程式，請先執行下列終端機指令：</p>
 
@@ -108,10 +108,10 @@ npm install
 npm run dev</pre>
 
 <div class="notecard note">
-<p><strong>注意</strong>：不用太驚訝 degit 做了這麼多事情——它其實就只是讓你可以從 git 儲存庫下載和解壓縮最新版本的內容。使用它比起使用 <code>git clone</code> 更快能達到我們的目的，因為它並不會下載整個儲存庫的歷史以及不會複製一份放在本機端。</p>
+<p><strong>注意</strong>：不用太驚訝degit做了這麼多事情——它其實就只是讓你可以從git儲存庫下載和解壓縮最新版本的內容。使用它比起使用<code>git clone</code>更快能達到我們的目的，因為它並不會下載整個儲存庫的歷史以及不會複製一份放在本機端。</p>
 </div>
 
-<p>之後執行 <code>npm run dev</code>，Svelte 將會編譯和建構你的應用程式。它將會跑在本機 <code>localhost:5000</code> 位址。當你對來源檔案做了異動，Svelte 將會偵測到檔案更新並自動地重新編譯和刷新你的應用程式。你的瀏覽器將會顯示如下圖：</p>
+<p>之後執行<code>npm run dev</code>，Svelte將會編譯和建構你的應用程式。它將會跑在本機<code>localhost:5000</code>位址。當你對來源檔案做了異動，Svelte將會偵測到檔案更新並自動地重新編譯和刷新你的應用程式。你的瀏覽器將會顯示如下圖：</p>
 
 <p><img alt="A simple start page that says hello world, and gives a link to the official svelte tutorials" src="01-svelte-starter-app.png" style="border-style: solid; border-width: 1px;"></p>
 
@@ -143,41 +143,41 @@ npm run dev</pre>
 <p>內容解釋如下：</p>
 
 <ul>
- <li><code>package.json</code> 和 <code>package-lock.json</code>：Node.js/npm 用它來組織化管理你的專案，相關資訊可以在這邊找到。在這個教學系列中，你不需要完全了解這個檔案，但如果你想要學習更多的話，你可以至 NodeJS.org 閱讀 <a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/">什麼是 <code>package.json</code> 檔案</a>？我們在<a href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">基礎套件管理教學系列</a>也有談到。</li>
- <li><code>node_modules</code>：這裡是 node 存放專案相依套件的地方。這些相依套件在正式環境不會看到，只有開發時才會被使用到。</li>
- <li><code>.gitignore</code>：告訴 git 有哪些檔案或資料夾不要納入專案版本控制——透過它可以決定哪些檔案要納入專案版本控制，還蠻實用的！</li>
- <li><code>rollup.config.js</code>：Svelte 使用 <a href="https://rollupjs.org/">rollup.js</a> 做為模組包裝工具。這個組態檔案告訴 rollup 如何編譯和建構你的應用程式。假如你偏好使用 <a href="https://webpack.js.org/">webpack</a>，你可以改執行 <code>npx degit sveltejs/template-webpack svelte-app</code> 來建構你的初始應用程式。</li>
- <li><code>scripts</code>：包含所需的設置腳本。現在應該只有 <code>setupTypeScript.js</code>。
+ <li><code>package.json</code>和<code>package-lock.json</code>：Node.js/npm用它來組織化管理你的專案，相關資訊可以在這邊找到。在這個教學系列中，你不需要完全了解這個檔案，但如果你想要學習更多的話，你可以至NodeJS.org閱讀<a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/">什麼是<code>package.json</code>檔案</a>？我們在<a href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">基礎套件管理教學系列</a>也有談到。</li>
+ <li><code>node_modules</code>：這裡是node存放專案相依套件的地方。這些相依套件在正式環境不會看到，只有開發時才會被使用到。</li>
+ <li><code>.gitignore</code>：告訴git有哪些檔案或資料夾不要納入專案版本控制——透過它可以決定哪些檔案要納入專案版本控制，還蠻實用的！</li>
+ <li><code>rollup.config.js</code>：Svelte使用<a href="https://rollupjs.org/">rollup.js</a>做為模組包裝工具。這個組態檔案告訴rollup如何編譯和建構你的應用程式。假如你偏好使用<a href="https://webpack.js.org/">webpack</a>，你可以改執行<code>npx degit sveltejs/template-webpack svelte-app</code>來建構你的初始應用程式。</li>
+ <li><code>scripts</code>：包含所需的設置腳本。現在應該只有<code>setupTypeScript.js</code>。
   <ul>
-    <li><code>setupTypeScript.js</code>：此腳本用來支援 Svelte 可以使用 TypeScript。我們將在之後的文章談到更多。</li>
+    <li><code>setupTypeScript.js</code>：此腳本用來支援Svelte可以使用TypeScript。我們將在之後的文章談到更多。</li>
   </ul>
 </li>
  <li><code>src</code>：這個目錄主要放你應用程式的來源程式碼——你寫的程式碼基本都會放在這。
   <ul>
    <li><code>App.svelte</code>：在你的應用程式中它是最高層級的元件。不過它現在只會渲染出「Hello World!」的訊息給你看。</li>
-   <li><code>main.js</code>：我們應用程式的進入點。它會實例化 <code>App</code> 元件並將其綁定至我們 html 頁面的 body 上。</li>
+   <li><code>main.js</code>：我們應用程式的進入點。它會實例化<code>App</code>元件並將其綁定至我們html頁面的body上。</li>
   </ul>
  </li>
  <li><code>public</code>：這個目錄包含所有我們會釋出於正式環境的檔案。
   <ul>
-   <li><code>favicon.png</code>：這個是你應用程式的 favicon。現在應該會是 Svelte 的標誌。</li>
-   <li><code>index.html</code>：這個是你應用程式的主要頁面。最初為一個空的 HTML5 頁面，接著會載入由 Svelte 產生的 css 檔案和 js bundles。</li>
-   <li><code>global.css</code>：這個檔案包含沒有範圍限制的樣式。這是一個正規的 css 檔案，將會套用至整個應用程式。</li>
-   <li><code>build</code>：這個資料夾會包含那些被產生的 CSS 和 JavaScript 來源程式碼。
+   <li><code>favicon.png</code>：這個是你應用程式的favicon。現在應該會是Svelte的標誌。</li>
+   <li><code>index.html</code>：這個是你應用程式的主要頁面。最初為一個空的HTML5頁面，接著會載入由Svelte產生的css檔案和js bundles。</li>
+   <li><code>global.css</code>：這個檔案包含沒有範圍限制的樣式。這是一個正規的css檔案，將會套用至整個應用程式。</li>
+   <li><code>build</code>：這個資料夾會包含那些被產生的CSS和JavaScript來源程式碼。
     <ul>
-     <li><code>bundle.css</code>：所有定義於你個別元件中的樣式，都會被 Svelte 產生至這個 CSS 檔案中。</li>
-     <li><code>bundle.js</code>：所有你的 JavaScript 來源程式碼都會被編譯至這個 JavaScript 檔案中。</li>
+     <li><code>bundle.css</code>：所有定義於你個別元件中的樣式，都會被Svelte產生至這個CSS檔案中。</li>
+     <li><code>bundle.js</code>：所有你的JavaScript來源程式碼都會被編譯至這個JavaScript檔案中。</li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
 
-<h2 id="Having_a_look_at_our_first_Svelte_component">讓我們來看看第一個 Svelte 元件</h2>
+<h2 id="Having_a_look_at_our_first_Svelte_component">讓我們來看看第一個Svelte元件</h2>
 
-<p>元件是 Svelte 應用程式建構的基礎。使用 HTML 的超集合將它們寫至 <code>.svelte</code> 檔案中。</p>
+<p>元件是Svelte應用程式建構的基礎。使用HTML的超集合將它們寫至<code>.svelte</code>檔案中。</p>
 
-<p>全部有三個區塊—— <code>&lt;script&gt;</code>，<code>&lt;styles&gt;</code> 和標記（markup）區塊——各區塊存在與否由你決定，也沒限制區塊存放的順序。</p>
+<p>全部有三個區塊——<code>&lt;script&gt;</code>，<code>&lt;styles&gt;</code>和標記（markup）區塊——各區塊存在與否由你決定，也沒限制區塊存放的順序。</p>
 
 <pre class="brush: html">&lt;script&gt;
   // 邏輯放這
@@ -187,13 +187,13 @@ npm run dev</pre>
   /* 樣式放這 */
 &lt;/style&gt;
 
-&lt;!-- 標記（零或多個 HTML 元素）放這 --&gt;</pre>
+&lt;!-- 標記（零或多個HTML元素）放這 --&gt;</pre>
 
 <div class="notecard note">
-<p><strong>注意</strong>：更多元件格式的資訊，可以至 <a href="https://svelte.dev/docs#Component_format">svelte 文件</a>閱讀。</p>
+<p><strong>注意</strong>：更多元件格式的資訊，可以至<a href="https://svelte.dev/docs#Component_format">svelte文件</a>閱讀。</p>
 </div>
 
-<p>接著我們來看入門範本中的 <code>src/App.svelte</code> 檔案，你應該會看到以下內容：</p>
+<p>接著我們來看入門範本中的<code>src/App.svelte</code>檔案，你應該會看到以下內容：</p>
 
 <pre class="brush: html">&lt;script&gt;
   export let name;
@@ -226,30 +226,30 @@ npm run dev</pre>
   }
 &lt;/style&gt;</pre>
 
-<h3 id="The_&lt;script&gt;_section"><code>&lt;script&gt;</code> 區塊</h3>
+<h3 id="The_&lt;script&gt;_section"><code>&lt;script&gt;</code>區塊</h3>
 
-<p><code>&lt;script&gt;</code> 區塊包含元件實例被建構時運行的 JavaScript。元件標記區塊則可以使用頂層那些被宣告或載入的變數。頂層變數是 Svelte 預設用來處理元件狀態和互動使用。我們之後會解釋更多細節來說明這代表什麼意思。</p>
+<p><code>&lt;script&gt;</code>區塊包含元件實例被建構時運行的JavaScript。元件標記區塊則可以使用頂層那些被宣告或載入的變數。頂層變數是Svelte預設用來處理元件狀態和互動使用。我們之後會解釋更多細節來說明這代表什麼意思。</p>
 
 <pre class="brush: html">&lt;script&gt;
   export let name;
 &lt;/script&gt;</pre>
 
-<p>Svelte 使用 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/export">export</a></code> 關鍵字將變數宣告標記為屬性，代表這個屬性可以被外部其它元件存取。這是 Svelte 擴展 JavaScript 語法讓其更有用且使用上如同以往的其中一個例子。</p>
+<p>Svelte使用<code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/export">export</a></code>關鍵字將變數宣告標記為屬性，代表這個屬性可以被外部其它元件存取。這是Svelte擴展JavaScript語法讓其更有用且使用上如同以往的其中一個例子。</p>
 
 <h3 id="The_markup_section">標記區塊</h3>
 
-<p>標記區塊中你可以插入任何你想要的 HTML，另外你也可以插入有效的 JavaScript 表達式在大括號（<code>{}</code>）中。此例中我們嵌入 <code>name</code> 屬性值在 <code>Hello</code> 文字的右邊。</p>
+<p>標記區塊中你可以插入任何你想要的HTML，另外你也可以插入有效的JavaScript表達式在大括號（<code>{}</code>）中。此例中我們嵌入<code>name</code>屬性值在<code>Hello</code>文字的右邊。</p>
 
 <pre class="brush: html">&lt;main&gt;
   &lt;h1&gt;Hello {name}!&lt;/h1&gt;
   &lt;p&gt;Visit the &lt;a href="https://svelte.dev/tutorial"&gt;Svelte tutorial&lt;/a&gt; to learn how to build Svelte apps.&lt;/p&gt;
 &lt;/main&gt;</pre>
 
-<p>Svelte 也支援一些標籤，像是 <code>{#if...}</code>，<code>{#each...}</code> 和 <code>{#await...}</code> ——分別允許你可以條件式渲染部分標記區塊，迭代清單元素與處理非同步數值。</p>
+<p>Svelte也支援一些標籤，像是<code>{#if...}</code>，<code>{#each...}</code>和<code>{#await...}</code>——分別允許你可以條件式渲染部分標記區塊，迭代清單元素與處理非同步數值。</p>
 
-<h3 id="The_&lt;style&gt;_section"><code>&lt;style&gt;</code> 區塊</h3>
+<h3 id="The_&lt;style&gt;_section"><code>&lt;style&gt;</code>區塊</h3>
 
-<p>假如你有寫過一些 CSS，下面這段應該不會太陌生：</p>
+<p>假如你有寫過一些CSS，下面這段應該不會太陌生：</p>
 
 <pre class="brush: html">&lt;style&gt;
   main {
@@ -273,36 +273,36 @@ npm run dev</pre>
   }
 &lt;/style&gt;</pre>
 
-<p>我們現在對 <code><a href="/zh-TW/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;</a></code> 元素套用了一些樣式。對於其它元件中的 <code>&lt;h1&gt;</code> 元素們將會有什麼影響呢？</p>
+<p>我們現在對<code><a href="/zh-TW/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;</a></code>元素套用了一些樣式。對於其它元件中的<code>&lt;h1&gt;</code>元素們將會有什麼影響呢？</p>
 
-<p>在 Svelte 中，CSS 在元件 <code>&lt;style&gt;</code> 區塊中且被侷限於該元件範圍之內。這是透過對所選的元素加上一個類別來實現，而這個類別則會是基於元件樣式的雜湊值。</p>
+<p>在Svelte中，CSS在元件<code>&lt;style&gt;</code>區塊中且被侷限於該元件範圍之內。這是透過對所選的元素加上一個類別來實現，而這個類別則會是基於元件樣式的雜湊值。</p>
 
-<p>你可以觀察到這個現象，藉由在瀏覽器開一個新標籤至 <code>localhost:5000</code> 位址，對 <em>HELLO WORLD!</em> 標籤右鍵／<kbd>Ctrl</kbd>點選並選擇<em>檢查</em>：</p>
+<p>你可以觀察到這個現象，藉由在瀏覽器開一個新標籤至<code>localhost:5000</code>位址，對<em>HELLO WORLD!</em>標籤右鍵／<kbd>Ctrl</kbd>點選並選擇<em>檢查</em>：</p>
 
 <p><img alt="Svelte starter app with devtools open, showing classes for scoped styles" src="02-svelte-component-scoped-styles.png"></p>
 
-<p>編譯應用程式時，Svelte 會改變我們 <code>h1</code> 的樣式定義為 <code>h1.svelte-1tky8bj</code> 並更改每一個在此元件中的 <code>&lt;h1&gt;</code> 元素為 <code>&lt;h1 class="svelte-1tky8bj"&gt;</code>，如此就能讓該元件取得所需的樣式。</p>
+<p>編譯應用程式時，Svelte會改變我們<code>h1</code>的樣式定義為<code>h1.svelte-1tky8bj</code>並更改每一個在此元件中的<code>&lt;h1&gt;</code>元素為<code>&lt;h1 class="svelte-1tky8bj"&gt;</code>，如此就能讓該元件取得所需的樣式。</p>
 
 <div class="notecard note">
-<p><strong>注意</strong>：你也可以使用 <code>:global(...)</code> 修飾符覆寫此行為並且套用樣式至全域選擇器上（可以至 <a href="https://svelte.dev/docs#style">Svelte <code>&lt;style&gt;</code> 文件</a>閱讀更多資訊）。</p>
+<p><strong>注意</strong>：你也可以使用<code>:global(...)</code>修飾符覆寫此行為並且套用樣式至全域選擇器上（可以至<a href="https://svelte.dev/docs#style">Svelte <code>&lt;style&gt;</code>文件</a>閱讀更多資訊）。</p>
 </div>
 
-<h2 id="Making_a_couple_of_changes">Making a couple of changes</h2>
+<h2 id="Making_a_couple_of_changes">做一些小改變</h2>
 
-<p>Now that we have a general idea of how it all fits together, we can start making a few changes.<br>
- At this point you can try updating your <code>App.svelte</code> component — for example change the <code>&lt;h1&gt;</code> element on line 6 of <code>App.svelte</code> so that it reads like this:</p>
+<p>現在我們大致知道它是如何協同工作之後，接著可以來做一些小改變。<br>
+ 你可以嘗試更新你的<code>App.svelte</code>元件——例如將<code>App.svelte</code>第6行位置的<code>&lt;h1&gt;</code>元素內容變更如下：</p>
 
 <pre class="brush: html">&lt;h1&gt;Hello {name} from MDN!&lt;/h1&gt;</pre>
 
-<p>Just save your changes and the app running at <code>localhost:5000</code> will be automatically updated.</p>
+<p>只要儲存檔案之後，跑在<code>localhost:5000</code>位址的應用程式將會自動地被更新。</p>
 
-<h3 id="A_first_look_at_Svelte_reactivity">A first look at Svelte reactivity</h3>
+<h3 id="A_first_look_at_Svelte_reactivity">初見Svelte反應性</h3>
 
-<p>In the context of a UI framework, reactivity means that the framework can automatically update the DOM when the state of any component is changed.</p>
+<p>在使用者介面框架當中，反應性意謂著當任何元件的狀態被改變時，框架能夠自動地更新DOM。</p>
 
-<p>In Svelte, reactivity is triggered by assigning a new value to any top level variable in a component. For example, we could include a <code>toggleName()</code> function in our <code>App</code> component, and a button to run it.</p>
+<p>在Svelte中，藉由在元件指定新數值給任何頂層變數來觸發反應性。舉個例子，我們可以在<code>App</code>元件中寫一個<code>toggleName()</code>方法並透過一個按鈕來觸發它。</p>
 
-<p>Try updating your <code>&lt;script&gt;</code> and markup sections like so:</p>
+<p>嘗試更新你的<code>&lt;script&gt;</code>和標記區塊如下：</p>
 
 <pre class="brush: html">&lt;script&gt;
   export let name;
@@ -322,15 +322,15 @@ npm run dev</pre>
   &lt;p&gt;Visit the &lt;a href="https://svelte.dev/tutorial"&gt;Svelte tutorial&lt;/a&gt; to learn how to build Svelte apps.&lt;/p&gt;
 &lt;/main&gt;</pre>
 
-<p>Whenever the button is clicked, Svelte executes the <code>toggleName()</code> function, which in turn updates the value of the <code>name</code> variable.</p>
+<p>每當按鈕被點擊，Svelte會執行<code>toggleName()</code>方法並更新<code>name</code>變數數值。</p>
 
-<p>As you can see, the <code>&lt;h1&gt;</code> label is automatically updated. Behind the scenes, Svelte created the JavaScript code to update the DOM whenever the value of the name variable changes, without using any virtual DOM or other complex reconciliation mechanism.</p>
+<p>你可以看到<code>&lt;h1&gt;</code>標籤已經自動地被更新。每當name變數數值改變時，Svelte就會在背後建立一些JavaScript程式碼來更新DOM，而沒有使用到任何virtual DOM或複雜的協調機制。</p>
 
-<p>Note the use of <code>:</code> in <code>on:click</code>. That's Svelte's syntax for listening to DOM events.</p>
+<p>注意在<code>on:click</code>使用的<code>:</code>。這是Svelte用於DOM事件監聽的語法。</p>
 
-<h2 id="Inspecting_main.js_the_entry_point_of_our_app">Inspecting main.js: the entry point of our app</h2>
+<h2 id="Inspecting_main.js_the_entry_point_of_our_app">檢視main.js：我們應用程式的進入點</h2>
 
-<p>Let’s open <code>src/main.js</code>, which is where the <code>App</code> component is being imported and used. This file is the entry point for our app, and it initially looks like this:</p>
+<p>讓我們打開<code>src/main.js</code>，它會告訴你<code>App</code>元件是從哪裡載入並使用。這個檔案是我們應用程式的進入點，一開始會看起來如下內容：</p>
 
 <pre class="brush: js">import App from './App.svelte';
 
@@ -343,11 +343,11 @@ const app = new App({
 
 export default app;</pre>
 
-<p><code>main.js</code> starts by importing the Svelte component that we are going to use. Then in line 3 it instantiates it, passing an option object with the following properties:</p>
+<p><code>main.js</code>一開始就會把我們預計要使用的Svelte元件載入。然後於第3行位置會傳入選項物件並實例化它：</p>
 
 <ul>
- <li><code>target</code>: The DOM element inside which we want the component to be rendered, in this case the <code>&lt;body&gt;</code> element.</li>
- <li><code>props</code>: the values to assign to each prop of the <code>App</code> component.</li>
+ <li><code>target</code>：決定我們想要把元件渲染在哪一個DOM元素上，此例為<code>&lt;body&gt;</code>元素。</li>
+ <li><code>props</code>：指定數值給<code>App</code>元件中的每一個屬性。</li>
 </ul>
 
 <h2 id="A_look_under_the_hood">A look under the hood</h2>