It's a JavaScript tool for building UI components, just like React, Angular, or Vue.

它是一種用於構建用戶界面組件的 JavaScript 工具，就像 React、Angular 或 Vue 一樣。

But unlike its peers, which ship a JavaScript runtime to the browser to make your code work, Svelte is a compiler.

但是，Svelte 與其他同類產品不同，後者是通過向瀏覽器發送 JavaScript 運行時來實現代碼運行的，而 Svelte 則是一個編譯器。

It converts the declarative code that you love to write as a developer into imperative code that works with native browser APIs.

它可將開發人員喜歡編寫的聲明式代碼轉換為可與在地瀏覽器 API 配合使用的命令式代碼。

As a result, you get highly performant code in a very small package.

是以，你可以在一個非常小的套裝軟體中獲得高性能的代碼。

But most importantly, it's the only JavaScript framework that's actually enjoyable to use.

但最重要的是，它是唯一一個使用起來真正令人愉快的 JavaScript 框架。

We create components in .svelte files.

我們在 .svelte 文件中創建組件。

Which contain three main parts.

其中包括三個主要部分。

A script for your JavaScript code, which can also be TypeScript.

用於 JavaScript 代碼的腳本，也可以是 TypeScript。

A style tag for your CSS, which can also use a preprocessor like Sass.

CSS 的樣式標籤，也可以使用 Sass 等預處理器。

And the main template represented as regular HTML.

而主模板則以普通 HTML 表示。

But it's no ordinary HTML.

但它不是普通的 HTML。

It's been empowered with all kinds of extra syntax for writing declarative code.

它被賦予了各種額外的文法，用於編寫聲明式代碼。

Need reactive state?

需要被動狀態？

Simply define a variable with the let keyword.

只需使用 let 關鍵字定義一個變量即可。

Then reference it dynamically in the HTML using braces.

然後使用大括號在 HTML 中動態引用。

If we want to change the state, we can do that by defining a function, then listen to an event in the DOM with on, and bind the function to it as the handler.

如果我們想改變狀態，可以通過定義一個函數來實現，然後用 on 監聽 DOM 中的事件，並將函數綁定為處理程序。

Now when the value of that variable changes, the component will automatically re-render to show the updated state.

現在，當該變量的值發生變化時，組件將自動重新渲染，以顯示更新後的狀態。

In many cases, you'll need to run conditional logic or loops in your template.

在很多情況下，您需要在模板中運行條件邏輯或循環。

Instead of fighting against JavaScript functions, it empowers you with a syntax where you can clearly create an if-else statement or a for-each loop when working with a list.

在處理列表時，它不再與 JavaScript 函數對抗，而是賦予你一種文法，讓你可以清晰地創建 if-else 語句或 for-each 循環。

Now when it comes to cross-component communication, Svelte provides multiple different strategies for sharing data between components.

在跨組件通信方面，Svelte 提供了多種不同的組件間數據共享策略。

To pass data from a parent to child, you can use props by adding the export keyword to a variable.

要從父代向子代傳遞數據，可以通過在變量中添加導出關鍵字來使用道具。

And now you can pass data into this component.

現在你可以向這個組件傳遞數據了。

And if you have a ton of props, you can use the spread syntax to keep your code looking fit and healthy.

如果你有大量的道具，你可以使用擴展文法，讓你的代碼看起來更健康。

Now for more complex component trees, you have a context API just like React.

現在，對於更復雜的組件樹，你可以像 React 一樣使用上下文 API。

And if that wasn't enough, Svelte also has a really nice mechanism called stores, which are like observables that can be shared anywhere in the a dollar sign in front of them.

如果這還不夠，Svelte 還有一個非常不錯的機制，叫做商店，它就像一個可觀察的對象，可以在任何地方共享。

After you've built an awesome UI, you can then use the compiler to convert it to vanilla JavaScript.

在創建了出色的用戶界面後，您可以使用編譯器將其轉換為普通 JavaScript。

And if you're building a full-blown web application, you can use SvelteKit to quickly implement server-side rendering, routing, and code splitting.

如果你正在構建一個完整的網絡應用程序，你可以使用 SvelteKit 快速實現服務器端渲染、路由和代碼分割。

This has been Svelte in 100 seconds.

這已經是 100 秒內的 Svelte 了。

Hit the like button if you want to see more.

如果想看更多，請點擊 "喜歡 "按鈕。

Thanks for watching, and I will see you in the next one.

感謝您的收看，我們下期再見。