سید امید موسوی سید امید موسوی
مسیرراه‌ها
React 16x
پیش نیاز ها
کامپوننت ها
ترکیب کامپوننت ها
طراحی یک گرید
مسیریابی 
کار با فرم ها
ارتباط با سرور
احراز هویت و اعتبارسنجی کاربران 
React Hooks  
توزیع برنامه

مدیریت پیشرفته‌ی حالت در React با Redux و Mobx   

       Redux
       MobX  

مطالب تکمیلی 
    ‫۴ سال و ۱۱ ماه قبل، یکشنبه ۱۹ آبان ۱۳۹۸، ساعت ۱۹:۵۶
    وحید نصیری وحید نصیری
    نظرات مطالب
    Blazor 5x - قسمت ششم - مبانی Blazor - بخش 3 - چرخه‌های حیات کامپوننت‌ها
    بهبودهای Blazor 6x جهت تنظیم محتوای head صفحات

    در اینجا پیشتر روشی را مبتنی بر جاوا اسکریپت جهت تنظیم عنوان صفحات مشاهده کردید. در Blazor 6x دیگر به این راه حل نیازی نیست.

    کامپوننت جدید PageTitle  
    @page "/counter"
<PageTitle>Counter</PageTitle>
    با استفاده از این کامپوننت که آن‌را می‌توان در هر قسمتی، قرار داد، امکان به روز رسانی (حتی پویای) عنوان صفحه، وجود دارد. این کامپوننت در فضای نام Microsoft.AspNetCore.Components.Web قرار دارد و اگر بیش از یک PageTitle در یک کامپوننت تعریف شود، آخرین مورد آن پردازش خواهد شد.

    کامپوننت جدید HeadContent 
    @page "/counter"
<PageTitle>Counter</PageTitle>
<HeadContent>
  <meta name="description" content="Use this page to count things!" />
  <meta name="author" content="VahidN">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <link rel="sitemap" type="application/xml" title="Sitemap" href="@(NavigationManager.BaseUri)sitemap.xml" />
  <link rel="alternate" type="application/rss+xml" href="@(NavigationManager.BaseUri)atom.xml">
  <link rel="canonical" href="@(NavigationManager.BaseUri)good-content" />
  <meta name="robots" content="index, follow" />
</HeadContent>
    هدف از این کامپوننت جدید، تنظیم پویای محتوای تگ استاندارد head صفحه‌ی HTML نهایی است که در اینجا برای نمونه، چند تگ مخصوص SEO را به head اضافه می‌کند. همچنین باید دقت داشت که اگر بیش از یک HeadContent را تعریف کنیم، فقط آخرین مورد پردازش می‌شود.
    یک نکته: در اینجا هم می‌توان تگ استاندارد title را اضافه کرد. اما باید دقت داشت که در این حالت، صرفا کار افزودن این تگ صورت می‌گیرد؛ بدون توجه به وجود کامپوننت PageTitle تعریف شده. یعنی بیش از یک title در تگ head درج می‌شود که یک HTML غیرمعتبر به حساب خواهد آمد.

    کامپوننت جدید HeadOutlet
    این کامپوننت، کار پردازش دو کامپوننت یاد شده را انجام می‌دهد و محل تعریف آن، در فایل Program.cs است که در قالب پروژه‌های جدید Blazor 6x، به صورت خودکار، درج و تنظیم شده‌است:
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
    head::after در CSS استاندارد به معنای درج آن به عنوان آخرین فرزند گره انتخابی (head در اینجا) است.

    ‫۲ سال و ۱۰ ماه قبل، یکشنبه ۱۶ آبان ۱۴۰۰، ساعت ۱۴:۵۲