Что такое Svelte
Svelte — инструмент для создания интерфейсов из компонентов, как React и Vue. Главное отличие: Svelte — компилятор. Он превращает ваши компоненты в обычный JavaScript ещё при сборке проекта, поэтому в браузер не нужно загружать большую библиотеку, которая разбирает компоненты на лету.
Компилятор вместо библиотеки
React и Vue работают в браузере: их код получает описание страницы, сравнивает его с прошлой версией и вносит изменения в DOM. Svelte делает основную работу заранее. Он читает файл компонента и пишет код, который точно знает, какой элемент страницы обновить при изменении конкретной переменной.
| React | Vue | Svelte | |
|---|---|---|---|
| Где работает основная логика | в браузере | в браузере | при сборке |
| Формат компонента | функция с JSX | файл .vue | файл .svelte |
| Изменяемые данные | useState | ref | $state |
Для вас это значит: меньше кода в браузере и меньше служебных конструкций в компонентах.
Как выглядит компонент
Компонент Svelte — файл с расширением .svelte. В нём обычный HTML, блок <script> с логикой и при необходимости блок <style>:
<!-- src/lib/components/Greeting.svelte -->
<script>
let name = 'Анна';
</script>
<h1>Привет, {name}!</h1>На странице появится заголовок «Привет, Анна!». Значение в фигурных скобках подставляется в разметку.
Руны
Руны — специальные слова со знаком $, которые подсказывают компилятору, как обращаться с переменной. Например, $state делает переменную реактивной: при её изменении страница обновляется сама.
<script>
let count = $state(0);
</script>
<button onclick={() => count++}>Нажато: {count}</button>Каждый клик увеличивает число на кнопке. Руны не нужно импортировать — их понимает компилятор.
Версии
Курс написан для Svelte 5 — версии, в которой появились руны. В старых статьях встречается синтаксис Svelte 4 (export let, $:, on:click) — он устарел, не смешивайте его с новым.
Для маршрутов, загрузки данных и серверного кода используется SvelteKit 2 — официальный фреймворк поверх Svelte. Он же создаётся по умолчанию командой npx sv create, так что весь курс пройдёт в одном проекте SvelteKit.
Что будем делать
Сначала — список задач: добавление, отметка о выполнении, фильтры. На нём разберём компоненты и реактивность. Затем — небольшой блог на SvelteKit: список статей, страница статьи, форма добавления и API.
Вы уже знаете JavaScript: модули, функции, массивы, промисы. Здесь мы опираемся на эти знания и не повторяем их.
Частая ошибка
Копировать примеры из материалов для Svelte 4. Если в коде компонента есть export let title или $: total = ..., это старый синтаксис. В Svelte 5 пишут let { title } = $props() и let total = $derived(...).