آموزش AstroJS 101: Frontends سریع و درخشان بسازید!

سرفصل ها و درس ها

اولین برنامه Astro خود را بسازید Build your first Astro Application

• (اضافی) PDF: Understanding Astro (500+ صفحه کتاب عملی برای Master Astro) (Extra) PDF: Understanding Astro (500+ Page Practical Book to Master Astro)

• نمای کلی پروژه Project overview

• NodeJS را نصب کنید و ویرایشگر کد خود را راه اندازی کنید Installing NodeJS and Setting up your Code Editor

• Astro Install Wizard The Astro Install Wizard

• درک ساختار پروژه Astro Understanding the Astro Project Structure

• مقدمه ای بر Astro Pages Introduction to Astro Pages

• آناتومی یک جزء اختر The Anatomy of an Astro Component

• سبک های مؤلفه Astro Astro Component Styles

• طرح بندی صفحات قابل استفاده مجدد Reusable Page Layouts

• بزرگ کردن نام اجزاء Capitalising component names

• تستی در مورد آنچه تاکنون آموخته اید A Test on What You've Learned So Far

• دستورالعمل جهانی سبک The global style directive

• فونت های سفارشی و CSS جهانی Custom fonts and global CSS

• اجزای مستقل Astro Independent Astro components

• افزودن اسکریپت های تعاملی به اجزای Astro Adding interactive scripts to Astro components

• اضافه کردن یک تغییر موضوع تعاملی Adding an Interactive theme toggle

• انتخابگر :global(). The :global() selector

• مدیریت رویداد Event Handling

• قالب بندی از طریق متغیرهای CSS Theming via CSS variables

• دسترسی به اشیاء کلاینت جهانی Accessing global client objects

• جادوی فیلمنامه ها The magic of scripts

• تستی در مورد آنچه تاکنون آموخته اید A Test on What You've Learned So Far

• استفاده از اسکریپت های درون خطی Leveraging inline scripts

• مراقب انتخابگرهای جهانی در اسکریپت ها باشید Beware of Global Selectors in Scripts

• استفاده از Markdown برای صفحات Using Markdown for Pages

• نحوه پیمایش بین صفحات Astro How to Navigate between Astro Pages

• یکنواختی از طریق Markdown Layouts Uniformity via Markdown Layouts

• نوشتن طرح‌بندی در Astro Composing Layouts in Astro

• لوازم جانبی Astro Component Astro Component Props

• استفاده از ویژگی های Markdown Frontmatter Leveraging Markdown Frontmatter Properties

• وضعیت ناوبری تعاملی با اسکریپت های Astro Interactive Navigation State with Astro Scripts

• آهنگسازی اجزای Astro Composing Astro Components

• تستی در مورد آنچه تاکنون آموخته اید A Test on What You've Learned So Far

• ناوبری کارت اجزای کامل Complete Component Card Navigation

• جریان داده الگوی Astro Astro's Template Flow of Data

• سمت تاریک تعریف:vars The Dark Side of define:vars

• نحوه بارگذاری چندین فایل در Astro - قسمت 1 How to Load Multiple Files in Astro - Part 1

• نحوه بارگذاری چندین فایل در Astro - قسمت 2 How to Load Multiple Files in Astro - Part 2

• تستی در مورد آنچه تاکنون آموخته اید A Test on What You've Learned So Far

• استقرار یک سایت استاتیک Astro Deploying a static Astro site

• وب سایت Astro ما چقدر سریع است؟ شوکر!!! How Fast is Our Astro Website? Shocker!!!

اجزای Astro در عمق Astro Components In-depth

• معرفی Introduction

• خستگی در زمان اجرا جاوا اسکریپت The Javascript Runtime Fatigue

• حذف زمان اجرا جاوا اسکریپت Ditching the Javascript Runtime

• Astro Component چیست؟ - قسمت 1 What is an Astro Component? - Part 1

• نصب دستی Astro و رندر HTML Manual Astro Installation and Rendering HTML

• سعادت ترکیب پذیری The Bliss of Composability

• عنصر ریشه و سبک های محلی در ترکیب بندی ها The Root Element and Local Styles in Compositions

