เรียน Svelte: โค้ดและสร้าง
เรียน Svelte: โค้ดและสร้าง — เรียนรู้ Svelte และ SvelteKit ด้วยตัวแก้ไขโค้ดแบบเรียลไทม์ พร้อมเอาต์พุตที่คอมไพล์แล้วแสดงอยู่ข้างกัน
เรียน Svelte: โค้ดและสร้าง เป็นแอปฟรีบน iOS และ Android สำหรับ เรียนรู้ Svelte และ SvelteKit บนโทรศัพท์ของคุณ เขียนคอมโพเนนต์ในตัวแก้ไขโค้ดแบบเรียลไทม์พร้อมพรีวิว ดู JavaScript ที่คอมไพเลอร์แปลงคอมโพเนนต์เหล่านั้นให้ และเรียนผ่าน 41 คอร์ส ตั้งแต่ค่ารีแอกทีฟค่าแรกไปจนถึงแอป full-stack ที่นำไปใช้งานจริง โดยมี AI Mentor คอยช่วยอยู่ข้าง ๆ
- ราคา
- ฟรี, อัปเกรดเป็น Pro
- แพลตฟอร์ม
- iOS และ Android
- ภาษา
- 22
- การจัดอันดับอายุ
- 4+
- ต้องใช้
- iOS 15.1 ขึ้นไป
ไม่มีอะไรบนหน้าจอนั้นกำลังรัน Svelte อยู่ สิ่งที่กำลังรันคือสิ่งที่ Svelte เขียนขึ้นมา
บทเรียนแรกของแอปจะแสดงคอมโพเนนต์ความยาวเก้าบรรทัดไว้ข้าง JavaScript ที่คอมไพเลอร์สร้างขึ้นมาให้ แตะ +1 แล้วบรรทัดที่ทำงานจะสว่างขึ้น: มีการทำให้ค่าไม่ถูกต้องหนึ่งครั้ง คำนวณค่าใหม่หนึ่งครั้ง โหนดข้อความเปลี่ยนสองรายการ และไม่มีส่วนอื่นถูกแตะต้อง นี่คือแนวคิดเบื้องหลังเฟรมเวิร์ก ซึ่งแสดงให้เห็นก่อนที่จะอธิบาย
คืออะไร
เรียน Svelte: โค้ดและสร้าง เป็นแอปฟรีบน iOS และ Android ที่สอน Svelte และ SvelteKit ผ่าน 41 คอร์สและ 163 บทเรียน ไล่ระดับตั้งแต่ผู้เริ่มต้นไปจนถึงขั้นสูง แอปเริ่มต้นด้วยเดโมที่แสดงคอมโพเนนต์ไว้ข้าง JavaScript ที่คอมไพล์แล้ว จากนั้นครอบคลุมเรื่องรีแอกทีฟ, props, stores, transitions, Svelte 5 runes และการทำ routing ใน SvelteKit, การโหลดข้อมูล, form actions และการนำไปใช้งานจริง โดยมีตัวแก้ไขโค้ดแบบเรียลไทม์พร้อมพรีวิวและ AI Mentor ในตัว
ภายในแอป
หน้าตาเป็นอย่างไร
คอร์ส
คอร์ส Svelte ครอบคลุมอะไรบ้าง
41 คอร์สและ 163 บทเรียนจากรายการคอร์สของแอปเอง ระดับตั้งแต่ A1 ถึง C1 และจบด้วยโปรเจกต์ SvelteKit แบบ full-stack
คอมโพเนนต์แรก
ทำความรู้จัก Svelte และเหตุผลที่ Svelte ใช้แนวทางที่แตกต่าง การตั้งค่าโปรเจกต์ และการเขียนคอมโพเนนต์แรกด้วยตัวแปรแบบ reactive
Props, Templates, Events และ Binding
การส่ง props, เงื่อนไขและลูป each ใน markup, DOM events และ custom events รวมถึง two-way binding ด้วยคำสั่ง bind:
Lifecycle, Stores และ Context
onMount และ onDestroy, writable, readable, derived และ custom stores, slots และ composition รวมถึง Context API
Transitions, Animations และ Actions
คำสั่ง transition, คำสั่ง animate, actions สำหรับพฤติกรรม DOM ที่นำกลับมาใช้ซ้ำได้, custom transitions รวมถึง motion stores แบบ spring และ tweened
พื้นฐาน SvelteKit
การกำหนดเส้นทางและหน้าแบบอิงไฟล์, ฟังก์ชัน load, layouts ขั้นสูง, form actions, API routes, server hooks และหน้าแสดงข้อผิดพลาด
Svelte 5 Runes
แนะนำ runes, props และ snippets, runes ขั้นสูง และเจาะลึกการทำงานของ reactivity ใน Svelte
SvelteKit ในการใช้งานจริง
SSR และการ prerendering, streaming, ประสิทธิภาพ, SEO และ meta tags, ความปลอดภัย, รูปแบบ auth, adapters และการ deploy
การทดสอบและ Full-Stack
การทดสอบแบบ unit ด้วย Vitest, การทดสอบ end-to-end ด้วย Playwright, ไลบรารีจากบุคคลที่สาม, การจัดการ state ในระดับใหญ่ และแอป SvelteKit แบบ full-stack
ทำงานอย่างไร
เซสชันทำงานอย่างไร
แอปจัดโครงสร้างตามเส้นทางตั้งแต่ค่ารีแอกทีฟค่าแรกไปจนถึงแอปที่พร้อมนำไปใช้งานจริง และแต่ละช่วงจะผสมผสานการอ่านเนื้อหาเข้ากับสิ่งที่ให้ลงมือทำ
ดูเอาต์พุตของคอมไพเลอร์ก่อน
เดโมเปิดแอปจะแสดงคอมโพเนนต์ขนาดเล็กไว้ข้าง JavaScript ที่คอมไพล์ออกมา โค้ดฝั่งที่คอมไพล์แล้วถูกสร้างไว้ล่วงหน้าและรวมอยู่ในแอป จึงทำให้เดโมทำงานได้โดยไม่ต้องเชื่อมต่ออินเทอร์เน็ต
แก้ไขคอมโพเนนต์และพรีวิว
บทเรียนจะเปิดตัวแก้ไขโค้ดที่มีแท็บ HTML, CSS และ JavaScript พร้อมปุ่มรันเพื่อเรนเดอร์คอมโพเนนต์ในพรีวิว พรีวิวจะโหลด Svelte compiler ผ่านเครือข่าย จึงจำเป็นต้องเชื่อมต่ออินเทอร์เน็ต
ทดสอบว่าเข้าใจแล้ว
หลังจบแต่ละหัวข้อจะมีควิซและโจทย์เขียนโค้ดตามมา และ AI Mentor สามารถอธิบายแนวคิด แนะนำเส้นทางการเรียน หรือทดสอบคุณด้วยควิซเกี่ยวกับคอร์สได้ ส่วน Weekly Code Challenge จะเพิ่มรอบการแข่งขันเข้ามา
มีอะไรอยู่ข้างใน
สิ่งที่มาพร้อมกับแอป
41
คอร์ส ระดับ A1 ถึง C1
163 บทเรียนจาก 41 คอร์ส ตั้งแต่การตั้งค่า Svelte และคอมโพเนนต์แรกของคุณ ไปจนถึง stores, transitions, การทำ routing และ hooks ใน SvelteKit, Svelte 5 runes, การทดสอบ และโปรเจกต์ capstone แบบ full-stack
คอมไพล์แล้ว
คอมโพเนนต์อยู่ข้างโค้ดที่คอมไพล์แล้ว
เดโมเมื่อเปิดใช้ครั้งแรกจะแสดงซอร์สโค้ดและ JavaScript ที่สร้างขึ้นมาพร้อมกัน และนับจำนวนโหนดข้อความที่อัปเดตเทียบกับองค์ประกอบที่สร้างขึ้นใหม่ ทำให้คุณอ่านต้นทุนของการอัปเดตได้จากหน้าจอโดยตรง
พรีวิว
ตัวแก้ไขโค้ดแบบเรียลไทม์พร้อมพรีวิว
เขียน markup, styles และ script ในแท็บแยกกัน แล้วเรนเดอร์คอมโพเนนต์บนโทรศัพท์ พรีวิวใช้ Svelte 4.2.19 compiler ดังนั้นโค้ดที่เขียนด้วย Svelte 5 runes อาจไม่แสดงในพรีวิว และควรใช้สำหรับอ่านและทำตามมากกว่า
AI
AI Mentor
ขอแนวคิดสำคัญของคอร์ส เคล็ดลับเพื่อเรียนให้เร็วขึ้น ควิซ หรือเส้นทางการเรียนส่วนตัวได้จากแท็บแชต หรือถามเกี่ยวกับข้อผิดพลาดที่คุณอ่านไม่ออก
รายสัปดาห์
Weekly Code Challenge
รอบท้าทายประจำที่เปิดให้แข่งขันควบคู่ไปกับบทเรียน พร้อม streaks, การติดตามความคืบหน้า และการแจ้งเตือนเพื่อช่วยให้ทำต่อเนื่องเป็นกิจวัตร
การสอบ
ใบรับรองการเรียนจบ
สอบปลายภาคให้ผ่าน แล้วใบรับรองจะมีชื่อของคุณอยู่ในนั้น ซึ่งเป็นหลักฐานของผลงานที่ทำ ไม่ใช่วุฒิการศึกษาที่ได้รับการรับรอง
เบื้องหลัง
Svelte คืออะไร และแตกต่างจากวิธีอื่นในการสร้างเว็บอินเทอร์เฟซอย่างไร
Svelte เป็นเฟรมเวิร์กสำหรับสร้าง User Interface ที่คอมโพเนนต์จะถูกคอมไพล์ล่วงหน้าเป็น JavaScript ธรรมดาเพื่ออัปเดตหน้าเว็บโดยตรง แทนที่จะส่ง runtime ขนาดใหญ่ไปทำงานคำนวณการเปลี่ยนแปลงในเบราว์เซอร์ คอมโพเนนต์หนึ่งรายการคือไฟล์เดียวที่มี markup, styles และ script รวมอยู่ด้วย และการกำหนดค่าอย่าง count += 1 ก็เพียงพอที่จะอัปเดตหน้าจอ ส่วน SvelteKit คือเฟรมเวิร์กสำหรับแอปพลิเคชันที่สร้างต่อยอดจาก Svelte โดยเพิ่ม file-based routing, การโหลดข้อมูลฝั่งเซิร์ฟเวอร์, การจัดการฟอร์ม และ adapters สำหรับการนำไปใช้งานจริง ผลในทางปฏิบัติสำหรับผู้เรียนคือมี boilerplate น้อยลง และระยะห่างระหว่างโค้ดกับสิ่งที่ปรากฏบนหน้าก็น้อยลง
รีแอกทีฟขณะคอมไพล์การกำหนดค่าคือ state
ใน Svelte คอมไพเลอร์จะเขียนการกำหนดค่าทั่วไปใหม่ให้เป็นโค้ดที่อัปเดตส่วนต่าง ๆ ของหน้าเว็บที่ได้รับผลกระทบ คำสั่งแบบมีป้ายกำกับที่ขึ้นต้นด้วย $: จะคำนวณค่าใหม่ทุกครั้งที่ค่าที่คำสั่งอ่านมีการเปลี่ยนแปลง ดังนั้นข้อมูลที่คำนวณต่อยอดจึงไม่ต้องใช้ฟังก์ชันช่วย
Storesstate ที่ใช้ร่วมกันระหว่างคอมโพเนนต์
writable store ใช้เก็บค่าที่คอมโพเนนต์หลายรายการสามารถ subscribe ได้ และการเติม $ ไว้หน้าชื่อจะเปิดใช้การ subscribe โดยอัตโนมัติ ส่วน derived และ custom stores ช่วยต่อยอดแนวคิดนี้เมื่อจำเป็นต้องคำนวณหรือห่อหุ้ม state
Runesไวยากรณ์ของ Svelte 5
Svelte 5 แทนที่ compiler magic แบบเดิมไปมากด้วยฟังก์ชันที่ระบุอย่างชัดเจน เช่น $state, $derived และ $props พร้อม snippets สำหรับ markup ที่นำกลับมาใช้ซ้ำได้ ปัจจุบันมีการใช้ทั้งสองรูปแบบในโปรเจกต์จริง นี่จึงเป็นเหตุผลที่แอปสอนทั้งโมเดลเดิมและโมเดล runes แยกเป็นคนละคอร์ส
SvelteKitrouting, ข้อมูล และการนำไปใช้งานจริง
ไฟล์อย่าง +page.svelte จะกลายเป็น route, ฟังก์ชัน load จะดึงข้อมูลก่อนที่หน้าจะเรนเดอร์, form actions จะจัดการการส่งข้อมูลบนเซิร์ฟเวอร์ และ adapter จะจัดแพ็กเกจผลลัพธ์สำหรับ static host, เซิร์ฟเวอร์ Node หรือแพลตฟอร์ม serverless
เหมาะกับคุณไหม
เหมาะกับใคร — และไม่เหมาะกับใคร
เหมาะกับคุณหากคุณ
- อยากเรียนรู้ Svelte หรือ SvelteKit แบบแบ่งเป็นช่วงสั้น ๆ แทนการเรียนจากคอร์สวิดีโอยาว ๆ
- รู้จัก HTML และ JavaScript อยู่บ้าง และอยากเห็นว่า framework ที่ให้ compiler เป็นแกนหลักเปลี่ยนวิธีการทำงานอย่างไร
- สงสัยว่าการอัปเดตแบบ reactive ทำงานอย่างไร และชอบอ่านโค้ดที่ generate ขึ้นมามากกว่าการเชื่อโดยไม่ตรวจสอบ
- ต้องการเส้นทางการเรียนรู้ที่ไปถึง routing, data loading, auth และ deployment ไม่ใช่แค่คอมโพเนนต์
- ชอบถาม AI Mentor ว่าทำไมโค้ดส่วนหนึ่งจึงทำงานในลักษณะนั้น
ไม่ใช่เครื่องมือที่เหมาะ หากคุณ
- ต้องการรันโค้ด Svelte 5 runes ในหน้าพรีวิว ซึ่งใช้ compiler ของ Svelte 4.2.19
- จำเป็นต้องสร้างและ deploy โปรเจกต์ SvelteKit ทั้งโปรเจกต์จากโทรศัพท์ ซึ่งยังคงต้องใช้แล็ปท็อป
- คาดหวังให้ทุกอย่างฟรี: คอร์สแรกเรียนฟรี และ Pro จะปลดล็อกคอร์สที่เหลือ
- ไม่เคยเห็น HTML หรือ JavaScript มาก่อน และต้องการคอร์สเขียนโปรแกรมทั่วไปก่อนเรียน framework
คำถาม
คำถามที่พบบ่อย
ฉันจะเรียนรู้ Svelte บนโทรศัพท์ได้อย่างไร
เลือกเส้นทางการเรียนรู้ที่ผสมผสานการอ่านกับการรันโค้ด เพราะ Svelte เข้าใจได้ง่ายที่สุดเมื่อคุณเปลี่ยนค่าแล้วดูหน้าเว็บตอบสนอง เรียน Svelte: โค้ดและสร้าง เริ่มด้วยเดโมเอาต์พุตที่ผ่านการ compile แล้ว จากนั้นจึงให้คุณเรียนผ่านบทเรียนที่มีโปรแกรมแก้ไข HTML, CSS และ JavaScript, หน้าพรีวิว และ AI Mentor เริ่มเรียนฟรีได้บน iOS และ Android
Svelte เรียนยากสำหรับมือใหม่ไหม
โดยทั่วไป Svelte ถือว่าเข้าถึงได้ง่าย เพราะคอมโพเนนต์มีหน้าตาเหมือน HTML, CSS และ JavaScript ทั่วไป และการกำหนดค่าจะอัปเดตหน้าจอ ส่วนที่ยากจะตามมาภายหลัง ทั้ง stores, lifecycle, การแบ่งการทำงานระหว่าง server และ client ของ SvelteKit และการเปลี่ยนมาใช้ Svelte 5 runes เรียน Svelte: โค้ดและสร้าง จัดระดับคอร์สทั้ง 41 คอร์สตั้งแต่ A1 ถึง C1 เพื่อให้คุณเรียนหัวข้อเหล่านี้ตามลำดับ
SvelteKit คืออะไร และแอปมีสอนไหม
SvelteKit คือ framework สำหรับแอปพลิเคชันของ Svelte ที่เพิ่มการกำหนดเส้นทางแบบอิงไฟล์ การโหลดข้อมูลบน server, form actions, hooks และ deployment adapters เรียน Svelte: โค้ดและสร้าง มีคอร์สเฉพาะสำหรับ routing และ pages ของ SvelteKit, data loading, form actions, API routes, hooks, error handling, SSR และ prerendering, streaming, security และ adapters
แอปครอบคลุม Svelte 5 runes ไหม
มี เรียน Svelte: โค้ดและสร้าง มีคอร์สเกี่ยวกับการแนะนำ runes, props และ snippets รวมถึง runes ขั้นสูง หน้าพรีวิวของโปรแกรมแก้ไขโค้ดปัจจุบัน compile ด้วย Svelte 4.2.19 ดังนั้นโค้ด runes อาจไม่แสดงในหน้าพรีวิว และควรติดตามจากเนื้อหาบทเรียนเป็นหลัก
ฉันสามารถรันโค้ด Svelte บนโทรศัพท์ได้ไหม
คุณสามารถเขียนคอมโพเนนต์ในโปรแกรมแก้ไขโค้ดและแสดงผลในหน้าพรีวิวได้ หน้าพรีวิวของ เรียน Svelte: โค้ดและสร้าง จะโหลด Svelte compiler เพื่อ build คอมโพเนนต์ จึงต้องเชื่อมต่ออินเทอร์เน็ต ส่วนเดโมเอาต์พุตที่ผ่านการ compile ในตอนเริ่มต้นแตกต่างออกไป เพราะโค้ดที่ compile แล้วรวมอยู่ในแอปและทำงานได้โดยไม่ต้องเชื่อมต่อเครือข่าย
เรียน Svelte: โค้ดและสร้าง ฟรีไหม
ดาวน์โหลดแอปได้ฟรี คอร์สแรกเรียนฟรี พร้อมโควตาการใช้ AI Mentor รายวัน ส่วน Pro จะปลดล็อกทุกคอร์ส ลบโฆษณา และให้ใช้ AI Mentor ได้ไม่จำกัด คุณสามารถเรียนบทเรียนจริงก่อนได้ ก่อนตัดสินใจอัปเกรด
ฉันจำเป็นต้องรู้ JavaScript มาก่อนไหม
การมีพื้นฐาน HTML และ JavaScript บ้างจะช่วยให้เรียนคอร์สช่วงแรกได้ง่ายขึ้น เพราะคอมโพเนนต์ Svelte ก็คือภาษาทั้งสองที่รวมอยู่ในไฟล์เดียว เรียน Svelte: โค้ดและสร้าง เริ่มจาก Svelte คืออะไรและตั้งค่าอย่างไร พร้อมอธิบายแต่ละแนวคิดด้วยภาษาที่เข้าใจง่าย แต่คอร์สนี้เป็นคอร์ส framework ไม่ใช่คอร์สเขียนโปรแกรมสำหรับผู้เริ่มต้นตั้งแต่ศูนย์
รองรับแพลตฟอร์มและภาษาใดบ้าง
เรียน Svelte: โค้ดและสร้าง ใช้งานบน iOS ผ่าน App Store และบน Android ผ่าน Google Play พร้อมอินเทอร์เฟซที่มีให้เลือก 22 ภาษา แอปจัดอยู่ในระดับ 4+ ดังนั้นเนื้อหาทั้งหมดจึงไม่มีข้อจำกัดด้านอายุ
เริ่มต้นใช้งาน
Compile คอมโพเนนต์แรกของคุณวันนี้
เริ่มเรียนฟรีบน iOS และ Android พร้อมให้บริการใน 22 ภาษา
เพิ่มเติมจาก CoddyKit
ใช้งานได้บน iOS และ Android