Ucz się Svelte: koduj
Ucz się Svelte: koduj — Nauka Svelte i SvelteKit z edytorem działającym na żywo i skompilowanym kodem obok
Ucz się Svelte: koduj to bezpłatna aplikacja na iOS i Android do nauki Svelte i SvelteKit na telefonie. Pisz komponenty w edytorze działającym na żywo z podglądem, sprawdzaj kod JavaScript, na który zamienia je kompilator, i przejdź przez 41 kursów — od pierwszej reaktywnej wartości po wdrożoną aplikację full-stack — z AI Mentorem u boku.
- Cena
- Bezpłatna, uaktualnienie do Pro
- Platformy
- iOS i Android
- Języki
- 22
- Klasyfikacja wiekowa
- 4+
- Wymaga
- iOS 15.1 lub nowszy
Nic na tym ekranie nie uruchamia Svelte. Uruchamia to, co wygenerował Svelte.
Pierwsza lekcja w aplikacji pokazuje dziewięcioliniowy komponent obok wygenerowanego przez kompilator kodu JavaScript. Stuknij +1, a wykonywane linie się podświetlą: jedna invalidacja, jedna przeliczona wartość, dwa zmienione węzły tekstowe — nic więcej nie zostało dotknięte. To właśnie idea stojąca za frameworkiem, pokazana jeszcze przed jej wyjaśnieniem.
Co to jest
Ucz się Svelte: koduj to bezpłatna aplikacja na iOS i Android, która uczy Svelte i SvelteKit w ramach 41 kursów i 163 lekcji, uporządkowanych od poziomu początkującego do zaawansowanego. Zaczyna się od demonstracji pokazującej komponent obok skompilowanego kodu JavaScript, a następnie obejmuje reaktywność, props, stores, transitions, runes w Svelte 5 oraz routing SvelteKit, ładowanie danych, actions formularzy i wdrażanie. Wbudowano w nią edytor działający na żywo z podglądem oraz AI Mentora.
W aplikacji
Jak to wygląda
Kurs
Zakres kursu Svelte
41 kursów i 163 lekcje z własnej listy kursów aplikacji, sklasyfikowane na poziomach od A1 do C1 i zakończone pełnym projektem SvelteKit.
First Components
Czym jest Svelte i dlaczego stosuje inne podejście, konfigurowanie projektu oraz pisanie pierwszego komponentu ze zmiennymi reaktywnymi.
Props, szablony, zdarzenia i wiązanie
Przekazywanie props, instrukcje warunkowe i pętle each w znacznikach, zdarzenia DOM i zdarzenia niestandardowe oraz dwukierunkowe wiązanie za pomocą dyrektyw bind:.
Cykl życia, stores i kontekst
onMount i onDestroy, writable, readable, derived i własne stores, sloty i kompozycja oraz Context API.
Przejścia, animacje i akcje
Dyrektywy transition, dyrektywa animate, actions do wielokrotnego użytku z zachowaniem DOM, niestandardowe przejścia oraz stores ruchu spring i tweened.
SvelteKit Foundations
Routing oparty na plikach i strony, funkcje load, zaawansowane layouts, form actions, API routes, server hooks i strony błędów.
Svelte 5 Runes
Wprowadzenie do runes, props i snippets, zaawansowane runes oraz dokładniejsze omówienie działania reaktywności Svelte.
SvelteKit in Production
SSR i prerendering, streaming, wydajność, SEO i meta tags, bezpieczeństwo, wzorce auth, adapters i wdrażanie.
Testowanie i Full-Stack
Testy jednostkowe z Vitest, testy end-to-end z Playwright, biblioteki innych firm, zarządzanie stanem na dużą skalę oraz pełna aplikacja SvelteKit full-stack.
Jak to działa
Jak wygląda sesja
Aplikacja jest zorganizowana wokół ścieżki prowadzącej od jednej reaktywnej wartości do aplikacji gotowej do wdrożenia, a każdy etap łączy czytanie z czymś, co można uruchomić.
Najpierw zobacz wynik kompilatora
Początkowa demonstracja umieszcza mały komponent obok kodu JavaScript, do którego jest kompilowany. Skompilowana część została wygenerowana zawczasu i znajduje się w aplikacji, więc demonstracja działa bez połączenia.
Edytuj komponent i zobacz podgląd
Lekcje otwierają edytor z kartami HTML, CSS i JavaScript oraz przyciskiem uruchamiania, który renderuje komponent w podglądzie. Podgląd ładuje kompilator Svelte przez sieć, więc wymaga połączenia.
Utrwal wiedzę
Po każdym temacie pojawiają się quiz i wyzwania z kodowania, a AI Mentor może wyjaśnić zagadnienie, zaproponować plan nauki lub przepytać Cię z kursu. Weekly Code Challenge dodaje rywalizacyjną rundę.
Co zawiera
Co zawiera aplikacja
41
Kursów, od A1 do C1
163 lekcje w 41 kursach — od konfiguracji Svelte i pierwszego komponentu, przez stores, transitions, routing i hooks SvelteKit, runes Svelte 5 oraz testowanie, aż po projekt końcowy full-stack.
Skompilowany
Komponent obok skompilowanego kodu
Demonstracja przy pierwszym uruchomieniu pokazuje jednocześnie kod źródłowy i wygenerowany kod JavaScript oraz zlicza zaktualizowane węzły tekstowe i odtworzone elementy, dzięki czemu koszt aktualizacji można odczytać bezpośrednio z ekranu.
Podgląd
Edytor działający na żywo z podglądem
Pisz znaczniki, style i skrypt w osobnych kartach, a następnie renderuj komponent na telefonie. Podgląd korzysta z kompilatora Svelte 4.2.19, więc kod napisany z użyciem runes Svelte 5 może nie wyświetlić się w podglądzie — lepiej go czytać i śledzić jego działanie.
AI
AI Mentor
Na karcie czatu poproś o kluczowe pojęcia z kursu, wskazówki, jak uczyć się szybciej, quiz lub osobisty plan nauki, albo zapytaj o błąd, którego nie potrafisz odczytać.
Tygodniowe
Weekly Code Challenge
Regularna runda wyzwań, w której możesz rywalizować równolegle z nauką, z seriami, śledzeniem postępów i przypomnieniami pomagającymi utrzymać rutynę.
Egzamin
Certyfikat ukończenia
Zdaj egzamin końcowy, a certyfikat będzie zawierać Twoje imię i nazwisko — stanowi dowód wykonanej pracy, a nie akredytowane kwalifikacje.
Informacje
Czym jest Svelte i czym różni się od innych sposobów tworzenia interfejsu webowego?
Svelte to framework do tworzenia interfejsów użytkownika, w którym komponenty są zawczasu kompilowane do zwykłego kodu JavaScript bezpośrednio aktualizującego stronę, zamiast dostarczania dużego runtime’u, który ustala zmiany w przeglądarce. Komponent to pojedynczy plik zawierający znaczniki, style i skrypt, a przypisanie takie jak count += 1 wystarcza do zaktualizowania ekranu. SvelteKit to framework aplikacyjny zbudowany na jego bazie, który dodaje routing oparty na plikach, ładowanie danych po stronie serwera, obsługę formularzy i adaptery do wdrażania. W praktyce dla osoby uczącej się oznacza to mniej kodu pomocniczego i mniejszy dystans między kodem a tym, co pojawia się na stronie.
Reaktywność na etapie kompilacjiprzypisanie jest stanem
W Svelte kompilator przepisuje zwykłe przypisanie na kod, który aktualizuje zmienione fragmenty strony. Instrukcja etykietowana zaczynająca się od $: przelicza wartość za każdym razem, gdy zmienią się odczytywane przez nią wartości, dzięki czemu dane pochodne nie wymagają funkcji pomocniczych.
Storeswspółdzielony stan między komponentami
Writable store przechowuje wartość, którą może subskrybować wiele komponentów, a dodanie prefiksu $ do jego nazwy zapewnia automatyczną subskrypcję. Derived i custom stores rozwijają ten mechanizm, gdy stan trzeba obliczyć lub opakować.
Runesskładnia Svelte 5
Svelte 5 zastępuje znaczną część wcześniejszej magii kompilatora jawnymi funkcjami, takimi jak $state, $derived i $props, a także snippetami do wielokrotnego użycia znaczników. Oba style są używane w rzeczywistych projektach, dlatego aplikacja uczy oryginalnego modelu i modelu runes w osobnych kursach.
SvelteKitrouting, dane i wdrażanie
Plik taki jak +page.svelte staje się trasą, funkcja load pobiera dane przed wyrenderowaniem strony, actions formularzy obsługują przesyłanie danych na serwerze, a adapter pakuje wynik na potrzeby hostingu statycznego, serwera Node lub platformy serverless.
Dopasowanie
Dla kogo jest — i dla kogo nie jest
To dobry wybór, jeśli
- Chcesz uczyć się Svelte lub SvelteKit w krótkich sesjach zamiast oglądać długie kursy wideo
- Znasz trochę HTML i JavaScript i chcesz zobaczyć, co zmienia framework oparty przede wszystkim na kompilacji
- Ciekawi Cię, jak działają reaktywne aktualizacje, i wolisz czytać wygenerowany kod, niż przyjmować jego działanie na wiarę
- Chcesz podążać ścieżką obejmującą routing, ładowanie danych, auth i wdrażanie, a nie tylko komponenty
- Lubisz pytać AI Mentor, dlaczego fragment kodu zachowuje się w określony sposób
To nie jest odpowiednie narzędzie, jeśli
- Chcesz uruchamiać kod Svelte 5 runes w podglądzie, który korzysta z kompilatora Svelte 4.2.19
- Musisz zbudować i wdrożyć cały projekt SvelteKit na telefonie, choć nadal wymaga to laptopa
- Oczekujesz, że wszystko będzie bezpłatne: pierwszy kurs jest bezpłatny, a Pro odblokowuje resztę
- Nigdy nie widziałeś HTML ani JavaScript i chcesz najpierw przejść ogólny kurs programowania, zanim poznasz framework
Pytania
Najczęściej zadawane pytania
Jak mogę uczyć się Svelte na telefonie?
Wybierz ścieżkę, która łączy czytanie z uruchamianiem kodu, ponieważ Svelte najłatwiej zrozumieć, gdy zmieniasz wartość i obserwujesz reakcję strony. Ucz się Svelte: koduj rozpoczyna się od demonstracji skompilowanego wyniku, a następnie oferuje lekcje z edytorem HTML, CSS i JavaScript, podglądem oraz AI Mentor. Możesz zacząć bezpłatnie na iOS i Android.
Czy Svelte jest trudne do nauczenia dla początkujących?
Svelte jest często uznawane za przystępne, ponieważ komponenty wyglądają jak zwykły HTML, CSS i JavaScript, a przypisanie aktualizuje ekran. Trudniejsze elementy pojawiają się później: stores, cykl życia, podział SvelteKit na serwer i klienta oraz przejście na Svelte 5 runes. Ucz się Svelte: koduj klasyfikuje 41 kursów na poziomach od A1 do C1, dzięki czemu te tematy pojawiają się w odpowiedniej kolejności.
Czym jest SvelteKit i czy aplikacja go uczy?
SvelteKit to framework aplikacyjny dla Svelte, który dodaje routing oparty na plikach, ładowanie danych na serwerze, form actions, hooks i adapters wdrażania. Ucz się Svelte: koduj oferuje osobne kursy poświęcone routingowi i stronom SvelteKit, ładowaniu danych, form actions, API routes, hooks, obsłudze błędów, SSR i prerendering, streamingowi, bezpieczeństwu oraz adapters.
Czy aplikacja obejmuje Svelte 5 runes?
Tak. Ucz się Svelte: koduj zawiera kursy poświęcone wprowadzeniu do runes, props i snippets oraz zaawansowanym runes. Podgląd edytora obecnie kompiluje kod za pomocą Svelte 4.2.19, więc kod runes może nie wyświetlać się w podglądzie i najlepiej śledzić go w treści lekcji.
Czy mogę uruchamiać kod Svelte na telefonie?
Możesz napisać komponent w edytorze i wyświetlić go w podglądzie. Podgląd w Ucz się Svelte: koduj ładuje kompilator Svelte, aby zbudować komponent, dlatego wymaga połączenia. Początkowa demonstracja skompilowanego wyniku działa inaczej: jej skompilowany kod jest zawarty w aplikacji i działa bez połączenia z siecią.
Czy Ucz się Svelte: koduj jest bezpłatne?
Aplikację można pobrać bezpłatnie. Pierwszy kurs jest bezpłatny i obejmuje dzienny limit AI Mentor, a Pro odblokowuje wszystkie kursy, usuwa reklamy i zapewnia nielimitowany AI Mentor. Możesz przejść przez prawdziwe lekcje, zanim zdecydujesz, czy chcesz przejść na wyższy plan.
Czy muszę najpierw znać JavaScript?
Podstawowa znajomość HTML i JavaScript ułatwi początkowe kursy, ponieważ komponent Svelte to po prostu te języki w jednym pliku. Ucz się Svelte: koduj zaczyna od wyjaśnienia, czym jest Svelte i jak go skonfigurować, a każde pojęcie przedstawia prostym językiem, ale jest to kurs frameworka, a nie pierwszy kurs programowania.
Jakie platformy i języki obsługuje?
Ucz się Svelte: koduj działa na iOS za pośrednictwem App Store oraz na Android za pośrednictwem Google Play, a interfejs jest dostępny w 22 językach. Aplikacja ma oznaczenie 4+, więc żadne treści nie mają ograniczeń wiekowych.
Zacznij
Skompiluj dziś swój pierwszy komponent
Zacznij bezpłatnie na iOS i Android, w 22 językach.
Więcej od CoddyKit
Dostępna na iOS i Android.