初步翻譯 Getting started with Svelte 開頭及結尾說明 & 將 en-us 位址均導向為 zh-tw

4 files changed, 554 insertions, 0 deletions

diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/01-svelte-starter-app.png b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/01-svelte-starter-app.png
new file mode 100644
index 0000000000..5a62c9589e
--- /dev/null
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/01-svelte-starter-app.png
diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/02-svelte-component-scoped-styles.png b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/02-svelte-component-scoped-styles.png
new file mode 100644
index 0000000000..5b002f996d
--- /dev/null
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/02-svelte-component-scoped-styles.png
diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/03-svelte-repl-in-action.png b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/03-svelte-repl-in-action.png
new file mode 100644
index 0000000000..f1f272a089
--- /dev/null
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/03-svelte-repl-in-action.png
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
new file mode 100644
index 0000000000..86bd9d51d3
--- /dev/null
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html
@@ -0,0 +1,554 @@
+---
+title: Svelte 入門
+slug: >-
+  Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started
+tags:
+  - Beginner
+  - Frameworks
+  - JavaScript
+  - Learn
+  - Svelte
+  - client-side
+  - 初學者
+  - 框架
+  - 學習
+  - 客戶端
+---
+<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>
+
+<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>Svelte 為一個編譯器，從我們的來源去產生出最小且高度優化的 JavaScript 程式碼；你將會需要 node 和 npm 來安裝此編譯器來建置你的應用程式。</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">學習目標:</th>
+   <td>設置 Svelte 本地開發環境，建立初始應用程式，瞭解 Svelte 基本運作方式。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Svelte_A_new_approach_to_building_rich_user_interfaces">Svelte: A new approach to building rich user interfaces</h2>
+
+<p>Svelte provides a different approach to building web apps than some of the other frameworks covered in this module. While frameworks like React and Vue do the bulk of their work in the user's browser while the app is running, Svelte shifts that work into a compile step that happens only when you build your app, producing highly-optimized vanilla JavaScript.</p>
+
+<p>The outcome of this approach is not only smaller application bundles and better performance, but also a developer experience that is more approachable for people that have limited experience of the modern tooling ecosystem.</p>
+
+<p>Svelte sticks closely to the classic web development model of HTML, CSS, and JS, just adding a few extensions to HTML and JavaScript. It arguably has fewer concepts and tools to learn than some of the other framework options.</p>
+
+<p>It's main current disadvantages are that it is a young framework — its ecosystem is therefore more limited in terms of tooling, support, plugins, clear usage patterns, etc. than more mature frameworks, and there are also less job opportunities. But it's advantages should be enough to make you interested to explore it.</p>
+
+<div class="notecard note">
+<p><strong>Note</strong>: recently Svelte has added <a href="https://svelte.dev/blog/svelte-and-typescript">official TypeScript support</a>, one of its most requested features. We'll look at it later on in this tutorial series.</p>
+</div>
+
+<p>We encourage you to go through the <a href="https://svelte.dev/tutorial/basics">Svelte tutorial</a> for a really quick introduction to the basic concepts, before returning to this tutorial series to learn how to build something slightly more in-depth. It should take you about 30 minutes to complete.</p>
+
+<h2 id="Use_cases">Use cases</h2>
+
+<p>Svelte can be used to develop small pieces of an interface or whole applications. You can either start from scratch letting Svelte drive your UI or you can incrementally integrate it into an existing application.</p>
+
+<p>Nevertheless, Svelte is particularly appropriate to tackle the following situations:</p>
+
+<ul>
+ <li>Web applications intended for low power devices: Applications built with Svelte have smaller bundle sizes, which is ideal for devices with slow network connections and limited processing power. Less code means less KB to download, parse, execute, and keep hanging around in memory.</li>
+ <li>Highly interactive pages or complex visualizations: If you are building data-visualizations that need to display a large number of DOM elements, the performance gains that come from a framework with no runtime overhead will ensure that user interactions are snappy and responsive.</li>
+ <li>Onboarding people with basic web development knowledge: Svelte has a shallow learning curve. Web developers with basic HTML, CSS, and JavaScript knowledge can easily grasp Svelte specifics in a short time and start building web applications.</li>
+</ul>
+
+<p>Moreover, with the help of <a href="https://sapper.svelte.dev/">Sapper</a> (a framework based on Svelte), you can also develop applications with advanced features like server-side rendering, code splitting, file-based routing and offline support. And then there's also <a href="https://svelte-native.technology/">Svelte Native</a>, which lets you build native mobile applications.</p>
+
+<h2 id="How_does_Svelte_work">How does Svelte work?</h2>
+
+<p>Being a compiler, Svelte can extend HTML, CSS, and JavaScript, generating optimal JavaScript code without any runtime overhead. To achieve this, Svelte extends vanilla web technologies in the following ways:</p>
+
+<ul>
+ <li>It extends HTML by allowing JavaScript expressions in markup and providing directives to use conditions and loops, in a fashion similar to handlebars.</li>
+ <li>It extends CSS by adding a scoping mechanism, allowing each component to define their own styles without the risk of clashing with other component's styles.</li>
+ <li>It extends JavaScript by reinterpreting specific directives of the language to achieve true reactivity and ease component state management.</li>
+</ul>
+
+<p>The compiler only intervenes in very specific situations and only in the context of Svelte components. Extensions to the JavaScript language are minimal and carefully picked in order to not break JavaScript syntax nor alienate developers. In fact, you will be mostly working with vanilla JavaScript.</p>
+
+<h2 id="First_steps_with_Svelte">First steps with Svelte</h2>
+
+<p>Being a compiler, you can't just add a <code>&lt;script src="svelte.js"&gt;</code> tag to your page and import it into your app. You'll have to set up your development environment in order to let the compiler do its job.</p>
+
+<h3 id="Requirements">Requirements</h3>
+
+<p>In order to work with Svelte you need to have <a href="https://nodejs.org/en/">Node.js</a> installed. It's recommended that you use the long-term support (LTS) version. Node includes npm (the node package manager), and npx (the node package runner). Note that you can also use the Yarn package manager in place of npm, but we'll assume you are using npm in this set of tutorials. See <a href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics</a> for more information on npm and yarn.</p>
+
+<p>If you're using Windows, you will need to install some software to give you parity with Unix/macOS terminal in order to use the terminal commands mentioned in this tutorial. Gitbash (which comes as part of the <a href="https://gitforwindows.org/">git for Windows toolset</a>) or <a href="https://docs.microsoft.com/zh-TW/windows/wsl/about">Windows Subsystem for Linux (WSL)</a> are both suitable. <a href="https://cmder.net/">Cmder</a> is another very good and complete alternative. See <a href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">Command line crash course</a> for more information on these, and on terminal commands in general.</p>
+
+<p>Also see the following for more information:</p>
+
+<ul>
+ <li><a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/">"What is npm"</a> on nodejs.org</li>
+ <li><a href="https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner">"Introducing npx"</a> on the npm blog</li>
+ <li><a href="https://svelte.dev/blog/the-easiest-way-to-get-started">"The easiest way to get started with Svelte"</a> on the svelte blog</li>
+</ul>
+
+<h3 id="Creating_your_first_Svelte_app">Creating your first Svelte app</h3>
+
+<p>The easiest way to create a starter app template is to just download the starter template application. You can do that by visiting <a href="https://github.com/sveltejs/template">sveltejs/template</a> on GitHub or you can avoid having to download and unzip it and just use <a href="https://github.com/Rich-Harris/degit">degit</a>.</p>
+
+<p>To create your starter app template, run the following terminal commands:</p>
+
+<pre class="brush: bash">npx degit sveltejs/template moz-todo-svelte
+cd moz-todo-svelte
+npm install
+npm run dev</pre>
+
+<div class="notecard note">
+<p><strong>Note</strong>: degit doesn't do any kind of magic — it just lets you download and unzip the latest version of a git repo's contents. This is much quicker than using <code>git clone</code> because it will not download all the history of the repo, or create a complete local clone.</p>
+</div>
+
+<p>After running <code>npm run dev</code>, Svelte will compile and build your application. It will start a local server at <code>localhost:5000</code>. Svelte will watch for file updates, and automatically recompile and refresh the app for you when changes are made to the source files. Your browser will display something like this:</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>
+
+<h3 id="Application_structure">Application structure</h3>
+
+<p>The starter template comes with the following structure:</p>
+
+<pre>moz-todo-svelte
+├── readme.md
+├── package.json
+├── package-lock.json
+├── rollup.config.js
+├── .gitignore
+├── node_modules
+├── public
+│   ├── favicon.ico
+│   ├── index.html
+│   ├── global.css
+│   └── build
+│       ├── bundle.css
+│       ├── bundle.css.map
+│       ├── bundle.js
+│       └── bundle.js.map
+└── src
+    ├── App.svelte
+    └── main.js</pre>
+
+<p>The contents are as follows:</p>
+
+<ul>
+ <li><code>package.json</code> and <code>package-lock.json</code>: Contains information about the project that Node.js/npm uses to keep it organized. You don't need to understand this file at all to complete this tutorial, however, if you'd like to learn more about it, you can read <a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/">What is the file <code>package.json</code></a>? on NodeJS.org; we also talk about it in our <a href="/zh-TW/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics tutorial</a>.</li>
+ <li><code>node_modules</code>: This is where node saves the project dependencies. These dependencies won't be sent to production, they are just used for development purposes.</li>
+ <li><code>.gitignore</code>: Tells git which files or folder to ignore from the project — useful if you decide to include your app in a git repo.</li>
+ <li><code>rollup.config.js</code>: Svelte uses <a href="https://rollupjs.org/">rollup.js</a> as a module bundler. This configuration file tells rollup how to compile and build your app. If you prefer <a href="https://webpack.js.org/">webpack</a> you can create your starter project with <code>npx degit sveltejs/template-webpack svelte-app</code> instead.</li>
+ <li>scripts: Contains setup scripts as required. Currently should only contain <code>setupTypeScript.js</code>, a script that sets up TypeScript support in Svelte. We'll talk about this more in the last article.</li>
+ <li><code>src</code>: This directory is where the source code for your application lives — where you'll be creating the code for your app.
+  <ul>
+   <li><code>App.svelte</code>: This is the top-level component of your app. So far it just renders the 'Hello World!' message.</li>
+   <li><code>main.js</code>: The entry point to our application. It just instantiates the <code>App</code> component and binds it to the body of our html page.</li>
+  </ul>
+ </li>
+ <li><code>public</code>: This directory contains all the files that will be published in production.
+  <ul>
+   <li><code>favicon.png</code>: This is the favicon for your app. Currently, it's the Svelte logo.</li>
+   <li><code>index.html</code>: This is the main page of your app. Initially it's just an empty HTML5 page that loads the css files and js bundles generated by Svelte.</li>
+   <li><code>global.css</code>: This file contains unscoped styles. It's a regular css file that will be applied to the whole application.</li>
+   <li><code>build</code>: This folder contains the generated CSS and JavaScript source code.
+    <ul>
+     <li><code>bundle.css</code>: The CSS file that Svelte generated from the styles defined for each component.</li>
+     <li><code>bundle.js</code>: The JavaScript file compiled from all your JavaScript source code.</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Having_a_look_at_our_first_Svelte_component">Having a look at our first Svelte component</h2>
+
+<p>Components are the building blocks of Svelte applications. They are written into <code>.svelte</code> files using a superset of HTML.</p>
+
+<p>All three sections — <code>&lt;script&gt;</code>, <code>&lt;styles&gt;</code>, and markup — are optional, and can appear in any order you like.</p>
+
+<pre class="brush: html">&lt;script&gt;
+  // logic goes here
+&lt;/script&gt;
+
+&lt;style&gt;
+  /* styles go here */
+&lt;/style&gt;
+
+&lt;!-- markup (zero or more HTML elements) goes here --&gt;</pre>
+
+<div class="notecard note">
+<p><strong>Note</strong>: For more information on the component format, have a look at the <a href="https://svelte.dev/docs#Component_format">svelte documentation</a>.</p>
+</div>
+
+<p>With this in mind, let's have a look at the <code>src/App.svelte</code> file that came with the starter template. You should see something like the following:</p>
+
+<pre class="brush: html">&lt;script&gt;
+  export let name;
+&lt;/script&gt;
+
+&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;
+
+&lt;style&gt;
+  main {
+    text-align: center;
+    padding: 1em;
+    max-width: 240px;
+    margin: 0 auto;
+  }
+
+  h1 {
+    color: #ff3e00;
+    text-transform: uppercase;
+    font-size: 4em;
+    font-weight: 100;
+  }
+
+  @media (min-width: 640px) {
+    main {
+      max-width: none;
+    }
+  }
+&lt;/style&gt;</pre>
+
+<h3 id="The_&lt;script&gt;_section">The <code>&lt;script&gt;</code> section</h3>
+
+<p>The <code>&lt;script&gt;</code> block contains JavaScript that runs when a component instance is created. Variables declared (or imported) at the top level are 'visible' from the component's markup. Top-level variables is the way Svelte handles the component state, and they are reactive by default. We will explain in detail what this means later on.</p>
+
+<pre class="brush: html">&lt;script&gt;
+  export let name;
+&lt;/script&gt;</pre>
+
+<p>Svelte uses the <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/export">export</a></code> keyword to mark a variable declaration as a property (or prop), which means it becomes accessible to consumers of the component (e.g. other components). This is one example of Svelte extending JavaScript syntax to make it more useful, while keeping it familiar.</p>
+
+<h3 id="The_markup_section">The markup section</h3>
+
+<p>In the markup section you can insert any HTML you like, and in addition you can insert valid JavaScript expression inside single curly brackets (<code>{}</code>). In this case we are embedding the value of the <code>name</code> prop right after the <code>Hello</code> text.</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 also supports tags like <code>{#if...}</code>, <code>{#each...}</code>, and <code>{#await...}</code> — these examples allow you to conditionally render a portion of the markup, iterate through a list of elements, and work with async values, respectively.</p>
+
+<h3 id="The_&lt;style&gt;_section">The <code>&lt;style&gt;</code> section</h3>
+
+<p>If you have experience working with CSS, the following snippet should make sense:</p>
+
+<pre class="brush: html">&lt;style&gt;
+  main {
+    text-align: center;
+    padding: 1em;
+    max-width: 240px;
+    margin: 0 auto;
+  }
+
+  h1 {
+    color: #ff3e00;
+    text-transform: uppercase;
+    font-size: 4em;
+    font-weight: 100;
+  }
+
+  @media (min-width: 640px) {
+    main {
+      max-width: none;
+    }
+  }
+&lt;/style&gt;</pre>
+
+<p>We are applying a style to our <code><a href="/zh-TW/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;</a></code> element. What will happen to other components with <code>&lt;h1&gt;</code> elements in them?</p>
+
+<p>In Svelte, CSS inside a component's <code>&lt;style&gt;</code> block will be scoped only to that component. This works by adding a class to selected elements, which is based on a hash of the component styles.</p>
+
+<p>You can see this in action by opening <code>localhost:5000</code> in a new browser tab, right/<kbd>Ctrl</kbd>-clicking on the <em>HELLO WORLD!</em> label, and choosing <em>Inspect</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>When compiling the app, Svelte changes our <code>h1</code> styles definition to <code>h1.svelte-1tky8bj</code>, and then modifies every <code>&lt;h1&gt;</code> element in our component to <code>&lt;h1 class="svelte-1tky8bj"&gt;</code>, so that it picks up the styles as required.</p>
+
+<div class="notecard note">
+<p><strong>Note</strong>: You can override this behavior and apply styles to a selector globally using the <code>:global(...)</code> modifier (see the <a href="https://svelte.dev/docs#style">Svelte <code>&lt;style&gt;</code> docs</a> for more information).</p>
+</div>
+
+<h2 id="Making_a_couple_of_changes">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>
+
+<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>
+
+<h3 id="A_first_look_at_Svelte_reactivity">A first look at Svelte reactivity</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>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>Try updating your <code>&lt;script&gt;</code> and markup sections like so:</p>
+
+<pre class="brush: html">&lt;script&gt;
+  export let name;
+
+  function toggleName() {
+    if (name === 'world') {
+      name = 'svelte'
+    } else {
+      name = 'world'
+    }
+  }
+&lt;/script&gt;
+
+&lt;main&gt;
+  &lt;h1&gt;Hello {name}!&lt;/h1&gt;
+  &lt;button on:click={toggleName}&gt;Toggle name&lt;/button&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>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>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>Note the use of <code>:</code> in <code>on:click</code>. That's Svelte's syntax for listening to DOM events.</p>
+
+<h2 id="Inspecting_main.js_the_entry_point_of_our_app">Inspecting main.js: the entry point of our app</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>
+
+<pre class="brush: js">import App from './App.svelte';
+
+const app = new App({
+  target: document.body,
+  props: {
+    name: 'world'
+  }
+});
+
+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>
+
+<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>
+</ul>
+
+<h2 id="A_look_under_the_hood">A look under the hood</h2>
+
+<p>How does Svelte manage to make all these files work together nicely?</p>
+
+<p>The Svelte compiler processes the <code>&lt;style&gt;</code> section of every component and compiles them into the <code>public/build/bundle.css</code> file.</p>
+
+<p>It also compiles the markup and <code>&lt;script&gt;</code> section of every component and stores the result in <code>public/build/bundle.js</code>. It also adds the code in <code>src/main.js</code> to reference the features of each component.</p>
+
+<p>Finally the file <code>public/index.html</code> includes the generated <code>bundle.css</code> and <code>bundle.js</code> files:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;meta charset='utf-8'&gt;
+  &lt;meta name='viewport' content='width=device-width,initial-scale=1'&gt;
+
+  &lt;title&gt;Svelte app&lt;/title&gt;
+
+  &lt;link rel='icon' type='image/png' href='/favicon.png'&gt;
+  &lt;link rel='stylesheet' href='/global.css'&gt;
+  &lt;link rel='stylesheet' href='/build/bundle.css'&gt;
+
+  &lt;script defer src='/build/bundle.js'&gt;&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>The minified version of <code>bundle.js</code> weighs a little more than 3KB, which includes the "Svelte runtime" (just 300 lines of JavaScript code) and the <code>App.svelte</code> compiled component. As you can see, <code>bundle.js</code> is the only JavaScript file referenced by <code>index.html</code>. There are no other libraries loaded into the web page.</p>
+
+<p>This is a much smaller footprint than compiled bundles from other frameworks. Take into account that, in the case of code bundles, it's not just the size of the files you have to download that matter. This is executable code that needs to be parsed, executed, and kept in memory. So this really makes a difference, especially in low-powered devices or CPU-intensive applications.</p>
+
+<h2 id="Following_this_tutorial">Following this tutorial</h2>
+
+<p>In this tutorial series you will be building a complete web application. We'll learn all the basics about Svelte and also quite a few advanced topics.</p>
+
+<p>You can just read the content to get a good understanding of Svelte features, but you'll get the most out of this tutorial if you follow along coding the app with us as you go. To make it easier for you to follow each article, we provide a GitHub repository with a folder containing the source for the app as it is at the start of each tutorial.</p>
+
+<p>Svelte also provides an online repl, which is a playground for live-coding Svelte apps on the web without having to install anything on your machine. We provide a repl for each article so you can start coding along right away. Let's talk a bit more about how to use these tools.</p>
+
+<h3 id="Using_Git">Using Git</h3>
+
+<p>The most popular version control system is Git, along with GitHub, a site that provides hosting for your repositories and several tools for working with them.</p>
+
+<p>We'll be using GitHub so that you can easily download the source code for each article. You will also be able to get the code as it should be after completing the article, just in case you get lost.</p>
+
+<p>After <a href="https://git-scm.com/downloads">installing git</a>, to clone the repository you should execute:</p>
+
+<pre class="brush: bash">git clone https://github.com/opensas/mdn-svelte-tutorial.git</pre>
+
+<p>Then at the beginning of each article, you can just <code>cd</code> into the corresponding folder and start the app in dev mode to see what its current state should be, like this:</p>
+
+<pre class="brush: bash">cd 02-starting-our-todo-app
+npm install
+npm run dev</pre>
+
+<p>If you want lo learn more about git and GitHub, we've compiled a list of links to useful guides — see <a href="/zh-TW/docs/Learn/Tools_and_testing/GitHub">Git and GitHub</a>.</p>
+
+<div class="notecard note">
+<p><strong>Note</strong>: If you just want to download the files without cloning the git repo, you can use the degit tool like this — <code>npx degit opensas/mdn-svelte-tutorial</code>. You can also download a specific folder with <code>npx degit opensas/mdn-svelte-tutorial/01-getting-started</code>. Degit won't create a local git repo, it will just download the files of the specified folder.</p>
+</div>
+
+<h3 id="Using_the_Svelte_REPL">Using the Svelte REPL</h3>
+
+<p>A REPL (<a href="https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop">read–eval–print loop</a>) is an interactive environment that allows you to enter commands and immediately see the results — many programming languages provide a REPL.</p>
+
+<p>Svelte's REPL is much more than that. It's an online tool that allows you to create complete apps, save them online, and share with others.</p>
+
+<p>It's the easiest way to start playing with Svelte from any machine, without having to install anything. It is also widely used by Svelte community. If you want to share an idea, ask for help, or report an issue, it's always extremely useful to create a REPL instance demomstrating the issue.</p>
+
+<p>Let's have a quick look at the Svelte REPL and how you'd use it. It looks like so:</p>
+
+<p><img alt="the svelte repl in action, showing component code on the left, and output on the right" src="03-svelte-repl-in-action.png"></p>
+
+<p>To start a REPL, open your browser and navigate to <a href="https://svelte.dev/repl">https://svelte.dev/repl</a>.</p>
+
+<ul>
+ <li>On the left side of the screen you'll see the code of your components, and on the right you'll see the running output of your app.</li>
+ <li>The bar above the code lets you create <code>.svelte</code> and <code>.js</code> files and rearrange them. To create a file inside a folder just specify the complete pathname, like this — <code>components/MyComponent.svelte</code>. The folder will be automatically created.</li>
+ <li>Above that bar you have the title of the REPL. Click on it to edit it.</li>
+ <li>On the right side you have three tabs:
+  <ul>
+   <li>The <em>Result</em> tab shows your app output, and provides a console at the bottom.</li>
+   <li>The <em>JS output</em> tab lets you inspect the JavaScript code generated by Svelte, and set compiler options.</li>
+   <li>The <em>CSS output</em> tab shows the CSS generated by Svelte.</li>
+  </ul>
+ </li>
+ <li>Above the tabs, you'll find a toolbar that lets you enter full-screen mode, and download your app. If you login with a GitHub account, you'll also be able to fork and save the app. You'll also be able to see all your saved REPLs by clicking on your GitHub username profile and selecting Your saved apps.</li>
+</ul>
+
+<p>Whenever you change any file on the REPL, Svelte will recompile the app and update the Result tab. To share your app share the url. For example, here's the link for a REPL running our complete app: <a href="https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2">https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2</a>.</p>
+
+<div class="notecard note">
+<p><strong>Note</strong>: Notice how you can specify Svelte's version in the URL. This is useful when reporting issues related to a specific version of Svelte.</p>
+</div>
+
+<p>We will provide a REPL at the beginning and end of each article so that you can start coding with us right away.</p>
+
+<div class="notecard note">
+<p><strong>Note</strong>: at the moment the REPL can't handle folder names properly. If you are following the tutorial on the REPL, just create all your components inside the root folder. Then when you see a path in the code, for example <code>import Todos from './components/Todos.svelte'</code>, just replace it with a flat URL, e.g. <code>import Todos from './Todos.svelte'</code>.</p>
+</div>
+
+<h2 id="The_code_so_far">The code so far</h2>
+
+<h3 id="Git">Git</h3>
+
+<p>Clone the github repo (if you haven't already done it) with:</p>
+
+<pre class="brush: bash">git clone https://github.com/opensas/mdn-svelte-tutorial.git</pre>
+
+<p>Then to get to the current app state, run</p>
+
+<pre class="brush: bash">cd mdn-svelte-tutorial/01-getting-started</pre>
+
+<p>Or directly download the folder's content:</p>
+
+<pre class="brush: bash">npx degit opensas/mdn-svelte-tutorial/01-getting-started</pre>
+
+<p>Remember to run <code>npm install &amp;&amp; npm run dev</code> to start your app in development mode.</p>
+
+<h3 id="REPL">REPL</h3>
+
+<p>To code along with us using the REPL, start at</p>
+
+<p><a href="https://svelte.dev/repl/fc68b4f059d34b9c84fa042d1cce586c?version=3.23.2">https://svelte.dev/repl/fc68b4f059d34b9c84fa042d1cce586c?version=3.23.2</a></p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This brings us to the end of our initial look at Svelte, including how to install it locally, create a starter app, and how the basics work. In the next article we'll start building our first proper application — a todo list. Before we do that, however, let's recap some of the things we’ve learned.</p>
+
+<p>In Svelte:</p>
+
+<ul>
+ <li>We define the script, style and markup of each component in a single <code>.svelte</code> file.</li>
+ <li>Component props are declared with the <code>export</code> keyword.</li>
+ <li>Svelte components can be used just by importing the corresponding <code>.svelte</code> file.</li>
+ <li>Components styles are scoped, keeping them from clashing with each other.</li>
+ <li>In the markup section you can include any JavaScript expression by putting it between curly braces.</li>
+ <li>The top-level variables of a component constitute its state.</li>
+ <li>Reactivity is fired just by assigning a new value to a top level variable.</li>
+</ul>
+
+<p>{{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")}}</p>
+
+<h2 id="In_this_module">於此模組中</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">前端框架介紹</a></li>
+ <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">框架主要功能</a></li>
+ <li>React
+  <ul>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">React 入門</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">建立我們的 React 待辦清單</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">組件化我們的 React 應用程式</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React 互動性：事件與狀態</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React 互動性：編輯、過濾、條件式渲染</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">React 無障礙</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React 資源</a></li>
+  </ul>
+ </li>
+ <li>Ember
+  <ul>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Ember 入門</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember 應用程式結構及組件化</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember 互動性：事件、類別、狀態</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember 互動性：Footer 功能、條件式渲染</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Ember 路由</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember 資源及偵錯</a></li>
+  </ul>
+ </li>
+ <li>Vue
+  <ul>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Vue 入門</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">建立第一個 Vue 組件</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">渲染 Vue 清單</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">新增待辦表單：Vue 事件、方法、模型</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">透過 CSS 樣式化 Vue 組件</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">使用 Vue 計算屬性</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue 條件式渲染：編輯已存在的待辦表單</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">聚焦 Vue refs</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue 資源</a></li>
+  </ul>
+ </li>
+ <li>Svelte
+  <ul>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Svelte 入門</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">開始寫我們的 Svelte 待辦清單應用程式</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Svelte 中的動態行為：變數及屬性</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">組件化我們的 Svelte 應用程式</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">進階 Svelte：反應性、生命週期、可存取性</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">和 Svelte stores 共舞</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">Svelte 中的 TypeScript</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">部署和下一步</a></li>
+  </ul>
+ </li>
+ <li>Angular
+   <ul>
+    <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started">Angular 入門</a></li>
+    <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">開始我們的 Angular 待辦清單應用程式</a></li>
+    <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">樣式化我們的 Angular 應用程式</a></li>
+    <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">Creating an item component 建立(待辦清單)項目組件</a></li>
+    <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">過濾我們的待辦項目</a></li>
+    <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building">建置 Angular 應用程式及更多資源</a></li>
+   </ul>
+ </li>
+</ul>