Opi Svelte: koodaa & luo
Opi Svelte: koodaa & luo — Opi Svelteä ja SvelteKitiä live-editorilla ja tarkastele käännettyä tulostetta sen vieressä
Opi Svelte: koodaa & luo on ilmainen iOS- ja Android-sovellus, jolla voit oppia Svelteä ja SvelteKitiä puhelimellasi. Kirjoita komponentteja live-editorissa ja tarkastele esikatselua, näe, millaiseksi JavaScriptiksi kääntäjä ne muuntaa, ja käy läpi 41 kurssia ensimmäisestä reaktiivisesta arvostasi julkaistuun full-stack-sovellukseen AI Mentorin tukenasi.
- Hinta
- Ilmainen, Pro-päivitys
- Alustat
- iOS ja Android
- Kielet
- 22
- Ikäraja
- 4+
- Vaatimukset
- iOS 15.1 tai uudempi
Mikään tuossa näkymässä ei suorita Svelteä. Se suorittaa sen, minkä Svelte kirjoitti.
Sovelluksen ensimmäinen oppitunti näyttää yhdeksän rivin komponentin sen tuottaman JavaScriptin vieressä. Napauta +1, niin suoritetut rivit korostuvat: yksi invalidointi, yksi uudelleenlaskettu arvo, kaksi muuttunutta tekstisolmua, eikä mikään muu kosketa näkymää. Tämä on frameworkin perusajatus, joka näytetään ennen kuin se selitetään.
Mikä se on
Opi Svelte: koodaa & luo on ilmainen iOS- ja Android-sovellus, joka opettaa Svelteä ja SvelteKitiä 41 kurssin ja 163 oppitunnin avulla aloittelijatasolta edistyneelle. Se alkaa demolla, jossa komponentti näytetään käännetyn JavaScriptinsä vieressä, ja käsittelee sitten reaktiivisuutta, propseja, storeja, siirtymiä, Svelte 5 -runeja ja SvelteKit-reititystä, datan lataamista, lomaketoimintoja ja julkaisua. Mukana on live-editori esikatselulla sekä AI Mentor.
Sovelluksen sisältö
Miltä se näyttää
Kurssi
Mitä Svelte-kurssi sisältää
Sovelluksen omalla kurssilistalla on 41 kurssia ja 163 oppituntia, joiden tasot vaihtelevat A1:stä C1:een ja jotka huipentuvat täyden pinon SvelteKit-projektiin.
Ensimmäiset komponentit
Mikä Svelte on ja miksi se käyttää erilaista lähestymistapaa, projektin määrittäminen sekä ensimmäisen komponentin kirjoittaminen reaktiivisten muuttujien avulla.
Propsit, templaatit, tapahtumat ja sidonta
Propsien välittäminen, ehdot ja each-silmukat merkinnässä, DOM-tapahtumat ja mukautetut tapahtumat sekä kaksisuuntainen sidonta bind:-direktiiveillä.
Elinkaari, storet ja konteksti
onMount ja onDestroy, writable-, readable-, derived- ja mukautetut storet, slotit ja kompositio sekä Context API.
Siirtymät, animaatiot ja actionit
Siirtymädirektiivit, animate-direktiivi, uudelleenkäytettävää DOM-toimintaa varten tarkoitetut actionit, mukautetut siirtymät sekä spring- ja tweened motion -storet.
SvelteKitin perusteet
Tiedostopohjainen reititys ja sivut, load-funktiot, edistyneet layoutit, lomaketoiminnot, API-reitit, palvelimen hookit ja virhesivut.
Svelte 5 Runes
Johdatus runeihin, propsit ja snippetit, edistyneet runet sekä syvempi katsaus siihen, miten Svlten reaktiivisuus toimii.
SvelteKit tuotannossa
SSR ja esirenderöinti, suoratoisto, suorituskyky, SEO ja metatunnisteet, tietoturva, auth-mallit, adapterit ja käyttöönotto.
Testaus ja full stack
Yksikkötestit Vitestillä, end-to-end-testit Playwrightilla, kolmannen osapuolen kirjastot, tilanhallinta suuressa mittakaavassa ja täyden pinon SvelteKit-sovellus.
Miten se toimii
Miten oppitunti toimii
Sovellus on rakennettu poluksi ensimmäisestä reaktiivisesta arvosta julkaistavaan sovellukseen, ja jokaisessa vaiheessa lukeminen yhdistyy johonkin suoritettavaan tehtävään.
Katso ensin kääntäjän tuloste
Aloitusdemo asettaa pienen komponentin sen JavaScriptin viereen, joksi se käännetään. Käännetty osa tuotettiin etukäteen ja toimitetaan sovelluksen mukana, joten demo toimii ilman yhteyttä.
Muokkaa komponenttia ja esikatsele sitä
Oppitunneilla avautuu editori, jossa on HTML-, CSS- ja JavaScript-välilehdet sekä suorituspainike, joka renderöi komponentin esikatseluun. Esikatselu lataa Svelte-kääntäjän verkon kautta, joten se tarvitsee yhteyden.
Varmista, että opit asian
Jokaisen aiheen jälkeen on tietovisa ja koodaushaasteita, ja AI Mentor voi selittää käsitteen, ehdottaa oppimispolkua tai pitää sinulle kurssiin liittyvän tietovisan. Weekly Code Challenge lisää mukaan kilpailullisen kierroksen.
Mitä se sisältää
Mitä sovellus sisältää
41
Kurssit, A1–C1
163 oppituntia 41 kurssilla: Svelte-asennuksesta ja ensimmäisestä komponentistasi storeihin, siirtymiin, SvelteKit-reititykseen ja hookseihin, Svelte 5 -runeihin, testaamiseen ja full-stack-lopputyöhön.
Käännetty
Komponentti käännetyn koodinsa vieressä
Ensimmäisen käynnistyksen demo näyttää lähdekoodin ja tuotetun JavaScriptin yhdessä ja laskee päivittyneet tekstisolmut uudelleen luotuihin elementteihin verrattuna, joten päivityksen kustannus on luettavissa suoraan näytöltä.
Esikatselu
Live-editori esikatselulla
Kirjoita markup, tyylit ja scripti erillisillä välilehdillä ja renderöi komponentti puhelimessa. Esikatselu käyttää Svelte 4.2.19 -kääntäjää, joten Svelte 5 -runeilla kirjoitettu koodi ei välttämättä näy esikatselussa, ja se kannattaa mieluummin lukea ja käydä läpi.
AI
AI Mentor
Pyydä chat-välilehdellä kurssin keskeiset käsitteet, vinkkejä nopeampaan oppimiseen, tietovisa tai henkilökohtainen oppimispolku — tai kysy virheestä, jota et osaa tulkita.
Viikoittainen
Weekly Code Challenge
Säännöllinen haastekierros, johon voit osallistua oppituntien ohella. Mukana ovat putket, edistymisen seuranta ja muistutukset, jotka auttavat pitämään rutiinista kiinni.
Koe
Suoritustodistus
Suorita lopputentti hyväksytysti, niin todistukseen merkitään nimesi. Se osoittaa tehdyn työn, mutta ei ole akkreditoitu tutkinto.
Taustaa
Mikä Svelte on, ja miten se eroaa muista web-käyttöliittymien rakentamisen tavoista?
Svelte on käyttöliittymien rakentamiseen tarkoitettu framework, jossa komponentit käännetään etukäteen tavalliseksi JavaScriptiksi, joka päivittää sivua suoraan sen sijaan, että selaimeen toimitettaisiin suuri runtime muutosten selvittämistä varten. Komponentti on yksi tiedosto, joka sisältää markupin, tyylit ja scriptin, ja esimerkiksi sijoitus count += 1 riittää päivittämään näkymän. SvelteKit on sen päälle rakennettu sovellusframework, joka lisää tiedostopohjaisen reitityksen, palvelinpuolen datan lataamisen, lomakkeiden käsittelyn ja adapterit julkaisua varten. Oppijalle tämä tarkoittaa vähemmän boilerplate-koodia ja lyhyempää matkaa koodin ja sivulla näkyvän lopputuloksen välillä.
Käännösaikainen reaktiivisuussijoitus on tila
Sveltessä kääntäjä muuntaa tavallisen sijoituksen koodiksi, joka päivittää sivun muuttuneet osat. $:-merkillä alkava labelled statement laskee arvon uudelleen aina, kun sen lukemat arvot muuttuvat, joten johdettu data ei tarvitse apufunktioita.
Storetjaettu tila komponenttien välillä
Writable store sisältää arvon, jota monet komponentit voivat kuunnella, ja sen nimen eteen lisätty $ ottaa tilauksen käyttöön automaattisesti. Derived- ja custom storet rakentuvat tämän päälle, kun tila täytyy laskea tai kääriä.
RunetSvelte 5:n syntaksi
Svelte 5 korvaa suuren osan aiemmasta kääntäjän taikuudesta eksplisiittisillä funktioilla, kuten $state, $derived ja $props, sekä uudelleenkäytettävän markupin snippeteillä. Molemmat tyylit ovat käytössä oikeissa projekteissa, minkä vuoksi sovellus opettaa alkuperäisen mallin ja runemallin erillisinä kursseina.
SvelteKitreititys, data ja julkaisu
+page.svelte-niminen tiedosto muuttuu reitiksi, load-funktio hakee datan ennen sivun renderöintiä, form actions käsittelee lähetykset palvelimella ja adapter paketoi tuloksen staattista hostia, Node-palvelinta tai serverless-alustaa varten.
Sopivuus
Kenelle se sopii – ja kenelle ei
Se sopii sinulle, jos
- Haluat oppia Svelten tai SvelteKitin lyhyissä tuokioissa pitkien videokurssien sijaan
- Osaat jonkin verran HTML:ää ja JavaScriptiä ja haluat nähdä, mitä compiler-first-kehys muuttaa
- Olet utelias siitä, miten reaktiiviset päivitykset toimivat, ja haluat mieluummin lukea generoidun koodin kuin luottaa siihen sokeasti
- Haluat oppimispolun, joka ulottuu reititykseen, datan lataamiseen, authiin ja käyttöönottoon – ei vain komponentteihin
- Haluat kysyä AI-mentorilta, miksi jokin koodinpätkä toimii niin kuin toimii
Se ei ole oikea työkalu sinulle, jos
- Haluat suorittaa Svelte 5 Runes -koodia esikatselussa, joka käyttää Svelte 4.2.19 -kääntäjää
- Sinun on rakennettava ja otettava käyttöön kokonainen SvelteKit-projekti puhelimella, mikä vaatii edelleen kannettavan tietokoneen
- Odotat kaiken olevan ilmaista: ensimmäinen kurssi on ilmainen, ja Pro avaa loput
- Et ole koskaan nähnyt HTML:ää tai JavaScriptiä ja haluat yleisen ohjelmointikurssin ennen kehystä
Kysymykset
Usein kysytyt kysymykset
Miten voin oppia Svelteä puhelimella?
Valitse oppimispolku, jossa lukeminen yhdistyy koodin suorittamiseen, sillä Svelte on helpoin ymmärtää, kun muutat arvoa ja seuraat sivun reagointia. Opi Svelte: koodaa & luo alkaa käännetyn tulosteen demolla ja tarjoaa sen jälkeen oppitunteja, joissa on HTML-, CSS- ja JavaScript-editori, esikatselu ja AI-mentori. Aloittaminen on ilmaista iOS- ja Android-laitteilla.
Onko Svelte vaikea oppia aloittelijalle?
Svelteä pidetään usein helposti lähestyttävänä, koska komponentit näyttävät tavalliselta HTML:ltä, CSS:ltä ja JavaScriptiltä ja sijoitus päivittää näytön. Haastavammat asiat tulevat myöhemmin: storet, elinkaari, SvelteKitin palvelimen ja asiakkaan välinen jako sekä siirtyminen Svelte 5 Runes -malliin. Opi Svelte: koodaa & luo luokittelee 41 kurssiaan tasoille A1–C1, jotta nämä aiheet tulevat vastaan oikeassa järjestyksessä.
Mikä SvelteKit on, ja opettaako sovellus sitä?
SvelteKit on Svelten sovelluskehys, joka lisää tiedostopohjaisen reitityksen, datan lataamisen palvelimella, lomaketoiminnot, hookit ja käyttöönoton adapterit. Opi Svelte: koodaa & luo sisältää omat kurssinsa SvelteKitin reitityksestä ja sivuista, datan lataamisesta, lomaketoiminnoista, API-reiteistä, hookeista, virheenkäsittelystä, SSR:stä ja esirenderöinnistä, suoratoistosta, tietoturvasta ja adaptereista.
Käsitteleekö sovellus Svelte 5 Runes -mallia?
Kyllä. Opi Svelte: koodaa & luo sisältää kurssit runeihin tutustumisesta, propseista ja snippeteistä sekä edistyneistä runeista. Editorin esikatselu käännetään tällä hetkellä Svelte 4.2.19:llä, joten runekoodi ei välttämättä näy esikatselussa, ja siihen kannattaa tutustua oppitunnin tekstin avulla.
Voinko suorittaa Svelte-koodia puhelimellani?
Voit kirjoittaa komponentin editorissa ja renderöidä sen esikatseluun. Opi Svelte: koodaa & luoin esikatselu lataa Svelte-kääntäjän komponentin rakentamista varten, joten se tarvitsee verkkoyhteyden. Aloituksen käännetyn tulosteen demo on erilainen: sen käännetty koodi toimitetaan sovelluksen mukana ja se toimii ilman verkkoyhteyttä.
Onko Opi Svelte: koodaa & luo ilmainen?
Sovelluksen voi ladata ilmaiseksi. Ensimmäinen kurssi on ilmainen, ja siihen kuuluu päivittäinen AI-mentorikiintiö. Pro avaa kaikki kurssit, poistaa mainokset ja tarjoaa rajattoman AI-mentorikäytön. Voit käydä oikeita oppitunteja läpi ennen kuin päätät päivittää tilauksen.
Pitääkö JavaScript osata ensin?
HTML:n ja JavaScriptin perusteiden osaaminen helpottaa ensimmäisiä kursseja, koska Svelte-komponentti on yksinkertaisesti nämä kielet yhdessä tiedostossa. Opi Svelte: koodaa & luo aloittaa kertomalla, mikä Svelte on ja miten se määritetään, ja selittää jokaisen käsitteen selkeästi. Se on kuitenkin kehyskurssi, ei ensimmäinen ohjelmointikurssi.
Mitä alustoja ja kieliä se tukee?
Opi Svelte: koodaa & luo toimii iOS:llä App Storen kautta ja Androidilla Google Playn kautta, ja käyttöliittymä on saatavilla 22 kielellä. Sen ikäraja on 4+, joten mikään materiaalin sisältö ei ole ikärajoitettua.
Aloita
Käännä ensimmäinen komponenttisi jo tänään
Aloita ilmaiseksi iOS:llä ja Androidilla 22 kielellä.
Lisää CoddyKitilta
Saatavilla alustoilla iOS ja Android.