• بالا بردن عنصر سر؟ Hoisting the Head Element?

• بازبینی بخش Component Script Revisiting the Component Script Section

• واکشی داده ها در Astro Fetching Data in Astro

• بازبینی بخش Component Template Revisiting the Component Template Section

• برچسب های پویا در Astro Dynamic Tags in Astro

• جادوی شکاف ها در Astro The Magic of Slots in Astro

• شباهت ها و تفاوت های JSX Similarities and Differences to JSX

• Astro Component چیست؟ نتیجه What is an Astro Component? Conclusion

جزیره اجزای خود را بسازید Build Your Own Component Island

• معرفی Introduction

• تاریخچه مختصری از اینکه چگونه به اینجا رسیدیم A Brief History of how we Got Here

• اصول رندر سمت مشتری (CSR) The Basics of Client-Side Rendering (CSR)

• مزایا و معایب رندر سمت مشتری The PROs and CONs of Client-Side Rendering

• اصول رندر سمت سرور (SSR) The Basics of Server-Side Rendering (SSR)

• مزایا و معایب رندر سمت سرور (SSR) The PROs and CONs of Server-Side Rendering (SSR)

• رندر سمت سرور با هیدراتاسیون سمت مشتری Server-Side Rendering with Client-Side Hydration

• مزایای رندر سمت سرور با هیدراتاسیون سمت مشتری The Pros of Server-Side Rendering With Client-Side Hydration

• هیدراتاسیون جزئی برای پیروزی Partial Hydration for the Win

• جزایر کامپوننت از کجا می آیند؟ Where do Component Islands Come From?

• اهداف و طراحی API Objectives and API Design

• شروع کار با جزیره کوچک Getting Started with Mini-island

• عنصر Content Template The Content Template element

• اجرای هیدراتاسیون Hydration Implementation

• اجرای جزئی هیدراسیون - قسمت 1 Partial Hydration Implementation - Part 1

• اجرای جزئی هیدراسیون - قسمت 2 Partial Hydration Implementation - Part 2

• مشتری: پیاده سازی هیدراتاسیون تنبل قابل مشاهده Client:visible Lazy Hydration Implementation

• مشتری: Media Lazy Hydration Implementation Client:media Lazy Hydration Implementation

• پشتیبانی از Vue Framework (مینی جزیره) Vue Framework Support (Mini-island)

• استفاده از چارچوب Preact (جزیره کوچک) Preact Framework Usage (Mini-island)

• نتیجه Conclusion

زندگی مخفی جزایر کامپوننت اختر The Secret Life of Astro Component Islands

• معرفی Introduction

• چه زمانی باید از یک کامپوننت چارچوب استفاده کنید؟ When Should you Use a Framework Component?

• مرحله 1: یک سایت Astro بسازید Step 1: Build an Astro site

• مرحله 2: یکپارچه سازی چارچوب را نصب کنید Step 2: Install the Framework Integration

• مراحل 3 و 4: کامپوننت Framework را بنویسید و رندر کنید Steps 3 & 4: Write and Render the Framework Component

• شروع با هیدراتاسیون مسئولانه Getting Started with Responsible Hydration

• مشتری: دستورالعمل بار The Client:load Directive

• راهنمای مشتری:فقط The Client:only Directive

• دستورالعمل Client:idle The Client:idle Directive

• دستورالعمل مشتری: قابل مشاهده The Client:visible Directive

• دستورالعمل مشتری: رسانه The Client:media Directive

• استفاده از چند فریمورک در Astro Using Multiple Frameworks in Astro

• اشتراک ایالت بین جزایر جزء Sharing State between Component Islands

• مدیریت لوازم (و کودکان) در اجزای چارچوب Handling Props (and Children) in Framework Components

• استفاده از اسلات های متعدد در اجزای چارچوب Using Multiple Slots in Framework Components

• اجزای چارچوب تودرتو Nested Framework Components

• Astro Island Gotchas Astro Island Gotchas

• نتیجه - چرا جزایر؟ Conclusion - Why islands?

نتیجه Conclusion

• ممنون و خداحافظ (فعلا) Thank you, and Goodbye (for now)