leptos-rs

@philkellr try leptos-wasi codeitlikemiley/leptos_wasi i maintained leptos-rs/leptos_wasi you can also use codeitlikemiley/ddd-cqrs-es if you like DDD

Leptos Rust Full Course (Part 1): Build Reactive Web Apps from Zero Rust can build websites now. In this beginner-friendly Part 1 you build three complete Leptos modules from scratch: a click counter, a small component library, and five reactive mini apps. About two hours, slow explanations, jokes included, and every line of code explained. Leptos is a full-stack Rust web framework with fine-grained reactivity and no virtual DOM. This course is tested on Leptos 0.8.22 with Rust 1.89+, Trunk and the wasm32-unknown-unknown target. 💻 Full course code (all 25 modules): AarambhDevHub/leptos-full-course 🔥 Part 2 (control flow, forms and events, routing): youtu.be 📚 Official Leptos book: book.leptos.dev 🧱 Leptos on GitHub: leptos-rs/leptos ── VIDEO CHAPTERS (1h 55m) ── 00:00 Why Writing Websites in Rust Is Easier Than You Think (Leptos Intro) 03:47 Partner: CodeCrafters — Build Your Own Git, Redis, Docker in Rust 06:02 Course Roadmap: 10 Parts, 25 Modules 09:58 What Is Leptos? WebAssembly, Fine-Grained Reactivity, No Virtual DOM 15:46 Setup: Rust, wasm32 Target, Trunk & Project Tour 22:42 Module 1: main, mount_to_body & the Panic Hook 26:37 Module 1: The view! Macro & Your First Component 31:08 Module 1: Props — into, optional & Option 35:41 Module 1: Rendering Lists with iter, map & collect_view 38:52 Module 1: Your First Signal — Click Counter 46:28 Module 1: Component Composition & Recap 49:17 Module 2: Why Components Matter 51:21 Module 2: Button — Enum Props, Defaults & Callbacks 58:56 Module 2: Card — Children, ChildrenFn & Composition 1:02:18 Module 2: Badge — Static Props vs Reactive Props 1:04:43 Module 2: Alert — Local State, Show & bool.then 1:09:48 Module 2: Avatar — Initials & into_any 1:14:37 Module 2: Recap & Exercises 1:17:58 Module 3: Reactivity Mental Model (Signals, Memos, Effects) 1:21:26 Module 3: Counter — Signal + Memo + Effect 1:27:19 Module 3: Temperature Converter — Derived Signals 1:33:13 Module 3: Word Counter — Many Memos from One Signal 1:38:06 Module 3: Color Mixer — Reactive Styles 1:43:11 Module 3: RwSignal, Effects & the batch Experiment 1:47:58 Module 3: Recap, Common Mistakes & Quiz 1:51:39 Part 1 Recap & Part 2 Preview (Control Flow, Forms, Routing) What you build in Part 1: • Module 1, Introduction: project setup, mount_to_body, the view! macro, components, props, lists and your first signal • Module 2, Components: Button, Card, Badge, Alert and Avatar with enum props, defaults, callbacks, children, local state, Show and into_any • Module 3, Reactivity: signals, derived signals, memos, effects, RwSignal and batch, with a temperature converter, word counter and color mixer What you will be able to do after this: • Set up a Rust + WebAssembly + Trunk project and run it in the browser • Write Leptos components with typed props (required, optional and default) • Pass data down with props and send events up with callbacks • Choose between a signal, a derived signal, a memo and an effect • Avoid the classic frozen-value reactivity bug Who this is for: Rust learners who know the basics (variables, functions, structs, enums) and want to build web apps in Rust. Complete beginners to Leptos are welcome. Every new idea is explained in plain words. ── PARTNER ── CodeCrafters: build your own Git, Redis, Docker and Shell from scratch in Rust: 👉 app.codecrafters.io ── QUICK ANSWERS (FAQ) ── Q: What is Leptos? A: Leptos is a full-stack, fine-grained reactive web framework for Rust. It compiles to WebAssembly for the browser and can also render on the server. Q: Does Leptos use a virtual DOM? A: No. Leptos tracks which parts of the page read which signals and updates only those parts when a signal changes. Q: What is a signal in Leptos? A: A reactive value with a read half and a write half. Reading it inside a closure, memo, effect or the view subscribes to its changes. Q: What is the difference between a memo and an effect? A: A memo is a cached derived value that only notifies others when its answer changes. An effect is for side effects, like logging or saving to storage. Q: Which Rust version do I need? A: This course uses Rust 1.89 or newer. Leptos 0.8.22 itself needs 1.88 or newer. Q: What is Trunk? A: Trunk is a build tool and dev server that compiles Rust to WebAssembly and serves your page with live reload for client-side Leptos apps. ── COMMUNITY & LINKS ── → GitHub: github.com/AarambhDevHub → Discord: discord.gg → LinkedIn: linkedin.com → Support: buymeacoffee.com #Leptos #Rust #WebAssembly #RustLang #WebDevelopment #AarambhDevHub [ar] دورة Leptos Rust الكاملة (الجزء 1): بناء تطبيقات ويب تفاعلية من الصفر يُمكن الآن استخدام لغة Rust لإنشاء مواقع الويب. في هذا الجزء الأول المُناسب للمبتدئين، ستُنشئ ثلاثة وحدات Leptos كاملة من الصفر: عداد نقرات، ومكتبة مكونات صغيرة، وخمسة تطبيقات مصغّرة تفاعلية. مدة الدورة ساعتان تقريبًا، مع شرح مُبسّط، وبعض الفكاهة، وشرح لكل سطر من التعليمات البرمجية. Leptos هو إطار عمل ويب متكامل مكتوب بلغة Rust، يتميّز بتفاعلية عالية الدقة، ولا يعتمد على DOM افتراضي. تم اختبار هذه الدورة على Leptos 0.8.22 مع Rust 1.89+، وTrunk، وwasm32-unknown-unknown. 💻 كود الدورة الكامل (جميع الوحدات الـ ٢٥): AarambhDevHub/leptos-full-course 🔥 الجزء الثاني (التحكم في التدفق، النماذج والأحداث، التوجيه): youtu.be 📚 كتاب Leptos الرسمي: book.leptos.dev 🧱 Leptos على GitHub: leptos-rs/leptos ── فصول الفيديو (ساعة و٥٥ دقيقة) ── ٠٠:٠٠ لماذا كتابة مواقع الويب بلغة Rust أسهل مما تظن (مقدمة Leptos) ٠٣:٤٧ الشريك: CodeCrafters - أنشئ Git وRedis وDocker الخاص بك باستخدام Rust ٠٦:٠٢ خارطة طريق الدورة: ١٠ أجزاء، ٢٥ وحدة ٠٩:٥٨ ما هو ليبتوس؟ WebAssembly، تفاعلية دقيقة، بدون DOM افتراضي 15:46 الإعداد: Rust، هدف wasm32، الفرع الرئيسي وجولة في المشروع 22:42 الوحدة 1: main، mount_to_body وخطاف Panic 26:37 الوحدة 1: العرض! الماكرو ومكونك الأول 31:08 الوحدة 1: الخصائص - into، optional، وOption 35:41 الوحدة 1: عرض القوائم باستخدام iter، map، وcollect_view 38:52 الوحدة 1: إشارتك الأولى - عداد النقرات 46:28 الوحدة 1: تكوين المكونات ومراجعة 49:17 الوحدة 2: أهمية المكونات 51:21 الوحدة 2: الزر - خصائص التعداد، القيم الافتراضية، ووظائف الاستدعاء 58:56 الوحدة 2: البطاقة - العناصر الفرعية، دالة العناصر الفرعية، والتكوين 1:02:18 الوحدة 2: الشارة - الخصائص الثابتة مقابل الخصائص التفاعلية 1:04:43 الوحدة 2: التنبيه - الحالة المحلية، Show، وbool.then 1:09:48 الوحدة 2: الصورة الرمزية - الأحرف الأولى وinto_any 1:14:37 الوحدة 2: مراجعة وتمارين 1:17:58 الوحدة 3: التفاعلية النموذج الذهني (الإشارات، المذكرات، التأثيرات) 1:21:26 الوحدة 3: العداد - إشارة + مذكرة + تأثير 1:27:19 الوحدة 3: محول درجة الحرارة - الإشارات المشتقة 1:33:13 الوحدة 3: عداد الكلمات - مذكرات متعددة من إشارة واحدة 1:38:06 الوحدة 3: خلاط الألوان - الأنماط التفاعلية 1:43:11 الوحدة 3: RwSignal، التأثيرات، وتجربة المعالجة الدفعية 1:47:58 الوحدة 3: ملخص، أخطاء شائعة، واختبار قصير 1:51:39 ملخص الجزء 1 ومعاينة الجزء 2 (تدفق التحكم، النماذج، التوجيه) ما ستبنيه في الجزء 1: • الوحدة 1، مقدمة: إعداد المشروع، mount_to_body، العرض! الماكرو، المكونات، الخصائص، القوائم، وإشارتك الأولى • الوحدة 2، المكونات: الزر، البطاقة، الشارة، التنبيه، والصورة الرمزية مع خصائص التعداد، والقيم الافتراضية، ووظائف الاستدعاء، والعناصر الفرعية، والحالة المحلية، ووظيفتي العرض والتحويل إلى أي شيء • الوحدة 3، التفاعلية: الإشارات، والإشارات المشتقة، والمذكرات، والتأثيرات، وRwSignal، والمعالجة الدفعية، مع محول درجة الحرارة، وعداد الكلمات، وخلاط الألوان ما ستتمكن من فعله بعد ذلك: • إعداد مشروع Rust + WebAssembly + Trunk وتشغيله في المتصفح • كتابة مكونات Leptos بخصائص مُحددة النوع (إلزامية، اختيارية، وافتراضية) • تمرير البيانات باستخدام الخصائص وإرسال الأحداث باستخدام وظائف الاستدعاء • الاختيار بين الإشارة، والإشارة المشتقة، والمذكرة، والتأثير • تجنب خطأ التفاعلية الكلاسيكي ذي القيمة الثابتة لمن هذه الوحدة: متعلمو لغة Rust الذين يعرفون الأساسيات (المتغيرات، الدوال، الهياكل، التعدادات) ويرغبون في بناء تطبيقات ويب باستخدام Rust. نرحب بالمبتدئين تمامًا في Leptos. كل فكرة جديدة تُشرح بأسلوب مبسط. ── شريك ── CodeCrafters: ابنِ Git وRedis وDocker وShell الخاص بك من الصفر باستخدام Rust: 👉 app.codecrafters.io ── إجابات سريعة (أسئلة شائعة) ── س: ما هو Leptos؟ ج: Leptos هو إطار عمل ويب تفاعلي متكامل ودقيق مكتوب بلغة Rust. يُترجم إلى WebAssembly للمتصفح، ويمكنه أيضًا العرض على الخادم. س: هل يستخدم Leptos نموذج DOM افتراضي؟ ج: لا. يتتبع Leptos أجزاء الصفحة التي تقرأ الإشارات، ويُحدّث تلك الأجزاء فقط عند تغيير الإشارة. س: ما هي الإشارة في Leptos؟ ج: قيمة تفاعلية لها نصف للقراءة ونصف للكتابة. قراءتها داخل دالة مغلقة، أو مذكرة، أو تأثير، أو العرض، تُفعّل التغييرات. س: ما الفرق بين المذكرة والتأثير؟ ج: المذكرة هي قيمة مشتقة مخزنة مؤقتًا، تُعلم الآخرين فقط عند تغيير إجابتها. أما التأثير، فهو للتأثيرات الجانبية، مثل التسجيل أو الحفظ في وحدة التخزين. س: ما إصدار Rust المطلوب؟ ج: تستخدم هذه الدورة Rust 1.89 أو أحدث. أما Leptos 0.8.22، فيحتاج إلى 1.88 أو أحدث. س: ما هو Trunk؟ ج: Trunk أداة بناء وخادم تطوير يُحوّل Rust إلى WebAssembly، ويُقدّم صفحتك مع إعادة تحميل مباشرة لتطبيقات Leptos من جانب العميل. ── المجتمع والروابط ── → GitHub: github.com/AarambhDevHub → Discord: discord.gg → LinkedIn: linkedin.com → الدعم: buymeacoffee.com #Leptos #Rust #WebAssembly #RustLang #WebDevelopment #AarambhDevHub [bn] Leptos Rust ফুল কোর্স (পর্ব ১): শূন্য থেকে রিঅ্যাক্টিভ ওয়েব অ্যাপ তৈরি করুন রাস্ট দিয়ে এখন ওয়েবসাইট তৈরি করা যায়। শিক্ষানবিসদের জন্য সহজ এই প্রথম পর্বে আপনি একদম শুরু থেকে তিনটি সম্পূর্ণ লেপটস মডিউল তৈরি করবেন: একটি ক্লিক কাউন্টার, একটি ছোট কম্পোনেন্ট লাইব্রেরি এবং পাঁচটি রিঅ্যাক্টিভ মিনি অ্যাপ। কোর্সটির সময় প্রায় দুই ঘণ্টা, এতে রয়েছে ধীরগতির ব্যাখ্যা, কৌতুক এবং কোডের প্রতিটি লাইনের ব্যাখ্যা। লেপটস হলো একটি ফুল-স্ট্যাক রাস্ট ওয়েব ফ্রেমওয়ার্ক, যাতে ফাইন-গ্রেইনড রিঅ্যাক্টিভিটি রয়েছে এবং কোনো ভার্চুয়াল ডম নেই। এই কোর্সটি লেপটস ০.৮.২২, রাস্ট ১.৮৯+, ট্রাঙ্ক এবং wasm32-unknown-unknown টার্গেটের উপর পরীক্ষা করা হয়েছে। 💻 সম্পূর্ণ কোর্স কোড (সব ২৫টি মডিউল): AarambhDevHub/leptos-full-course 🔥 পর্ব ২ (কন্ট্রোল ফ্লো, ফর্ম ও ইভেন্ট, রাউটিং): youtu.be 📚 লেপটোসের অফিসিয়াল বই: book.leptos.dev 🧱 গিটহাবে লেপটোস: leptos-rs/leptos ── ভিডিও অধ্যায়সমূহ (১ ঘণ্টা ৫৫ মিনিট) ── ০০:০০ রাস্টে ওয়েবসাইট লেখা আপনার ধারণার চেয়েও সহজ কেন (লেপটোস পরিচিতি) ০৩:৪৭ পার্টনার: কোডক্রাফটার্স — রাস্টে আপনার নিজস্ব গিট, রেডিস, ডকার তৈরি করুন ০৬:০২ কোর্স রোডম্যাপ: ১০টি পর্ব, ২৫টি মডিউল ০৯:৫৮ লেপটোস কী? ওয়েবঅ্যাসেম্বলি, ফাইন-গ্রেইনড রিঅ্যাকটিভিটি, কোনো ভার্চুয়াল ডম নেই ১৫:৪৬ সেটআপ: রাস্ট, wasm32 টার্গেট, ট্রাঙ্ক ও প্রজেক্ট ট্যুর ২২:৪২ মডিউল ১: মেইন, মাউন্ট_টু_বডি ও প্যানিক হুক ২৬:৩৭ মডিউল ১: ভিউ! ম্যাক্রো এবং আপনার প্রথম কম্পোনেন্ট ৩১:০৮ মডিউল ১: প্রপস — ইনটু, অপশনাল এবং অপশন ৩৫:৪১ মডিউল ১: ইটার, ম্যাপ এবং কালেক্ট_ভিউ দিয়ে লিস্ট রেন্ডারিং ৩৮:৫২ মডিউল ১: আপনার প্রথম সিগন্যাল — ক্লিক কাউন্টার ৪৬:২৮ মডিউল ১: কম্পোনেন্ট কম্পোজিশন এবং পুনরালোচনা ৪৯:১৭ মডিউল ২: কম্পোনেন্ট কেন গুরুত্বপূর্ণ ৫১:২১ মডিউল ২: বাটন — এনাম প্রপস, ডিফল্টস এবং কলব্যাকস ৫৮:৫৬ মডিউল ২: কার্ড — চিলড্রেন, চিলড্রেনএফএন এবং কম্পোজিশন ১:০২:১৮ মডিউল ২: ব্যাজ — স্ট্যাটিক প্রপস বনাম রিঅ্যাক্টিভ প্রপস ১:০৪:৪৩ মডিউল ২: অ্যালার্ট — লোকাল স্টেট, শো এবং বুল.দেন ১:০৯:৪৮ মডিউল ২: অ্যাভাটার — ইনিশিয়ালস এবং ইনটু_এনি ১:১৪:৩৭ মডিউল ২: পুনরালোচনা এবং অনুশীলন ১:১৭:৫৮ মডিউল ৩: রিঅ্যাকটিভিটি মেন্টাল মডেল (সিগন্যাল, মেমো, ইফেক্ট) ১:২১:২৬ মডিউল ৩: কাউন্টার — সিগন্যাল + মেমো + ইফেক্ট ১:২৭:১৯ মডিউল ৩: টেম্পারেচার কনভার্টার — ডিরাইভড সিগন্যাল ১:৩৩:১৩ মডিউল ৩: ওয়ার্ড কাউন্টার — একটি সিগন্যাল থেকে অনেকগুলো মেমো ১:৩৮:০৬ মডিউল ৩: কালার মিক্সার — রিঅ্যাকটিভ স্টাইল ১:৪৩:১১ মডিউল ৩: RwSignal, ইফেক্ট এবং ব্যাচ এক্সপেরিমেন্ট ১:৪৭:৫৮ মডিউল ৩: রিক্যাপ, সাধারণ ভুল এবং কুইজ ১:৫১:৩৯ পার্ট ১ রিক্যাপ এবং পার্ট ২ প্রিভিউ (কন্ট্রোল ফ্লো, ফর্ম, রাউটিং) পার্ট ১-এ আপনি যা তৈরি করবেন: • মডিউল ১, ভূমিকা: প্রজেক্ট সেটআপ, mount_to_body, ভিউ! ম্যাক্রো, কম্পোনেন্ট, প্রপস, লিস্ট এবং আপনার প্রথম সিগন্যাল • মডিউল ২, কম্পোনেন্ট: বাটন, কার্ড, ব্যাজ, অ্যালার্ট এবং অ্যাভাটার, সাথে enum প্রপস, ডিফল্ট, কলব্যাক, চিলড্রেন, লোকাল স্টেট, শো এবং into_any • মডিউল ৩, রিঅ্যাকটিভিটি: সিগন্যাল, ডিরাইভড সিগন্যাল, মেমো, ইফেক্ট, RwSignal এবং ব্যাচ, সাথে একটি টেম্পারেচার কনভার্টার, ওয়ার্ড কাউন্টার এবং কালার মিক্সার এর পরে আপনি যা করতে পারবেন: • একটি Rust + WebAssembly + Trunk প্রজেক্ট সেট আপ করে ব্রাউজারে রান করা • টাইপড প্রপস (required, optional এবং default) ব্যবহার করে Leptos কম্পোনেন্ট লেখা • প্রপস দিয়ে ডেটা নিচে পাঠানো এবং কলব্যাক দিয়ে ইভেন্ট উপরে পাঠানো • সিগন্যাল, ডিরাইভড সিগন্যাল, মেমো এবং ইফেক্টের মধ্যে যেকোনো একটি বেছে নেওয়া • ক্লাসিক ফ্রোজেন-ভ্যালু রিঅ্যাকটিভিটি বাগ এড়ানো কাদের জন্য: Rust-এর সেইসব শিক্ষার্থী যারা বেসিক বিষয়গুলো (ভেরিয়েবল, ফাংশন, স্ট্রাক্ট, enum) জানেন এবং Rust-এ ওয়েব অ্যাপ তৈরি করতে চান। লেপটোসে সম্পূর্ণ নতুনদের স্বাগতম। প্রতিটি নতুন ধারণা সহজ ভাষায় ব্যাখ্যা করা হয়। ── পার্টনার ── কোডক্রাফটার্স: রাস্ট-এ স্ক্র্যাচ থেকে আপনার নিজের গিট, রেডিস, ডকার এবং শেল তৈরি করুন: 👉 app.codecrafters.io ── দ্রুত উত্তর (FAQ) ── প্রশ্ন: লেপটোস কী? উত্তর: লেপটোস হলো রাস্ট-এর জন্য একটি ফুল-স্ট্যাক, ফাইন-গ্রেইনড রিঅ্যাক্টিভ ওয়েব ফ্রেমওয়ার্ক। এটি ব্রাউজারের জন্য ওয়েবঅ্যাসেম্বলিতে কম্পাইল হয় এবং সার্ভারেও রেন্ডার করতে পারে। প্রশ্ন: লেপটোস কি ভার্চুয়াল ডোম ব্যবহার করে? উত্তর: না। লেপটোস ট্র্যাক করে যে পেজের কোন অংশ কোন সিগন্যাল রিড করছে এবং যখন কোনো সিগন্যাল পরিবর্তিত হয়, তখন শুধুমাত্র সেই অংশগুলোই আপডেট করে। প্রশ্ন: লেপটোসে সিগন্যাল কী? উত্তর: একটি রিঅ্যাক্টিভ ভ্যালু যার একটি রিড হাফ এবং একটি রাইট হাফ থাকে। ক্লোজার, মেমো, ইফেক্ট বা ভিউ-এর ভিতরে এটি পড়লে এর পরিবর্তনগুলো সাবস্ক্রাইব হয়ে যায়। প্রশ্ন: মেমো এবং ইফেক্টের মধ্যে পার্থক্য কী? উত্তর: মেমো হলো একটি ক্যাশ করা ডিরাইভড ভ্যালু যা শুধুমাত্র তখনই অন্যদের জানায় যখন এর উত্তর পরিবর্তিত হয়। ইফেক্ট হলো সাইড ইফেক্টের জন্য, যেমন লগিং বা স্টোরেজে সেভ করা। প্রশ্ন: আমার কোন রাস্ট ভার্সন প্রয়োজন? উত্তর: এই কোর্সে রাস্ট ১.৮৯ বা তার নতুন সংস্করণ ব্যবহার করা হয়। লেপটোস ০.৮.২২ এর জন্য ১.৮৮ বা তার নতুন সংস্করণ প্রয়োজন। প্রশ্ন: ট্রাঙ্ক কী? উত্তর: ট্রাঙ্ক হলো একটি বিল্ড টুল এবং ডেভ সার্ভার যা রাস্টকে ওয়েবঅ্যাসেম্বলিতে কম্পাইল করে এবং ক্লায়েন্ট-সাইড লেপটোস অ্যাপের জন্য লাইভ রিলোড সহ আপনার পেজ পরিবেশন করে। ── কমিউনিটি ও লিঙ্ক ── → গিটহাব: github.com/AarambhDevHub → ডিসকর্ড: discord.gg → লিঙ্কডইন: linkedin.com → সাপোর্ট: buymeacoffee.com #L... [de-DE] Leptos Rust Kompaktkurs (Teil 1): Reaktive Web-Apps von Grund auf entwickeln Rust ermöglicht jetzt die Entwicklung von Websites. In diesem einsteigerfreundlichen ersten Teil erstellen Sie drei vollständige Leptos-Module von Grund auf: einen Klickzähler, eine kleine Komponentenbibliothek und fünf reaktive Mini-Apps. Der Kurs dauert etwa zwei Stunden und beinhaltet ausführliche Erklärungen, humorvolle Einlagen und die Erläuterung jeder einzelnen Codezeile. Leptos ist ein Full-Stack-Webframework für Rust mit feingranularer Reaktivität und ohne virtuelles DOM. Dieser Kurs wurde mit Leptos 0.8.22, Rust 1.89+, Trunk und dem Zielsystem wasm32-unknown-unknown getestet. 💻 Vollständiger Kurscode (alle 25 Module): AarambhDevHub/leptos-full-course 🔥 Teil 2 (Kontrollfluss, Formulare und Ereignisse, Routing): youtu.be 📚 Offizielles Leptos-Buch: book.leptos.dev 🧱 Leptos auf GitHub: leptos-rs/leptos ── VIDEO-KAPITEL (1 Std. 55 Min.) ── 00:00 Warum Webseiten in Rust einfacher zu entwickeln ist als gedacht (Leptos-Einführung) 03:47 Partner: CodeCrafters – Eigene Git-, Redis- und Docker-Umgebungen in Rust erstellen 06:02 Kursübersicht: 10 Teile, 25 Module 09:58 Was ist Leptos? WebAssembly, Feingranulare Reaktivität, Kein virtuelles DOM 15:46 Einrichtung: Rust, wasm32-Ziel, Trunk & Projektvorstellung 22:42 Modul 1: main, mount_to_body & der Panic Hook 26:37 Modul 1: Die Ansicht! Makro & Ihre erste Komponente 31:08 Modul 1: Eigenschaften – into, optional & Option 35:41 Modul 1: Listen rendern mit iter, map & collect_view 38:52 Modul 1: Ihr erstes Signal – Klickzähler 46:28 Modul 1: Komponentenkomposition & Zusammenfassung 49:17 Modul 2: Warum Komponenten wichtig sind 51:21 Modul 2: Button – Enum-Eigenschaften, Standardwerte & Rückruffunktionen 58:56 Modul 2: Karte – Kinder, Kinderfunktion & Komposition 1:02:18 Modul 2: Badge – Statische vs. reaktive Eigenschaften 1:04:43 Modul 2: Alarm – Lokaler Zustand, Show & bool.then 1:09:48 Modul 2: Avatar – Initialen & into_any 1:14:37 Modul 2: Zusammenfassung & Übungen 1:17:58 Modul 3: Mentales Modell der Reaktivität (Signale, Memos, Effekte) 1:21:26 Modul 3: Zähler – Signal + Memo + Effekt 1:27:19 Modul 3: Temperaturkonverter – Abgeleitete Signale 1:33:13 Modul 3: Wortzähler – Mehrere Memos aus einem Signal 1:38:06 Modul 3: Farbmischer – Reaktive Stile 1:43:11 Modul 3: RwSignal, Effekte & das Batch-Experiment 1:47:58 Modul 3: Zusammenfassung, Häufige Fehler & Quiz 1:51:39 Zusammenfassung Teil 1 & Vorschau Teil 2 (Kontrollfluss, Formulare, Routing) Was Sie in Teil 1 erstellen: • Modul 1, Einführung: Projekteinrichtung, mount_to_body, die Ansicht! Makros, Komponenten, Props, Listen und Ihr erstes Signal • Modul 2, Komponenten: Button, Card, Badge, Alert und Avatar mit Enum-Props, Standardwerten, Callbacks, Kindelementen, lokalem Zustand, Show und into_any • Modul 3, Reaktivität: Signale, abgeleitete Signale, Memos, Effekte, RwSignal und Batch, mit Temperaturkonverter, Wortzähler und Farbmischer Was Sie nach diesem Kurs können: • Ein Rust-, WebAssembly- und Trunk-Projekt erstellen und im Browser ausführen • Leptos-Komponenten mit typisierten Props (erforderlich, optional und Standard) schreiben • Daten mit Props übergeben und Ereignisse mit Callbacks senden • Zwischen Signal, abgeleitetem Signal, Memo und Effekt wählen Den klassischen Fehler mit eingefrorenen Werten vermeiden Für wen ist dieser Kurs geeignet? Rust-Lernende mit Grundkenntnissen (Variablen, Funktionen, Strukturen, Enums), die Webanwendungen in Rust entwickeln möchten. Auch absolute Leptos-Anfänger sind willkommen. Jede neue Idee wird verständlich erklärt. ── PARTNER ── CodeCrafters: Entwickle dein eigenes Git, Redis, Docker und deine eigene Shell von Grund auf in Rust: 👉 app.codecrafters.io ── KURZE ANTWORTEN (FAQ) ── F: Was ist Leptos? A: Leptos ist ein vollständiger, feingranularer, reaktiver Webframework für Rust. Es wird zu WebAssembly für den Browser kompiliert und kann auch serverseitig gerendert werden. F: Nutzt Leptos ein virtuelles DOM? A: Nein. Leptos verfolgt, welche Teile der Seite welche Signale lesen, und aktualisiert nur diese Teile, wenn sich ein Signal ändert. F: Was ist ein Signal in Leptos? A: Ein reaktiver Wert mit einer Lese- und einer Schreibhälfte. Das Lesen innerhalb einer Closure, eines Memos, eines Effekts oder der View abonniert deren Änderungen. F: Was ist der Unterschied zwischen einem Memo und einem Effekt? A: Ein Memo ist ein zwischengespeicherter abgeleiteter Wert, der andere nur benachrichtigt, wenn sich sein Wert ändert. Ein Effekt dient der Auslösung von Seiteneffekten, wie z. B. Protokollierung oder Speicherung. F: Welche Rust-Version benötige ich? A: Dieser Kurs verwendet Rust 1.89 oder neuer. Leptos 0.8.22 selbst benötigt Rust 1.88 oder neuer. F: Was ist Trunk? A: Trunk ist ein Build-Tool und Entwicklungsserver, der Rust zu WebAssembly kompiliert und Ihre Seite mit Live-Reload für clientseitige Leptos-Anwendungen bereitstellt. ── COMM... [es-US] Curso completo de Leptos Rust (Parte 1): Crea aplicaciones web reactivas desde cero Ahora puedes crear sitios web con Rust. En esta primera parte, ideal para principiantes, construirás tres módulos Leptos completos desde cero: un contador de clics, una pequeña biblioteca de componentes y cinco miniaplicaciones reactivas. Aproximadamente dos horas, explicaciones detalladas, con toques de humor y cada línea de código explicada. Leptos es un framework web completo para Rust con reactividad granular y sin DOM virtual. Este curso se ha probado con Leptos 0.8.22, Rust 1.89+, Trunk y el destino wasm32-unknown-unknown. 💻 Código completo del curso (los 25 módulos): AarambhDevHub/leptos-full-course 🔥 Parte 2 (flujo de control, formularios y eventos, enrutamiento): youtu.be 📚 Libro oficial de Leptos: book.leptos.dev 🧱 Leptos en GitHub: leptos-rs/leptos ── CAPÍTULOS DEL VIDEO (1h 55m) ── 00:00 Por qué crear sitios web en Rust es más fácil de lo que piensas (Introducción a Leptos) 03:47 Socio: CodeCrafters — Crea tu propio Git, Redis y Docker en Rust 06:02 Hoja de ruta del curso: 10 partes, 25 módulos 09:58 ¿Qué es Leptos? WebAssembly, reactividad granular, sin DOM virtual 15:46 Configuración: Rust, destino wasm32, rama principal y recorrido por el proyecto 22:42 Módulo 1: main, mount_to_body y el gancho de pánico 26:37 Módulo 1: ¡La vista! Macro y tu primer componente 31:08 Módulo 1: Propiedades: into, optional y Option 35:41 Módulo 1: Renderizado de listas con iter, map y collect_view 38:52 Módulo 1: Tu primera señal: contador de clics 46:28 Módulo 1: Composición de componentes y resumen 49:17 Módulo 2: Por qué importan los componentes 51:21 Módulo 2: Botón: propiedades de enumeración, valores predeterminados y funciones de devolución de llamada 58:56 Módulo 2: Tarjeta: elementos secundarios, ChildrenFn y composición 1:02:18 Módulo 2: Insignia: propiedades estáticas frente a propiedades reactivas 1:04:43 Módulo 2: Alerta: estado local, show y bool.then 1:09:48 Módulo 2: Avatar: iniciales e into_any 1:14:37 Módulo 2: Resumen y ejercicios 1:17:58 Módulo 3: Modelo mental de reactividad (señales, (Notas, Efectos) 1:21:26 Módulo 3: Contador — Señal + Nota + Efecto 1:27:19 Módulo 3: Convertidor de Temperatura — Señales Derivadas 1:33:13 Módulo 3: Contador de Palabras — Varias Notas a partir de una Señal 1:38:06 Módulo 3: Mezclador de Colores — Estilos Reactivos 1:43:11 Módulo 3: RwSignal, Efectos y el Experimento por Lotes 1:47:58 Módulo 3: Resumen, Errores Comunes y Cuestionario 1:51:39 Resumen de la Parte 1 y Vista Previa de la Parte 2 (Flujo de Control, Formularios, Enrutamiento) Lo que se construye en la Parte 1: • Módulo 1, Introducción: configuración del proyecto, mount_to_body, ¡la vista! Macro, componentes, props, listas y tu primera señal • Módulo 2, Componentes: Botón, Tarjeta, Insignia, Alerta y Avatar con props enum, valores predeterminados, callbacks, hijos, estado local, Show e into_any • Módulo 3, Reactividad: señales, señales derivadas, memos, efectos, RwSignal y batch, con convertidor de temperatura, contador de palabras y mezclador de colores Lo que podrás hacer después de esto: • Configurar un proyecto Rust + WebAssembly + Trunk y ejecutarlo en el navegador • Escribir componentes Leptos con props tipadas (obligatorias, opcionales y predeterminadas) • Pasar datos con props y enviar eventos con callbacks • Elegir entre una señal, una señal derivada, un memo y un efecto • Evitar el clásico error de reactividad de valor congelado Para quién es esto: Estudiantes de Rust que conocen los conceptos básicos (variables, funciones, estructuras, enums) y quieren crear aplicaciones web en Rust. Los principiantes absolutos en Leptos son bienvenidos. Cada nueva idea se explica con palabras sencillas. ── SOCIO ── CodeCrafters: crea tu propio Git, Redis, Docker y Shell desde cero en Rust: 👉 app.codecrafters.io ── PREGUNTAS FRECUENTES (FAQ) ── P: ¿Qué es Leptos? R: Leptos es un framework web reactivo de pila completa y granular para Rust. Se compila a WebAssembly para el navegador y también puede renderizar en el servidor. P: ¿Leptos usa un DOM virtual? R: No. Leptos rastrea qué partes de la página leen qué señales y actualiza solo esas partes cuando cambia una señal. P: ¿Qué es una señal en Leptos? R: Un valor reactivo con una parte de lectura y otra de escritura. Al leerlo dentro de un cierre, memo, efecto o la vista, se suscribe a sus cambios. P: ¿Cuál es la diferencia entre un memo y un efecto? R: Un memo es un valor derivado almacenado en caché que solo notifica a otros cuando su respuesta cambia. Un efecto se utiliza para efectos secundarios, como el registro o el guardado en el almacenamiento. P: ¿Qué versión de Rust necesito? R: Este curso utiliza Rust 1.89 o posterior. Leptos 0.8.22 requiere la versión 1.88 o posterior. P: ¿Qué es Trunk? R: Trunk es una herramienta de compilación y un servidor de desarrollo que compila Rust a WebAssembly y sirve la página con recarga en viv... [fr-FR] Cours complet Leptos Rust (Partie 1) : Créer des applications web réactives à partir de zéro Rust permet désormais de créer des sites web. Dans cette première partie, idéale pour les débutants, vous créerez trois modules Leptos complets de A à Z : un compteur de clics, une petite bibliothèque de composants et cinq mini-applications réactives. Environ deux heures de cours, avec des explications détaillées, des blagues et une explication de chaque ligne de code. Leptos est un framework web Rust full-stack offrant une réactivité fine et sans DOM virtuel. Ce cours a été testé avec Leptos 0.8.22, Rust 1.89+ (version Trunk) et la cible wasm32-unknown-unknown. 💻 Code source complet du cours (les 25 modules) : AarambhDevHub/leptos-full-course 🔥 Partie 2 (flux de contrôle, formulaires et événements, routage) : youtu.be 📚 Livre officiel Leptos : book.leptos.dev 🧱 Leptos sur GitHub : leptos-rs/leptos ── CHAPITRES VIDÉO (1 h 55) ── 00:00 Pourquoi développer des sites web en Rust est plus simple qu’il n’y paraît (Introduction à Leptos) 03:47 Partenaire : CodeCrafters — Créez votre propre Git, Redis et Docker en Rust 06:02 Plan du cours : 10 parties, 25 modules 09:58 Qu’est-ce que Leptos ? WebAssembly, réactivité fine, pas de DOM virtuel 15:46 Configuration : Rust, cible wasm32, tronc et visite du projet 22:42 Module 1 : main, mount_to_body et le hook Panic 26:37 Module 1 : La vue ! Macro et votre premier composant 31:08 Module 1 : Props — into, optional et Option 35:41 Module 1 : Rendu de listes avec iter, map et collect_view 38:52 Module 1 : Votre premier signal — Compteur de clics 46:28 Module 1 : Composition des composants et récapitulatif 49:17 Module 2 : L’importance des composants 51:21 Module 2 : Bouton — Props Enum, valeurs par défaut et rappels 58:56 Module 2 : Carte — Enfants, ChildrenFn et composition 1:02:18 Module 2 : Badge — Props statiques vs Props réactives 1:04:43 Module 2 : Alerte — État local, Show et bool.then 1:09:48 Module 2 : Avatar — Initiales et into_any 1:14:37 Module 2 : Récapitulatif et exercices 1:17:58 Module 3 : Modèle mental de réactivité (Signaux, Mémos, Effets) 1:21:26 Module 3 : Compteur — Signal + Mémo + Effet 1:27:19 Module 3 : Convertisseur de température — Signaux dérivés 1:33:13 Module 3 : Compteur de mots — Plusieurs mémos à partir d’un seul signal 1:38:06 Module 3 : Mélangeur de couleurs — Styles réactifs 1:43:11 Module 3 : RwSignal, Effets et expérience par lots 1:47:58 Module 3 : Récapitulatif, Erreurs courantes et Quiz 1:51:39 Récapitulatif de la partie 1 et aperçu de la partie 2 (Flux de contrôle, Formulaires, Routage) Ce que vous allez créer dans la partie 1 : • Module 1, Introduction : configuration du projet, mount_to_body, la vue ! Macros, composants, props, listes et votre premier signal • Module 2, Composants : Bouton, Carte, Badge, Alerte et Avatar avec props d'énumération, valeurs par défaut, callbacks, enfants, état local, `Show` et `into_any` • Module 3, Réactivité : signaux, signaux dérivés, mémos, effets, `RwSignal` et batch, avec un convertisseur de température, un compteur de mots et un mélangeur de couleurs Ce que vous serez capable de faire après ce module : • Configurer un projet Rust + WebAssembly + Trunk et l'exécuter dans un navigateur • Écrire des composants Leptos avec des props typées (obligatoires, optionnelles et par défaut) • Transmettre des données avec les props et envoyer des événements avec les callbacks • Choisir entre un signal, un signal dérivé, un mémo et un effet • Éviter le bug classique de réactivité lié aux valeurs figées À qui s'adresse ce module : Aux personnes apprenant Rust qui connaissent les bases (variables, fonctions, structures, énumérations) et qui souhaitent développer des applications web en Rust. Les débutants complets en Leptos sont les bienvenus. Chaque nouvelle notion est expliquée clairement. ── PARTENAIRE ── CodeCrafters : créez votre propre Git, Redis, Docker et Shell en Rust : 👉 app.codecrafters.io ── QUESTIONS/RÉPONSES RAPIDES (FAQ) ── Q : Qu’est-ce que Leptos ? R : Leptos est un framework web réactif complet et précis pour Rust. Il est compilé en WebAssembly pour le navigateur et peut également être rendu côté serveur. Q : Leptos utilise-t-il un DOM virtuel ? R : Non. Leptos suit quelles parties de la page lisent quels signaux et met à jour uniquement ces parties lorsqu’un signal change. Q : Qu’est-ce qu’un signal dans Leptos ? R : Une valeur réactive avec une partie en lecture et une partie en écriture. La lecture d’un signal dans une fermeture, un mémo, un effet ou la vue permet de s’abonner à ses changements. Q : Quelle est la différence entre un mémo et un effet ? R : Un mémo est une valeur dérivée mise en cache qui notifie les autres uniquement lorsque sa valeur change. Un effet sert à produire des effets de bord, comme la journalisation ou l’enregistrement dans le stockage. Q : Quelle version de Rust me faut-il ? R : Ce cours utilise Rust 1.89 o... [hi] Leptos Rust फुल कोर्स (भाग 1): शून्य से रिएक्टिव वेब ऐप्स बनाएं अब रस्ट से वेबसाइटें बनाई जा सकती हैं। इस शुरुआती स्तर के पहले भाग में, आप तीन पूर्ण लेप्टोस मॉड्यूल शुरू से बनाएंगे: एक क्लिक काउंटर, एक छोटी कंपोनेंट लाइब्रेरी और पांच रिएक्टिव मिनी ऐप्स। लगभग दो घंटे का यह कोर्स धीमी गति से व्याख्याओं, चुटकुलों और कोड की हर पंक्ति की विस्तृत जानकारी के साथ पूरा होगा। लेप्टोस एक फुल-स्टैक रस्ट वेब फ्रेमवर्क है जिसमें सूक्ष्म प्रतिक्रियाशीलता है और वर्चुअल DOM नहीं है। इस कोर्स का परीक्षण लेप्टोस 0.8.22, रस्ट 1.89+, ट्रंक और wasm32-unknown-unknown टारगेट पर किया गया है। 💻 पूरे कोर्स का कोड (सभी 25 मॉड्यूल): AarambhDevHub/leptos-full-course 🔥 भाग 2 (कंट्रोल फ्लो, फॉर्म और इवेंट, राउटिंग): youtu.be 📚 आधिकारिक लेप्टोस पुस्तक: book.leptos.dev 🧱 GitHub पर लेप्टोस: leptos-rs/leptos ── वीडियो अध्याय (1 घंटा 55 मिनट) ── 00:00 रस्ट में वेबसाइट बनाना जितना आप सोचते हैं उससे कहीं ज़्यादा आसान क्यों है (लेप्टोस का परिचय) 03:47 पार्टनर: कोडक्राफ्टर्स — रस्ट में अपना खुद का गिट, रेडिस, डॉकर बनाएं 06:02 कोर्स रोडमैप: 10 भाग, 25 मॉड्यूल 09:58 लेप्टोस क्या है? वेबअसेंबली, फाइन-ग्रेन्ड रिएक्टिविटी, कोई वर्चुअल DOM नहीं 15:46 सेटअप: रस्ट, wasm32 टारगेट, ट्रंक और प्रोजेक्ट टूर 22:42 मॉड्यूल 1: मेन, माउंट_टू_बॉडी और पैनिक हुक 26:37 मॉड्यूल 1: व्यू! मैक्रो और आपका पहला कंपोनेंट 31:08 मॉड्यूल 1: प्रॉप्स — into, optional और Option 35:41 मॉड्यूल 1: iter, map और collect_view के साथ सूचियों को रेंडर करना 38:52 मॉड्यूल 1: आपका पहला सिग्नल — क्लिक काउंटर 46:28 मॉड्यूल 1: कंपोनेंट कंपोज़िशन और सारांश 49:17 मॉड्यूल 2: कंपोनेंट क्यों महत्वपूर्ण हैं 51:21 मॉड्यूल 2: बटन — Enum प्रॉप्स, डिफ़ॉल्ट और कॉलबैक 58:56 मॉड्यूल 2: कार्ड — चिल्ड्रन, चिल्ड्रनफ़न और कंपोज़िशन 1:02:18 मॉड्यूल 2: बैज — स्टैटिक प्रॉप्स बनाम रिएक्टिव प्रॉप्स 1:04:43 मॉड्यूल 2: अलर्ट — लोकल स्टेट, Show और bool.then 1:09:48 मॉड्यूल 2: अवतार — Initials और into_any 1:14:37 मॉड्यूल 2: सारांश और अभ्यास 1:17:58 मॉड्यूल 3: रिएक्टिविटी मेंटल मॉडल (सिग्नल, मेमो, प्रभाव) 1:21:26 मॉड्यूल 3: काउंटर — सिग्नल + मेमो + प्रभाव 1:27:19 मॉड्यूल 3: तापमान कनवर्टर — व्युत्पन्न सिग्नल 1:33:13 मॉड्यूल 3: वर्ड काउंटर — एक सिग्नल से कई मेमो 1:38:06 मॉड्यूल 3: कलर मिक्सर — रिएक्टिव स्टाइल 1:43:11 मॉड्यूल 3: RwSignal, प्रभाव और बैच प्रयोग 1:47:58 मॉड्यूल 3: सारांश, सामान्य गलतियाँ और प्रश्नोत्तरी 1:51:39 भाग 1 का सारांश और भाग 2 का पूर्वावलोकन (कंट्रोल फ्लो, फॉर्म, रूटिंग) भाग 1 में आप क्या बनाएंगे: • मॉड्यूल 1, परिचय: प्रोजेक्ट सेटअप, mount_to_body, व्यू! मैक्रो, कंपोनेंट्स, प्रॉप्स, सूचियाँ और आपका पहला सिग्नल • मॉड्यूल 2, कंपोनेंट्स: बटन, कार्ड, बैज, अलर्ट और अवतार, एनम प्रॉप्स, डिफॉल्ट्स, कॉलबैक, चिल्ड्रन, लोकल स्टेट, शो और into_any के साथ • मॉड्यूल 3, रिएक्टिविटी: सिग्नल, डिराइव्ड सिग्नल, मेमो, इफेक्ट्स, RwSignal और बैच, तापमान कनवर्टर, वर्ड काउंटर और कलर मिक्सर के साथ इसके बाद आप क्या कर पाएंगे: • रस्ट + वेबअसेंबली + ट्रंक प्रोजेक्ट सेट अप करें और इसे ब्राउज़र में चलाएँ • टाइप किए गए प्रॉप्स (आवश्यक, वैकल्पिक और डिफ़ॉल्ट) के साथ लेप्टोस कंपोनेंट्स लिखें • प्रॉप्स के साथ डेटा पास करें और कॉलबैक के साथ इवेंट भेजें • सिग्नल, डिराइव्ड सिग्नल, मेमो और इफेक्ट में से चुनें • क्लासिक फ्रोजन-वैल्यू रिएक्टिविटी बग से बचें यह किसके लिए है: रस्ट सीखने वाले जो बुनियादी बातें (वेरिएबल, फ़ंक्शन, स्ट्रक्चर, एनम) जानते हैं और वेब ऐप्स बनाना चाहते हैं रस्ट में। लेप्टोस के बिल्कुल नए सीखने वालों का स्वागत है। हर नए विचार को सरल शब्दों में समझाया जाता है। ── पार्टनर ── कोडक्राफ्टर्स: रस्ट में स्क्रैच से अपना खुद का गिट, रेडिस, डॉकर और शेल बनाएं: 👉 app.codecrafters.io ── त्वरित उत्तर (अक्सर पूछे जाने वाले प्रश्न) ── प्रश्न: लेप्टोस क्या है? उत्तर: लेप्टोस रस्ट के लिए एक फुल-स्टैक, फाइन-ग्रेन्ड रिएक्टिव वेब फ्रेमवर्क है। यह ब्राउज़र के लिए वेबअसेंबली में कंपाइल होता है और सर्वर पर भी रेंडर कर सकता है। प्रश्न: क्या लेप्टोस वर्चुअल DOM का उपयोग करता है? उत्तर: नहीं। लेप्टोस ट्रैक करता है कि पेज के कौन से हिस्से कौन से सिग्नल पढ़ते हैं और सिग्नल में बदलाव होने पर केवल उन्हीं हिस्सों को अपडेट करता है। प्रश्न: लेप्टोस में सिग्नल क्या है? ए: एक प्रतिक्रियाशील मान जिसमें पढ़ने और लिखने दोनों भाग होते हैं। क्लोज़र, मेमो, इफ़ेक्ट या व्यू के अंदर इसे पढ़ने से इसके परिवर्तनों की सदस्यता ली जाती है। प्रश्न: मेमो और इफ़ेक्ट में क्या अंतर है? उत्तर: मेमो एक कैश्ड व्युत्पन्न मान है जो केवल तभी दूसरों को सूचित करता है जब उसका उत्तर बदलता है। इफ़ेक्ट का उपयोग लॉगिंग या स्टोरेज में सहेजने जैसे साइड इफ़ेक्ट के लिए किया जाता है। प्रश्न: मुझे रस्ट का कौन सा संस्करण चाहिए? उत्तर: यह कोर्स रस्ट 1.89 या उससे नए संस्करण का उपयोग करता है। लेप्टोस 0.8.22 को स्वयं 1.88 या उससे नए संस्करण की आवश्यकता है। प्रश्न: ट्रंक क्या है? उत्तर: ट्रंक एक बिल्ड टूल और डेवलपर सर्वर है जो रस्ट को वेबअसेंबली में कंपाइल करता है और क्लाइंट-साइड लेप्टोस ऐप्स के लिए लाइव रीलोड के साथ आपका पेज सर्व करता है। ── समुदाय और लिंक ── → GitHub: github.com/AarambhDevHub → Discord: discord.gg → LinkedIn: linkedin.com → सहायता: buymeacoffee.com #Leptos #Rust #WebAssembly #RustLang #WebDevelopment #AarambhDevHub [id] Kursus Lengkap Leptos Rust (Bagian 1): Membangun Aplikasi Web Reaktif dari Nol Rust kini dapat membangun situs web. Dalam Bagian 1 yang ramah bagi pemula ini, Anda akan membangun tiga modul Leptos lengkap dari awal: penghitung klik, pustaka komponen kecil, dan lima aplikasi mini reaktif. Sekitar dua jam, penjelasan perlahan, termasuk lelucon, dan setiap baris kode dijelaskan. Leptos adalah kerangka kerja web Rust full-stack dengan reaktivitas yang detail dan tanpa DOM virtual. Kursus ini diuji pada Leptos 0.8.22 dengan Rust 1.89+, Trunk dan target wasm32-unknown-unknown. 💻 Kode kursus lengkap (semua 25 modul): AarambhDevHub/leptos-full-course 🔥 Bagian 2 (alur kontrol, formulir dan event, routing): youtu.be 📚 Buku resmi Leptos: book.leptos.dev 🧱 Leptos di GitHub: leptos-rs/leptos ── BAB VIDEO (1 jam 55 menit) ── 00:00 Mengapa Menulis Situs Web di Rust Lebih Mudah dari yang Anda Bayangkan (Pengantar Leptos) 03:47 Mitra: CodeCrafters — Bangun Git, Redis, Docker Anda Sendiri di Rust 06:02 Peta Jalan Kursus: 10 Bagian, 25 Modul 09:58 Apa Itu Leptos? WebAssembly, Reaktivitas Tingkat Halus, Tanpa Virtual DOM 15:46 Pengaturan: Rust, Target wasm32, Trunk & Tur Proyek 22:42 Modul 1: utama, mount_to_body & Kait Panik 26:37 Modul 1: Tampilan! Makro & Komponen Pertama Anda 31:08 Modul 1: Props — into, optional & Option 35:41 Modul 1: Merender Daftar dengan iter, map & collect_view 38:52 Modul 1: Sinyal Pertama Anda — Penghitung Klik 46:28 Modul 1: Komposisi Komponen & Rekap 49:17 Modul 2: Mengapa Komponen Penting 51:21 Modul 2: Tombol — Props Enum, Default & Callback 58:56 Modul 2: Kartu — Children, ChildrenFn & Komposisi 1:02:18 Modul 2: Lencana — Props Statis vs Props Reaktif 1:04:43 Modul 2: Peringatan — Status Lokal, Tampilkan & bool.then 1:09:48 Modul 2: Avatar — Inisial & into_any 1:14:37 Modul 2: Rekap & Latihan 1:17:58 Modul 3: Model Mental Reaktivitas (Sinyal, Memo, Efek) 1:21:26 Modul 3: Penghitung — Sinyal + Memo + Efek 1:27:19 Modul 3: Konverter Suhu — Sinyal Turunan 1:33:13 Modul 3: Penghitung Kata — Banyak Memo dari Satu Sinyal 1:38:06 Modul 3: Pencampur Warna — Gaya Reaktif 1:43:11 Modul 3: RwSignal, Efek & Eksperimen Batch 1:47:58 Modul 3: Rekap, Kesalahan Umum & Kuis 1:51:39 Rekap Bagian 1 & Pratinjau Bagian 2 (Alur Kontrol, Formulir, Perutean) Apa yang Anda bangun di Bagian 1: • Modul 1, Pendahuluan: pengaturan proyek, mount_to_body, tampilan! makro, komponen, props, daftar, dan sinyal pertama Anda • Modul 2, Komponen: Tombol, Kartu, Lencana, Peringatan, dan Avatar dengan props enum, default, callback, children, state lokal, Show, dan into_any • Modul 3, Reaktivitas: sinyal, sinyal turunan, memo, efek, RwSignal, dan batch, dengan konverter suhu, penghitung kata, dan pencampur warna Apa yang akan dapat Anda lakukan setelah ini: • Menyiapkan proyek Rust + WebAssembly + Trunk dan menjalankannya di browser • Menulis komponen Leptos dengan props bertipe (wajib, opsional, dan default) • Meneruskan data ke bawah dengan props dan mengirimkan event ke atas dengan callback • Memilih antara sinyal, sinyal turunan, memo, dan efek • Menghindari bug reaktivitas nilai beku klasik Untuk siapa ini: Pembelajar Rust yang mengetahui dasar-dasarnya (variabel, fungsi, struct, enum) dan ingin membangun aplikasi web di Rust. Pemula yang belum pernah menggunakan Leptos sebelumnya dipersilakan. Setiap ide baru dijelaskan dengan kata-kata sederhana. ── MITRA ── CodeCrafters: bangun Git, Redis, Docker, dan Shell Anda sendiri dari awal di Rust: 👉 app.codecrafters.io ── JAWABAN CEPAT (FAQ) ── T: Apa itu Leptos? J: Leptos adalah kerangka kerja web reaktif full-stack dan detail untuk Rust. Ia dikompilasi ke WebAssembly untuk browser dan juga dapat di-render di server. T: Apakah Leptos menggunakan DOM virtual? J: Tidak. Leptos melacak bagian mana dari halaman yang membaca sinyal mana dan hanya memperbarui bagian tersebut ketika sinyal berubah. T: Apa itu sinyal di Leptos? A: Nilai reaktif dengan bagian baca dan bagian tulis. Membacanya di dalam closure, memo, effect, atau view akan berlangganan perubahannya. T: Apa perbedaan antara memo dan effect? J: Memo adalah nilai turunan yang di-cache yang hanya memberi tahu yang lain ketika jawabannya berubah. Effect digunakan untuk efek samping, seperti logging atau menyimpan ke penyimpanan. T: Versi Rust mana yang saya butuhkan? J: Kursus ini menggunakan Rust 1.89 atau yang lebih baru. Leptos 0.8.22 sendiri membutuhkan 1.88 atau yang lebih baru. T: Apa itu Trunk? J: Trunk adalah alat build dan server pengembangan yang mengkompilasi Rust ke WebAssembly dan menyajikan halaman Anda dengan live reload untuk aplikasi Leptos sisi klien. ── KOMUNITAS & TAUTAN ── → GitHub: github.com/AarambhDevHub → Discord: discord.gg → LinkedIn: linkedin.com → Dukungan: buymeacoffee.com #Leptos #Rust #WebAssembly #RustLang #WebDevelopment #AarambhDevHub [it] Corso completo di Leptos Rust (Parte 1): Crea web app reattive da zero Ora è possibile creare siti web con Rust. In questa prima parte, pensata per i principianti, creerete da zero tre moduli Leptos completi: un contatore di clic, una piccola libreria di componenti e cinque mini-applicazioni reattive. La durata è di circa due ore, con spiegazioni dettagliate, battute incluse e ogni riga di codice spiegata. Leptos è un framework web full-stack per Rust con reattività granulare e senza Virtual DOM. Questo corso è stato testato con Leptos 0.8.22, Rust 1.89+, Trunk e target wasm32-unknown-unknown. 💻 Codice completo del corso (tutti i 25 moduli): AarambhDevHub/leptos-full-course 🔥 Parte 2 (flusso di controllo, moduli ed eventi, routing): youtu.be 📚 Libro ufficiale di Leptos: book.leptos.dev 🧱 Leptos su GitHub: leptos-rs/leptos ── CAPITOLI DEL VIDEO (1h 55m) ── 00:00 Perché scrivere siti web in Rust è più facile di quanto pensi (Introduzione a Leptos) 03:47 Partner: CodeCrafters — Crea il tuo Git, Redis, Docker in Rust 06:02 Struttura del corso: 10 parti, 25 moduli 09:58 Cos'è Leptos? WebAssembly, reattività a grana fine, nessun DOM virtuale 15:46 Configurazione: Rust, target wasm32, trunk e tour del progetto 22:42 Modulo 1: main, mount_to_body e il Panic Hook 26:37 Modulo 1: La vista! Macro e il tuo primo componente 31:08 Modulo 1: Props — into, optional e Option 35:41 Modulo 1: Rendering di liste con iter, map e collect_view 38:52 Modulo 1: Il tuo primo segnale — Contatore clic 46:28 Modulo 1: Composizione dei componenti e riepilogo 49:17 Modulo 2: Perché i componenti sono importanti 51:21 Modulo 2: Pulsante — Props enum, valori predefiniti e callback 58:56 Modulo 2: Card — Children, ChildrenFn e composizione 1:02:18 Modulo 2: Badge — Props statiche vs Props reattive 1:04:43 Modulo 2: Alert — Stato locale, Show e bool.then 1:09:48 Modulo 2: Avatar — Iniziali e into_any 1:14:37 Modulo 2: Riepilogo ed esercizi 1:17:58 Modulo 3: Modello mentale di reattività (segnali, promemoria, Effetti) 1:21:26 Modulo 3: Contatore — Segnale + Memo + Effetto 1:27:19 Modulo 3: Convertitore di temperatura — Segnali derivati 1:33:13 Modulo 3: Contatore di parole — Molte memo da un segnale 1:38:06 Modulo 3: Mixer di colori — Stili reattivi 1:43:11 Modulo 3: RwSignal, effetti e l'esperimento batch 1:47:58 Modulo 3: Riepilogo, errori comuni e quiz 1:51:39 Riepilogo della Parte 1 e anteprima della Parte 2 (flusso di controllo, moduli, routing) Cosa si costruisce nella Parte 1: • Modulo 1, Introduzione: configurazione del progetto, mount_to_body, la vista! Macro, componenti, props, liste e il tuo primo segnale • Modulo 2, Componenti: Button, Card, Badge, Alert e Avatar con props enum, valori predefiniti, callback, children, local state, Show e into_any • Modulo 3, Reattività: segnali, segnali derivati, memo, effetti, RwSignal e batch, con un convertitore di temperatura, un contatore di parole e un mixer di colori Cosa sarai in grado di fare dopo: • Configurare un progetto Rust + WebAssembly + Trunk ed eseguirlo nel browser • Scrivere componenti Leptos con props tipizzate (obbligate, opzionali e predefinite) • Passare dati verso il basso con le props e inviare eventi verso l'alto con i callback • Scegliere tra un segnale, un segnale derivato, un memo e un effetto • Evitare il classico bug di reattività del valore congelato A chi è rivolto: Studenti di Rust che conoscono le basi (variabili, funzioni, struct, enum) e vogliono creare applicazioni web in Rust. Anche i principianti assoluti di Leptos sono benvenuti. Ogni nuova idea viene spiegata in modo semplice e chiaro. ── PARTNER ── CodeCrafters: crea il tuo Git, Redis, Docker e Shell da zero in Rust: 👉 app.codecrafters.io ── RISPOSTE RAPIDE (FAQ) ── D: Cos'è Leptos? R: Leptos è un framework web reattivo full-stack e granulare per Rust. Compila in WebAssembly per il browser e può anche eseguire il rendering sul server. D: Leptos utilizza un DOM virtuale? R: No. Leptos tiene traccia di quali parti della pagina leggono quali segnali e aggiorna solo quelle parti quando un segnale cambia. D: Cos'è un segnale in Leptos? R: Un valore reattivo con una parte di lettura e una parte di scrittura. Leggere un valore all'interno di una closure, un memo, un effect o una view significa sottoscriverne le modifiche. D: Qual è la differenza tra un memo e un effect? R: Un memo è un valore derivato memorizzato nella cache che notifica agli altri solo quando il suo valore cambia. Un effect serve per gli effetti collaterali, come la registrazione o il salvataggio nello storage. D: Quale versione di Rust mi serve? R: Questo corso utilizza Rust 1.89 o versioni successive. Leptos 0.8.22 stesso richiede la versione 1.88 o successiva. D: Cos'è Trunk? R: Trunk è uno strumento di build e un server di sviluppo che compila Rust in WebAssembly e serve la tua pagina con ricaricamento automatico per le applicazioni Leptos lato client. ── COMMUNITY E LINK ── → GitHub: h... [iw] קורס מלא ב-Leptos Rust (חלק 1): בניית אפליקציות אינטרנט ריאקטיביות מאפס Rust יכול לבנות אתרים עכשיו. בחלק 1 זה, ידידותי למתחילים, תבנו שלושה מודולים שלמים של Leptos מאפס: מונה קליקים, ספריית רכיבים קטנה וחמש מיני-אפליקציות ריאקטיביות. כשעתיים, הסברים איטיים, בדיחות כלולות וכל שורת קוד מוסברת. Leptos הוא מסגרת אינטרנט Rust מלאה עם ריאקטיביות מדויקת וללא DOM וירטואלי. קורס זה נבדק על Leptos 0.8.22 עם Rust 1.89+, Trunk והיעד wasm32-unknown-unknown. 💻 קוד הקורס המלא (כל 25 המודולים): AarambhDevHub/leptos-full-course 🔥 חלק 2 (שליטה על זרימת התרומה, טפסים ואירועים, ניתוב): youtu.be 📚 ספר Leptos רשמי: book.leptos.dev 🧱 Leptos ב-GitHub: leptos-rs/leptos ── פרקי וידאו (שעה ו-55 דקות) ── 00:00 למה כתיבת אתרים ב-Rust קלה יותר ממה שאתם חושבים (מבוא ל-Leptos) 03:47 שותף: CodeCrafters — בנה את ה-Git, Redis, Docker שלך ב-Rust 06:02 מפת דרכים לקורס: 10 חלקים, 25 מודולים 09:58 מה זה Leptos? WebAssembly, תגובתיות מדויקת, ללא DOM וירטואלי 15:46 התקנה: חלודה, יעד wasm32, תא מטען וסיור בפרויקט 22:42 מודול 1: main, mount_to_body והוק פאניקה 26:37 מודול 1: הנוף! מאקרו והרכיב הראשון שלך 31:08 מודול 1: אביזרים - into, אופציונלי ואופציה 35:41 מודול 1: רינדור רשימות עם iter, map ו-collect_view 38:52 מודול 1: האות הראשון שלך - מונה קליקים 46:28 מודול 1: הרכב רכיבים וסיכום 49:17 מודול 2: מדוע רכיבים חשובים 51:21 מודול 2: כפתור - ספירת אביזרים, ברירות מחדל וקריאה חוזרת 58:56 מודול 2: כרטיס - ילדים, ChildrenFn וקומפוזיציה 1:02:18 מודול 2: תג - אביזרים סטטיים לעומת אביזרים תגובתיים 1:04:43 מודול 2: התראה - מצב מקומי, הצג ו-bool.then 1:09:48 מודול 2: אווטאר - ראשי תיבות ו-into_any 1:14:37 מודול 2: סיכום ותרגילים 1:17:58 מודול 3: מודל מנטלי תגובתיות (אותות, תזכירים, אפקטים) 1:21:26 מודול 3: מונה - אות + תזכיר + אפקט 1:27:19 מודול 3: ממיר טמפרטורה - אותות נגזרים 1:33:13 מודול 3: מונה מילים - תזכירים רבים מאות אחד 1:38:06 מודול 3: מערבב צבעים - סגנונות ריאקטיביים 1:43:11 מודול 3: אות Rw, אפקטים וניסוי האצווה 1:47:58 מודול 3: סיכום, טעויות נפוצות ובוחן 1:51:39 חלק 1 סיכום וחלק 2 תצוגה מקדימה (זרימת בקרה, טפסים, ניתוב) מה אתם בונים בחלק 1: • מודול 1, מבוא: הגדרת פרויקט, mount_to_body, התצוגה! מאקרו, רכיבים, אביזרים, רשימות והאות הראשון שלך • מודול 2, רכיבים: כפתור, כרטיס, תג, התראה ואווטאר עם אביזרים של enum, ברירות מחדל, callbacks, ילדים, מצב מקומי, Show ו-into_any • מודול 3, תגובתיות: אותות, אותות נגזרים, תזכירים, אפקטים, RwSignal ו-batch, עם ממיר טמפרטורה, מונה מילים ומערבב צבעים מה תוכל לעשות לאחר מכן: • להגדיר פרויקט Rust + WebAssembly + Trunk ולהריץ אותו בדפדפן • לכתוב רכיבי Leptos עם אביזרים מודפסים (חובה, אופציונלי וברירת מחדל) • להעביר נתונים למטה עם אביזרים ולשלוח אירועים למעלה עם callbacks • לבחור בין אות, אות נגזר, תזכיר ואפקט • להימנע מבאג התגובתיות הקלאסי של ערך קפוא למי זה מיועד: לומדי Rust שיודעים את היסודות (משתנים, פונקציות, מבנים, enums) ורוצים לבנות אפליקציות אינטרנט ב-Rust. מתחילים גמורים של Leptos יתקבלו בברכה. כל רעיון חדש מוסבר במילים פשוטות. ── שותף ── CodeCrafters: בנו Git, Redis, Docker ו-Shell משלכם מאפס ב-Rust: 👉 app.codecrafters.io ── תשובות מהירות (FAQ) ── ש: מה זה Leptos? ת: Leptos הוא מסגרת אינטרנט ריאקטיבית מלאה ומעודכנת עבור Rust. היא מתקמפלת ל-WebAssembly עבור הדפדפן ויכולה גם להרינדר על השרת. ש: האם Leptos משתמשת ב-DOM וירטואלי? ת: לא. Leptos עוקב אחר אילו חלקים בדף קוראים איזה אותות ומעדכן רק את החלקים האלה כאשר אות משתנה. ש: מהו אות ב-Leptos? ת: ערך ריאקטיבי עם חצי קריאה וחצי כתיבה. קריאתו בתוך סגירה, תזכיר, אפקט או התצוגה נרשמת לשינויים שלו. ש: מה ההבדל בין תזכיר לאפקט? ת: תזכיר הוא ערך נגזר המאוחסן במטמון שמודיע לאחרים רק כאשר התשובה שלו משתנה. אפקט מיועד לתופעות לוואי, כמו רישום או שמירה באחסון. ש: איזו גרסת Rust אני צריך? ת: קורס זה משתמש ב-Rust 1.89 או גרסה חדשה יותר. Leptos 0.8.22 עצמו זקוק לגרסה 1.88 או גרסה חדשה יותר. ש: מהו Trunk? ת: Trunk הוא כלי בנייה ושרת פיתוח שמקמפל Rust ל-WebAssembly ומגיש לדף שלך טעינה חיה עבור אפליקציות Leptos בצד הלקוח. ── קהילה וקישורים ── → גיטהאב: github.com/AarambhDevHub → דיסקורד: discord.gg → לינקדאין: linkedin.com → תמיכה: buymeacoffee.com #לפטוס #חלודה #הרכבת_אתרים #RustLang #פיתוח_אתרים #AarambhDevHub [ja] Leptos Rust完全講座（第1回）：ゼロから学ぶリアクティブWebアプリ開発 Rustでウェブサイトを構築できるようになりました。この初心者向けパート1では、クリックカウンター、小さなコンポーネントライブラリ、そして5つのリアクティブなミニアプリという3つのLeptosモジュールをゼロから構築します。所要時間は約2時間。ゆっくりとした説明、ユーモアを交えながら、コードのすべての行を解説します。 Leptosは、きめ細かなリアクティビティと仮想DOMを持たないフルスタックのRustウェブフレームワークです。このコースは、Leptos 0.8.22、Rust 1.89+、Trunk、そしてwasm32-unknown-unknownターゲットで動作確認済みです。 💻 全コースコード（全25モジュール）：AarambhDevHub/leptos-full-course 🔥 パート2（制御フロー、フォームとイベント、ルーティング）：youtu.be 📚 Leptos公式書籍：book.leptos.dev 🧱 GitHub上のLeptos：http

@dzhng if you need to deploy with wasm you can use leptos_wasi : codeitlikemiley/leptos_wasi i also maintained the main repo: leptos-rs/leptos_wasi but it slow to get approved by the other co-maintainer that my new features added balloned so i maintain my own now.