PurpleSchool — курсы программирования онлайн
  • Пути
    • Frontend React разработчик
    • Frontend Vue разработчик
    • Backend разработчик Node.js
    • Fullstack разработчик React / Node.js
    • Mobile разработчик React Native
    • Backend разработчик Golang
    • Devops инженер
    • Backend разработчик Python
  • AI для кодаНовое
  • О нас
    • Отзывы
    • Реферальная программа
    • О компании
    • Контакты
  • Иконка открытия меню
    • Сообщество
    • PurpleПлюс
    • AI Собеседование
    • AI тренажёр
    • Проекты
PurpleSchool — платформа бесплатных roadmap и курсов для разработчиков
ютуб иконка
Telegram иконка
VK иконка
VK иконка
Курсы
ГлавнаяКаталог курсовFrontendBackendFullstack
Практика
КарьераПроектыPurpleПлюс
Материалы
БлогБаза знаний
Документы
Договор офертаПолитика конфиденциальностиПроверка сертификатаМиграция курсовРеферальная программа
Реквизиты
ИП Ларичев Антон АндреевичИНН 773373765379contact@purpleschool.ru

PurpleSchool © 2020 -2026 Все права защищены

  • Курсы
    • FrontendИконка стрелки
    • AI разработкаИконка стрелки
    • BackendИконка стрелки
    • DevOpsИконка стрелки
    • MobileИконка стрелки
    • ТестированиеИконка стрелки
    • Soft-skillsИконка стрелки
    • ДизайнИконка стрелки
    Иконка слояПерейти в каталог курсов
  • Бесплатно
    • Курсы
    • JavaScript Основы разработкиPython Основы PythonCSS CSS FlexboxКарта развитияВопросы для собеседований
    • База знанийИконка стрелки
    • Новостные рассылкиИконка стрелки
  • PurpleSchool — курсы программирования онлайн
    • AI для кодаНовое
    • Сообщество
    • PurpleПлюс
    • AI Собеседование
    • AI тренажёр
    • Проекты
    Главная
    Сообщество
    Svelte 5 за 40 минут! Руны — мастхэв или...?

    Svelte 5 за 40 минут! Руны — мастхэв или...?

    Аватар автора Svelte 5 за 40 минут! Руны — мастхэв или...?

    Антон Ларичев

    Иконка календаря21 ноября 2024
    svelte

    В этом видео за 40 минут рассмотрим ключевые обновления в Svelte 5. Руны, передача и прием данных, вывод списков, библиотека готовых анимаций, if / else и применение классов по условиям. Разберем пример сборки приложения на этом фреймворке.

    🎓 Доступные курсы по разработке от Frontend и Backend до DevOps и Mobile: https://purpleschool.ru/catalog

    💬 Telegram канал с полезными советами: https://t.me/purple_code_channel

    00:00 — Начало

    00:20 — Что изменилось в SVELTE?

    00:40 — Нужен ли SvelteKit?

    01:30 — Создаем проект SVELTE (Typescript)

    02:50 — Структура проекта и первый компонент

    08:15 — Как работают руны и состояния?

    08:33 — Руна «$state»

    11:08 — Руна «$derived»

    14:37 — Руна «$props»

    18:43 — Руна «$effect»

    20:12 — Условия If / else

    22:33 — PurpleSchool — курсы по разработке

    23:16 — Получение данных с сервера

    27:50 — Вывод списков

    29:04 — Transition со встроенной библиотекой анимаций

    30:03 — Bind для получения данных из input

    32:31 — Применение Class по условиям

    34:18 — Короткая запись Class

    35:26 — Сборка приложения

    37:52 — Смотрите новости веб-разработки!

    Иконка глаза1 202

    Комментарии

    0

    Постройте личный план изучения CSS Flexbox - полный курс и практика его использования до уровня Middle — бесплатно!

    CSS Flexbox - полный курс и практика его использования — часть карты развития Frontend

    • step100+ шагов развития
    • lessons30 бесплатных лекций
    • lessons300 бонусных рублей на счет

    Бесплатные лекции

    Лучшие курсы по теме

    изображение курса

    Основы JavaScript

    Антон Ларичев
    AI-тренажерыAI-тренажеры
    Практика в студииПрактика в студии
    Гарантия
    Бонусы
    иконка звёздочки рейтинга4.8
    3 999 ₽ 6 990 ₽
    Подробнее
    изображение курса

    Продвинутый JavaScript

    Антон Ларичев
    AI-тренажерыAI-тренажеры
    Практика в студииПрактика в студии
    Гарантия
    Бонусы
    иконка звёздочки рейтинга4.8
    3 999 ₽ 6 990 ₽
    Подробнее
    изображение курса

    TypeScript с нуля

    Антон Ларичев
    AI-тренажерыAI-тренажеры
    Практика в студииПрактика в студии
    Гарантия
    Бонусы
    иконка звёздочки рейтинга4.8
    3 999 ₽ 6 990 ₽
    Подробнее

    Похожие статьи

    Картинка поста Серверные компоненты Next.js: внутреннее устройство
    Иконка аватараАнтон
    Иконка календаря09 июля 2026
    Next.jsReactServer Components+ 2middleИконка уровня middle

    Серверные компоненты Next.js: внутреннее устройство

    Серверные компоненты Next.js выполняются только на сервере, уменьшают JS-бандл и передают данные через RSC Payload. Разбираем, как это работает изнутри.

    Иконка чипа0
    Иконка глаза39
    Иконка комментариев0
    Картинка поста Тестирование React-компонентов с React Testing Library
    Иконка аватараАнтон
    Иконка календаря07 июля 2026
    reacttestingreact-testing-library+ 2middleИконка уровня middle

    Тестирование React-компонентов с React Testing Library

    React Testing Library — инструмент для тестирования React-компонентов через поведение пользователя, а не детали реализации. Примеры, паттерны, частые ошибки.

    Иконка чипа0
    Иконка глаза117
    Иконка комментариев0
    Картинка поста Микрофронтенды и Module Federation: подходы и реализация
    Иконка аватараАнтон
    Иконка календаря06 июля 2026
    микрофронтендыmodule-federationwebpack+ 2seniorИконка уровня senior

    Микрофронтенды и Module Federation: подходы и реализация

    Микрофронтенды с Module Federation: как разбить монолитный фронтенд на независимые части, которые деплоятся и разрабатываются отдельно.

    Иконка чипа0
    Иконка глаза137
    Иконка комментариев0
    Иконка чипа+2