SvelteKit 3 для новичка: делаем трекер привычек с нуля

SvelteKit 3 можно освоить на одном небольшом проекте, если сразу видеть вход, действие и результат. Трекер привычек показывает базовые части SvelteKit на видимом сценарии: форма создаёт запись, кнопка меняет состояние, а прогресс пересчитывается автоматически. Ниже вы соберёте работающий пример и проверите обычный и граничный сценарии.

В первом фреймворк-проекте легко утонуть в маршрутах и серверных API, не успев понять реактивность компонента. Поэтому отделим настройку, входные данные, основное действие и проверку. В этой статье вы соберёте одностраничный трекер с добавлением привычки, отметкой выполнения и восстановлением данных после перезагрузки. Проверка: новая привычка появляется без перезагрузки, прогресс меняется после клика, а localStorage возвращает список при повторном открытии.

Как устроен учебный проект SvelteKit 3

Страница хранит массив привычек, производное значение считает выполненные элементы, effect синхронизирует данные с localStorage, а шаблон отображает состояние. Держите ввод, логику и отображение раздельно: тогда каждый этап можно проверить отдельно.

Контрольные точки: проект, состояние, производное и хранение. Следующий шаг начинается после совпадения с ожидаемым результатом.

От входных данных до видимого результата. Сначала проверяется вход, затем действие и только потом интерфейс.

Собираем рабочий пример шаг за шагом

Пример сверялся с актуальной документацией официальному релизу SvelteKit 3 на 19 октября 2026 года. Создайте проект командой npx sv create habits, выберите TypeScript и минимальный шаблон, затем выполните npm run dev. Проверьте текущую папку через pwd или Get-Location. Вставьте пример целиком, выполните один раз, затем разбирайте по частям.

<script lang="ts">
  import { browser } from '$app/environment'

  type Habit = { id: number; title: string; done: boolean }
  let title = $state('')
  let habits = $state<Habit[]>(browser ? JSON.parse(localStorage.getItem('habits') ?? '[]') : [])
  let completed = $derived(habits.filter((habit) => habit.done).length)

  $effect(() => {
    if (browser) localStorage.setItem('habits', JSON.stringify(habits))
  })

  function addHabit() {
    const clean = title.trim()
    if (!clean) return
    habits.push({ id: Date.now(), title: clean, done: false })
    title = ''
  }
</script>

<h1>Привычки: {completed}/{habits.length}</h1>
<form onsubmit={(event) => { event.preventDefault(); addHabit() }}>
  <input bind:value={title} placeholder="Например, 20 минут кода" />
  <button>Добавить</button>
</form>
{#each habits as habit (habit.id)}
  <label><input type="checkbox" bind:checked={habit.done} /> {habit.title}</label>
{/each}

$state хранит изменяемые данные, $derived вычисляет значение из них, а $effect выполняет внешнюю синхронизацию. Найдите в примере вход, проверку и место формирования результата.

Что отличает устойчивый проект от случайного запуска. Явные границы делают ошибку локальной и понятной.

Что происходит внутри и почему это работает

Реактивность отслеживает чтение и изменение состояния. Вызов push меняет проксированный массив, поэтому список и производный счётчик обновляются. localStorage доступен только в браузере, что важно для серверного рендеринга SvelteKit. Логику держите отдельно от вывода: функция получает аргумент и возвращает значение, а интерфейс показывает его. Хранение является побочным эффектом, но чтение при инициализации должно учитывать SSR. Проверка browser защищает код от обращения к window на сервере.

Не используйте effect для вычисления completed: это производное значение, ему не нужно отдельное изменяемое состояние. Чем меньше дублирующихся переменных, тем меньше расхождений. Effect оставляйте для синхронизации с внешним миром: storage, сетью или сторонним API. Не прячьте поток в одном обработчике: сохраните вход, проверьте его, вызовите операцию и только затем обновите интерфейс.

Проверяем проект и добавляем свою функцию

Добавьте удаление привычки и кнопку «Сбросить отметки». Оба действия должны автоматически обновлять счётчик и localStorage. До правки запишите ожидаемое поведение одним предложением. После граничного теста повторите обычный сценарий.

Хороший Svelte-компонент хранит минимальное состояние и выводит всё остальное из него. Полезная правка проходит от нового ввода до видимого результата.

Четыре проверки перед следующим шагом. Каждый следующий этап начинается после наблюдаемого результата.

Что запомнить и куда двигаться дальше

Следующий шаг - вынести HabitRow в компонент и добавить серверное хранилище только если данные должны синхронизироваться между устройствами. Для закрепления откройте в проекте React + Vite, в todo list на чистом JavaScript и в офлайн PWA.

Как изучить тему в Кодике

Сначала закрепите события формы, массивы и TypeScript-типы, затем разбирайте runes и SSR. Сначала восстановите главную функцию и проверьте её на трёх значениях.

Удалите localStorage и убедитесь, что основная логика всё ещё работает. Затем верните синхронизацию как отдельный слой. Базовый синтаксис закрепите через курс JavaScript.

Что получится в итоге

Так выглядит законченный учебный проект: есть понятный вход, видимый результат, защита от неверных данных и место для следующего улучшения.