Belajar Svelte: Kod & Bina
Belajar Svelte: Kod & Bina — Pelajari Svelte dan SvelteKit dengan editor masa nyata serta output terkompil di sebelahnya
Belajar Svelte: Kod & Bina ialah aplikasi iOS dan Android percuma untuk mempelajari Svelte dan SvelteKit pada telefon anda. Tulis komponen dalam editor masa nyata dengan pratonton, lihat JavaScript yang dihasilkan oleh compiler daripadanya, dan ikuti 41 kursus daripada nilai reaktif pertama anda hingga aplikasi full-stack yang digunakan, dengan AI Mentor di sisi anda.
- Harga
- Percuma, naik taraf Pro
- Platform
- iOS dan Android
- Bahasa
- 22
- Penarafan umur
- 4+
- Memerlukan
- iOS 15.1 atau lebih baharu
Tiada apa-apa pada skrin itu yang menjalankan Svelte. Ia menjalankan perkara yang ditulis oleh Svelte.
Pelajaran pertama aplikasi ini memaparkan komponen sembilan baris di sebelah JavaScript yang dijana oleh compiler untuknya. Ketik +1 dan baris yang dicetuskan akan menyala: satu invalidasi, satu nilai dikira semula, dua nod teks berubah, tiada yang lain disentuh. Itulah idea di sebalik framework ini, ditunjukkan sebelum diterangkan.
Apakah aplikasi ini
Belajar Svelte: Kod & Bina ialah aplikasi iOS dan Android percuma yang mengajar Svelte dan SvelteKit melalui 41 kursus dan 163 pelajaran, daripada peringkat pemula hingga lanjutan. Ia bermula dengan demo yang memaparkan komponen di sebelah JavaScript terkompilnya, kemudian merangkumi reaktiviti, props, stores, transitions, Svelte 5 runes dan penghalaan SvelteKit, pemuatan data, tindakan borang serta deployment. Editor masa nyata dengan pratonton dan AI Mentor tersedia terbina dalam.
Dalam aplikasi
Rupa aplikasi ini
Kursus
Kandungan kursus Svelte
41 kursus dan 163 pelajaran daripada senarai kursus aplikasi sendiri, digredkan dari A1 hingga C1 dan berakhir dengan projek SvelteKit full-stack.
Komponen Pertama
Pengenalan kepada Svelte dan pendekatannya yang berbeza, persediaan projek, serta cara menulis komponen pertama dengan pemboleh ubah reaktif.
Props, Templat, Event dan Binding
Menghantar props, penggunaan syarat dan gelung each dalam markup, event DOM dan event tersuai, serta binding dua hala dengan arahan bind:.
Kitar Hayat, Stores dan Context
onMount dan onDestroy, stores writable, readable, derived dan tersuai, slots dan komposisi, serta Context API.
Transitions, Animations dan Actions
Arahan transition, arahan animate, actions untuk tingkah laku DOM yang boleh digunakan semula, transition tersuai, serta stores gerakan spring dan tweened.
Asas SvelteKit
Routing dan halaman berasaskan fail, fungsi load, layout lanjutan, form actions, API routes, server hooks dan halaman ralat.
Svelte 5 Runes
Pengenalan kepada runes, props dan snippets, runes lanjutan, serta pandangan lebih mendalam tentang cara reaktiviti Svelte berfungsi.
SvelteKit dalam Production
SSR dan prerendering, streaming, prestasi, SEO dan meta tags, keselamatan, corak auth, adapters dan deployment.
Testing dan Full-Stack
Unit tests dengan Vitest, end-to-end tests dengan Playwright, pustaka pihak ketiga, pengurusan state pada skala besar dan aplikasi SvelteKit full-stack.
Cara ia berfungsi
Cara sesuatu sesi berlangsung
Aplikasi ini disusun mengikut laluan daripada satu nilai reaktif kepada aplikasi yang boleh digunakan, dan setiap perhentian menggabungkan pembacaan dengan sesuatu yang boleh dijalankan.
Lihat output compiler terlebih dahulu
Demo pembukaan meletakkan satu komponen kecil di sebelah JavaScript yang dikompil olehnya. Bahagian terkompil itu dijana terlebih dahulu dan disertakan dalam aplikasi, jadi demo boleh berjalan tanpa sambungan.
Edit komponen dan pratontonnya
Pelajaran membuka editor dengan tab HTML, CSS dan JavaScript serta butang jalankan yang merender komponen dalam pratonton. Pratonton memuatkan compiler Svelte melalui rangkaian, jadi ia memerlukan sambungan.
Pastikan anda menguasainya
Kuiz dan cabaran coding mengikuti setiap topik, dan AI Mentor boleh menerangkan konsep, mencadangkan roadmap atau menguji anda tentang sesuatu kursus. Weekly Code Challenge menambah pusingan yang kompetitif.
Kandungan
Kandungan yang disertakan bersama aplikasi
41
Kursus, A1 hingga C1
163 pelajaran merentas 41 kursus, daripada persediaan Svelte dan komponen pertama anda hingga stores, transitions, penghalaan dan hooks SvelteKit, Svelte 5 runes, pengujian serta projek kemuncak full-stack.
Terkompil
Komponen di sebelah kod terkompilnya
Demo kali pertama dijalankan memaparkan sumber dan JavaScript yang dijana secara serentak serta mengira nod teks yang dikemas kini berbanding elemen yang dicipta semula, jadi kos sesuatu kemas kini boleh dilihat terus pada skrin.
Pratonton
Editor masa nyata dengan pratonton
Tulis markup, styles dan script dalam tab berasingan dan render komponen pada telefon. Pratonton menggunakan compiler Svelte 4.2.19, jadi kod yang ditulis dengan Svelte 5 runes mungkin tidak dapat dipratonton dan lebih baik dibaca serta diikuti sahaja.
AI
AI Mentor
Minta konsep utama sesuatu kursus, petua untuk belajar dengan lebih pantas, kuiz atau roadmap peribadi melalui tab chat, atau tanya tentang ralat yang tidak dapat anda fahami.
Mingguan
Weekly Code Challenge
Pusingan cabaran berkala untuk anda sertai bersama pelajaran, dengan streak, penjejakan kemajuan dan peringatan supaya rutin anda terus berjalan.
Peperiksaan
Sijil tamat kursus
Lulus peperiksaan akhir dan sijil itu akan memaparkan nama anda, sebagai bukti usaha yang dilakukan dan bukannya kelayakan bertauliah.
Latar belakang
Apakah Svelte, dan apakah perbezaannya berbanding cara lain untuk membina antara muka web?
Svelte ialah framework untuk membina antara muka pengguna yang komponennya dikompil terlebih dahulu menjadi JavaScript biasa yang mengemas kini halaman secara langsung, bukannya menghantar runtime besar yang menentukan perubahan dalam browser. Komponen ialah satu fail yang mengandungi markup, styles dan script, dan tugasan seperti count += 1 sudah memadai untuk mengemas kini skrin. SvelteKit ialah framework aplikasi yang dibina di atasnya, dengan penambahan penghalaan berasaskan fail, pemuatan data pada sisi server, pengendalian borang dan adapter untuk deployment. Kesan praktikalnya bagi pelajar ialah kurang boilerplate dan jarak yang lebih kecil antara kod dengan perkara yang muncul pada halaman.
Reaktiviti pada masa kompiltugasan ialah state
Dalam Svelte, compiler menulis semula tugasan biasa menjadi kod yang mengemas kini bahagian halaman yang terjejas. Pernyataan berlabel yang bermula dengan $: akan mengira semula nilai setiap kali nilai yang dibacanya berubah, jadi data terbitan tidak memerlukan fungsi pembantu.
Storesstate dikongsi merentas komponen
Writable store menyimpan nilai yang boleh dilanggan oleh banyak komponen, dan meletakkan awalan $ pada namanya memberikan langganan automatik. Derived dan custom stores dibina berasaskan ciri ini apabila state perlu dikira atau dibalut.
Runessintaks Svelte 5
Svelte 5 menggantikan sebahagian besar keajaiban compiler terdahulu dengan fungsi eksplisit seperti $state, $derived dan $props, bersama snippets untuk markup yang boleh diguna semula. Kedua-dua gaya digunakan dalam projek sebenar, sebab itulah aplikasi ini mengajar model asal dan model runes sebagai kursus berasingan.
SvelteKitpenghalaan, data dan deployment
Fail seperti +page.svelte menjadi route, fungsi load mengambil data sebelum halaman dirender, form actions mengendalikan penghantaran pada server, dan adapter membungkus hasilnya untuk static host, server Node atau platform serverless.
Sesuai
Untuk siapa — dan bukan untuk siapa
Sesuai untuk anda jika anda
- Mahu belajar Svelte atau SvelteKit dalam sesi singkat berbanding kursus video yang panjang
- Sudah mengetahui sedikit HTML dan JavaScript serta mahu melihat perubahan yang dibawa oleh framework berteraskan compiler
- Ingin tahu cara kemas kini reaktif berfungsi dan lebih suka membaca kod yang dijana daripada menerimanya tanpa memahami
- Mahu laluan yang merangkumi routing, pemuatan data, auth dan deployment, bukan komponen sahaja
- Suka bertanya kepada Mentor AI mengapa sesuatu bahagian kod berkelakuan sedemikian
Bukan alat yang sesuai jika anda
- Mahu menjalankan kod Svelte 5 runes dalam pratonton, yang menggunakan compiler Svelte 4.2.19
- Perlu membina dan menggunakan keseluruhan projek SvelteKit dari telefon, yang masih memerlukan laptop
- Menjangkakan semuanya percuma: kursus pertama percuma dan Pro membuka akses kepada selebihnya
- Belum pernah melihat HTML atau JavaScript dan mahu mengikuti kursus pengaturcaraan umum sebelum mempelajari framework
Soalan
Soalan lazim
Bagaimanakah saya boleh belajar Svelte melalui telefon?
Pilih laluan yang menggabungkan pembacaan dengan menjalankan kod, kerana Svelte paling mudah difahami apabila anda mengubah nilai dan melihat halaman bertindak balas. Belajar Svelte: Kod & Bina bermula dengan demo output terkompil, kemudian memberikan pelajaran dengan editor HTML, CSS dan JavaScript, pratonton serta Mentor AI. Ia percuma untuk bermula di iOS dan Android.
Adakah Svelte sukar dipelajari oleh pemula?
Svelte sering dianggap mudah didekati kerana komponen kelihatan seperti HTML, CSS dan JavaScript biasa, dan sesuatu assignment akan mengemas kini skrin. Bahagian yang lebih sukar muncul kemudian, dengan stores, kitar hayat, pemisahan server dan client dalam SvelteKit, serta peralihan kepada Svelte 5 runes. Belajar Svelte: Kod & Bina menggredkan 41 kursusnya dari A1 hingga C1 supaya topik-topik ini dipelajari mengikut urutan.
Apakah SvelteKit dan adakah aplikasi ini mengajarnya?
SvelteKit ialah framework aplikasi untuk Svelte yang menambah routing berasaskan fail, pemuatan data pada server, form actions, hooks dan adapters deployment. Belajar Svelte: Kod & Bina mempunyai kursus khusus tentang routing dan halaman SvelteKit, pemuatan data, form actions, API routes, hooks, pengendalian ralat, SSR dan prerendering, streaming, keselamatan serta adapters.
Adakah aplikasi ini merangkumi Svelte 5 runes?
Ya. Belajar Svelte: Kod & Bina merangkumi kursus tentang pengenalan kepada runes, props dan snippets, serta runes lanjutan. Pratonton editor kini dikompil dengan Svelte 4.2.19, jadi kod runes mungkin tidak dipaparkan dalam pratonton dan sebaiknya diikuti melalui teks pelajaran.
Bolehkah saya menjalankan kod Svelte pada telefon?
Anda boleh menulis komponen dalam editor dan memaparkannya dalam pratonton. Pratonton Belajar Svelte: Kod & Bina memuatkan compiler Svelte untuk membina komponen, jadi sambungan internet diperlukan. Demo output terkompil pada permulaan adalah berbeza: kod terkompilnya disertakan dalam aplikasi dan boleh dijalankan tanpa rangkaian.
Adakah Belajar Svelte: Kod & Bina percuma?
Aplikasi ini percuma untuk dimuat turun. Kursus pertama adalah percuma, dengan kuota harian Mentor AI, manakala Pro membuka semua kursus, membuang iklan dan memberikan akses Mentor AI tanpa had. Anda boleh mengikuti pelajaran sebenar sebelum memutuskan sama ada mahu menaik taraf.
Adakah saya perlu mengetahui JavaScript terlebih dahulu?
Sedikit pengetahuan HTML dan JavaScript akan memudahkan kursus awal, kerana komponen Svelte hanyalah kedua-dua bahasa itu dalam satu fail. Belajar Svelte: Kod & Bina bermula dengan penerangan tentang Svelte dan cara menyediakannya, serta menerangkan setiap konsep dalam bahasa yang mudah difahami, tetapi ia ialah kursus framework, bukannya kursus pengaturcaraan asas.
Platform dan bahasa apakah yang disokong?
Belajar Svelte: Kod & Bina tersedia di iOS melalui App Store dan di Android melalui Google Play, dan antara mukanya tersedia dalam 22 bahasa. Aplikasi ini diberi penarafan 4+, jadi tiada kandungan dalam bahan pembelajaran yang dihadkan mengikut umur.
Mulakan
Kompil komponen pertama anda hari ini
Percuma untuk bermula di iOS dan Android, dalam 22 bahasa.
Lagi daripada CoddyKit
Tersedia di iOS dan Android.