Svelte सीखें: कोड करें
Svelte सीखें: कोड करें — लाइव एडिटर और उसके बगल में compiled output के साथ Svelte और SvelteKit सीखें
Svelte सीखें: कोड करें एक मुफ़्त iOS और Android ऐप है, जिसमें अपने फ़ोन पर Svelte और SvelteKit सीखें। लाइव एडिटर में preview के साथ components लिखें, देखें कि compiler उन्हें किस JavaScript में बदलता है, और अपनी पहली reactive value से लेकर deployed full-stack app तक 41 courses पूरे करें—साथ में AI Mentor भी मौजूद है।
- कीमत
- मुफ़्त, Pro upgrade
- प्लेटफ़ॉर्म
- iOS और Android
- भाषाएँ
- 22
- आयु रेटिंग
- 4+
- आवश्यकताएँ
- iOS 15.1 या बाद का संस्करण
उस स्क्रीन पर कुछ भी Svelte नहीं चला रहा है। वहाँ वही चल रहा है जो Svelte ने लिखा है।
ऐप का पहला lesson एक नौ-पंक्ति वाले component को उसके लिए compiler द्वारा बनाए गए JavaScript के बगल में दिखाता है। +1 पर टैप करें और सक्रिय होने वाली lines रोशन हो जाती हैं: एक invalidation, एक recomputed value, दो text nodes बदले, और कुछ भी नहीं छुआ गया। Framework के पीछे यही विचार है—इसे समझाने से पहले ही दिखाया गया है।
यह क्या है
Svelte सीखें: कोड करें एक मुफ़्त iOS और Android ऐप है, जो beginner से advanced स्तर तक 41 courses और 163 lessons के ज़रिए Svelte और SvelteKit सिखाता है। शुरुआत एक demo से होती है, जिसमें एक component के बगल में उसका compiled JavaScript दिखता है। इसके बाद reactivity, props, stores, transitions, Svelte 5 runes और SvelteKit routing, data loading, form actions और deployment शामिल हैं। इसमें preview वाला live editor और AI Mentor भी built in हैं।
ऐप के अंदर
यह कैसा दिखता है
कोर्स
Svelte कोर्स में क्या-क्या शामिल है
ऐप की अपनी कोर्स सूची से 41 कोर्स और 163 लेसन, जिन्हें A1 से C1 तक स्तर दिया गया है और जिनका अंत एक पूर्ण-स्टैक SvelteKit प्रोजेक्ट के साथ होता है।
पहले Components
Svelte क्या है और यह अलग तरीका क्यों अपनाता है, प्रोजेक्ट सेट अप करना और reactive variables के साथ अपना पहला component लिखना।
Props, Templates, Events और Binding
Props पास करना, markup में conditionals और each loops, DOM events और custom events, तथा bind: directives के साथ two-way binding।
Lifecycle, Stores और Context
onMount और onDestroy, writable, readable, derived और custom stores, slots और composition, तथा Context API।
Transitions, Animations और Actions
Transition directives, animate directive, दोबारा उपयोग किए जा सकने वाले DOM behaviour के लिए actions, custom transitions, तथा spring और tweened motion stores।
SvelteKit की बुनियाद
File-based routing और pages, load functions, advanced layouts, form actions, API routes, server hooks और error pages।
Svelte 5 Runes
runes का परिचय, props और snippets, advanced runes, तथा Svelte की reactivity कैसे काम करती है, इसका गहन अध्ययन।
Production में SvelteKit
SSR और prerendering, streaming, performance, SEO और meta tags, security, auth patterns, adapters और deployment।
Testing और Full-Stack
Vitest के साथ unit tests, Playwright के साथ end-to-end tests, third-party libraries, बड़े स्तर पर state management और एक full-stack SvelteKit app।
यह कैसे काम करता है
एक session कैसे काम करता है
ऐप को एक reactive value से deployable app तक की यात्रा के इर्द-गिर्द व्यवस्थित किया गया है, और हर पड़ाव में पढ़ने के साथ कुछ चलाने का अवसर भी मिलता है।
सबसे पहले compiler का output देखें
शुरुआती demo एक छोटे component को उसके द्वारा compile किए गए JavaScript के बगल में रखता है। Compiled हिस्सा पहले से generate किया गया है और ऐप के अंदर शामिल है, इसलिए demo बिना connection के चलता है।
Component edit करें और उसका preview देखें
Lessons HTML, CSS और JavaScript tabs वाले editor में खुलते हैं। Run button component को preview में render करता है। Preview network से Svelte compiler load करता है, इसलिए इसके लिए connection ज़रूरी है।
सीखी हुई बात को परखें
हर topic के बाद quiz और coding challenges आते हैं। AI Mentor किसी concept को समझा सकता है, roadmap सुझा सकता है या आपसे किसी course पर quiz ले सकता है। Weekly Code Challenge एक competitive round जोड़ता है।
इसमें क्या है
ऐप के साथ क्या मिलता है
41
Courses, A1 से C1 तक
41 courses में 163 lessons—Svelte setup और आपके पहले component से लेकर stores, transitions, SvelteKit routing और hooks, Svelte 5 runes, testing और full-stack capstone तक।
Compiled
Component अपने compiled code के बगल में
पहली बार चलने वाला demo source और generated JavaScript को साथ दिखाता है और दोबारा बनाए गए elements की तुलना में update हुए text nodes की गिनती करता है, ताकि update की cost आपको स्क्रीन पर सीधे दिखाई दे।
Preview
Preview वाला live editor
अलग-अलग tabs में markup, styles और script लिखें और component को फ़ोन पर render करें। Preview Svelte 4.2.19 compiler का इस्तेमाल करता है, इसलिए Svelte 5 runes के साथ लिखा गया code preview में नहीं चल सकता; उसे पढ़ना और साथ-साथ follow करना बेहतर है।
AI
AI Mentor
Chat tab से किसी course के key concepts, तेज़ी से सीखने के tips, quiz या personal roadmap के बारे में पूछें—या ऐसी error के बारे में पूछें जिसे आप समझ नहीं पा रहे हैं।
साप्ताहिक
Weekly Code Challenge
Lessons के साथ नियमित challenge round में हिस्सा लेकर मुकाबला करें। इसमें streaks, progress tracking और routine बनाए रखने के लिए reminders शामिल हैं।
परीक्षा
पूरा करने का certificate
Final exam पास करें और certificate पर आपका नाम होगा। यह आपके किए गए काम का प्रमाण है, किसी accredited qualification का नहीं।
पृष्ठभूमि
Svelte क्या है, और web interface बनाने के दूसरे तरीकों से यह कैसे अलग है?
Svelte user interfaces बनाने का एक framework है, जिसमें components को पहले से plain JavaScript में compile किया जाता है, जो page को सीधे update करता है। इसके बजाय कि browser में बदलावों का हिसाब लगाने वाला बड़ा runtime भेजा जाए। Component एक single file होता है, जिसमें markup, styles और script शामिल होते हैं, और count += 1 जैसा assignment screen को update करने के लिए पर्याप्त है। SvelteKit इसी के ऊपर बना application framework है, जो file-based routing, server-side data loading, form handling और deployment के लिए adapters जोड़ता है। Learner के लिए इसका व्यावहारिक लाभ कम boilerplate और code तथा page पर दिखाई देने वाली चीज़ के बीच कम दूरी है।
Compile-time reactivityएक assignment ही state है
Svelte में compiler एक सामान्य assignment को ऐसे code में बदल देता है, जो page के प्रभावित हिस्सों को update करता है। $: से शुरू होने वाला labelled statement उन values के बदलते ही किसी value को फिर से compute करता है, जिन्हें वह पढ़ता है—इसलिए derived data के लिए helper functions की ज़रूरत नहीं पड़ती।
Storescomponents के बीच shared state
Writable store में ऐसी value होती है, जिसे कई components subscribe कर सकते हैं। उसके नाम के आगे $ लगाने से automatic subscription मिल जाता है। जब state को compute या wrap करना हो, तो derived और custom stores इसी आधार पर काम आते हैं।
RunesSvelte 5 का syntax
Svelte 5 पहले के compiler magic के बड़े हिस्से को $state, $derived और $props जैसे explicit functions से बदलता है, साथ ही reusable markup के लिए snippets भी देता है। वास्तविक projects में दोनों styles इस्तेमाल होते हैं, इसलिए ऐप original model और runes model को अलग-अलग courses के रूप में सिखाता है।
SvelteKitrouting, data और deployment
+page.svelte जैसी file एक route बन जाती है, load function page render होने से पहले data fetch करता है, form actions server पर submissions संभालते हैं, और adapter result को static host, Node server या serverless platform के लिए package करता है।
उपयुक्तता
यह किन लोगों के लिए है — और किनके लिए नहीं
आपके लिए सही है, अगर आप
- क्या आप लंबे वीडियो कोर्स के बजाय छोटे-छोटे सेशन में Svelte या SvelteKit सीखना चाहते हैं
- क्या आपको कुछ HTML और JavaScript आता है और आप देखना चाहते हैं कि compiler-first framework से क्या बदलाव आता है
- क्या आप जानना चाहते हैं कि reactive updates कैसे काम करते हैं और बिना जाँचे भरोसा करने के बजाय generated code पढ़ना पसंद करते हैं
- क्या आप ऐसा learning path चाहते हैं जो केवल components तक सीमित न हो, बल्कि routing, data loading, auth और deployment तक पहुँचे
- क्या आपको किसी AI Mentor से यह पूछना पसंद है कि कोड का कोई हिस्सा उसी तरह व्यवहार क्यों करता है
आपके लिए सही टूल नहीं है, अगर आप
- क्या आप preview में Svelte 5 runes code चलाना चाहते हैं, जो Svelte 4.2.19 compiler का उपयोग करता है
- क्या आपको फोन से पूरा SvelteKit प्रोजेक्ट बनाकर deploy करना है, जबकि इसके लिए अभी भी laptop की ज़रूरत पड़ती है
- क्या आप हर चीज़ मुफ़्त होने की उम्मीद करते हैं: पहला कोर्स मुफ़्त है और Pro बाकी सभी चीज़ों को अनलॉक करता है
- क्या आपने कभी HTML या JavaScript नहीं देखा है और framework सीखने से पहले एक सामान्य programming course चाहते हैं
सवाल
अक्सर पूछे जाने वाले सवाल
मैं फोन पर Svelte कैसे सीख सकता हूँ?
ऐसा learning path चुनें जिसमें पढ़ने के साथ कोड चलाना भी शामिल हो, क्योंकि Svelte को समझने का सबसे आसान तरीका है किसी value को बदलना और पेज को प्रतिक्रिया करते देखना। Svelte सीखें: कोड करें की शुरुआत compiled-output demo से होती है, फिर इसमें HTML, CSS और JavaScript editor, preview और AI Mentor वाले लेसन मिलते हैं। इसे iOS और Android पर मुफ़्त में शुरू किया जा सकता है।
क्या शुरुआती लोगों के लिए Svelte सीखना कठिन है?
Svelte को अक्सर आसानी से सीखा जा सकने वाला माना जाता है, क्योंकि इसके components सामान्य HTML, CSS और JavaScript जैसे दिखते हैं और assignment स्क्रीन को अपडेट कर देता है। कठिन हिस्से बाद में आते हैं—stores, lifecycle, SvelteKit का server और client split, तथा Svelte 5 runes की ओर बदलाव। Svelte सीखें: कोड करें अपने 41 courses को A1 से C1 तक के स्तरों में बाँटता है, ताकि ये विषय क्रम से सामने आएँ।
SvelteKit क्या है और क्या ऐप इसे सिखाता है?
SvelteKit, Svelte का application framework है, जो file-based routing, server पर data loading, form actions, hooks और deployment adapters जोड़ता है। Svelte सीखें: कोड करें में SvelteKit routing और pages, data loading, form actions, API routes, hooks, error handling, SSR और prerendering, streaming, security तथा adapters के लिए समर्पित courses हैं।
क्या ऐप Svelte 5 runes सिखाता है?
हाँ। Svelte सीखें: कोड करें में runes का परिचय, props और snippets, तथा advanced runes पर courses शामिल हैं। editor का preview फिलहाल Svelte 4.2.19 के साथ compile होता है, इसलिए runes code का preview दिखाई नहीं दे सकता और इसे lesson text में पढ़कर सीखना बेहतर है।
क्या मैं अपने फोन पर Svelte code चला सकता हूँ?
आप editor में एक component लिखकर उसे preview में render कर सकते हैं। Svelte सीखें: कोड करें का preview component बनाने के लिए Svelte compiler लोड करता है, इसलिए connection ज़रूरी है। शुरुआत वाला compiled-output demo अलग है: इसका compiled code ऐप के अंदर ही शामिल है और network के बिना चलता है।
क्या Svelte सीखें: कोड करें मुफ़्त है?
ऐप मुफ़्त में download किया जा सकता है। पहला course मुफ़्त है, इसमें दैनिक AI Mentor allowance मिलता है, जबकि Pro हर course को unlock करता है, ads हटाता है और unlimited AI Mentor देता है। upgrade करने का निर्णय लेने से पहले आप वास्तविक lessons पूरे कर सकते हैं।
क्या मुझे पहले से JavaScript आना ज़रूरी है?
कुछ HTML और JavaScript की जानकारी शुरुआती courses को आसान बना देगी, क्योंकि Svelte component एक ही file में मौजूद इन्हीं languages का संयोजन होता है। Svelte सीखें: कोड करें की शुरुआत Svelte क्या है और इसे कैसे set up किया जाता है, इससे होती है और हर concept को सरल भाषा में समझाया जाता है, लेकिन यह पहला programming course नहीं, बल्कि framework course है।
यह किन platforms और languages को support करता है?
Svelte सीखें: कोड करें iOS पर App Store के ज़रिए और Android पर Google Play के ज़रिए चलता है, और इसका interface 22 भाषाओं में उपलब्ध है। इसे 4+ rating मिली है, इसलिए सामग्री में कुछ भी age-restricted नहीं है।
शुरू करें
आज ही अपना पहला component compile करें
iOS और Android पर 22 भाषाओं में मुफ़्त में शुरू करें।
CoddyKit की ओर से और
iOS और Android पर उपलब्ध है।