react-helmet | دسترسی به head در ری اکت

react-helmet
react-helmet


هفتمین رویداد دورهمی جامعه ری‌اکت ایران در ۴ شهر #اصفهان، #تهران، #کرمان و #مشهد در آخرین پنج‌شنبه مهرماه ۹۸ برگزار میشود.

این یه ارائه برای این دوری همیه که تصمیم گرفتم اینجا بنویسمش و بمونه.

در اخرم ویدیو اموزشی از این ارائه رو میزارم که دوستانی که دوست دارن ببینن.


‍ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
‍ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ


خوب react-helmet چیه و چرا باید ازش استفاده کنیم؟

ما میدونیم که ری اکت برای اجرا شدن نیاز به یه تگ داره تو index.html

ReactDOM.render(myelement, document.getElementById('root'));

خوب همینجوری که میبنید ری اکت میاد تو تگ root اجرا میشه و init میکنه.

یه مشکل اساسی که ما داریم این موقع اینه که دسترسی ما به قیمت head مناسب نیست. باید تکه تیکه با شی documnt تو جاوا اسکریپت کار کنیم.

مثلا اگه بخوایم عنوان صفحه رو تو یه کامپوننت عوض کنید باید اینجوری عمل کنیم.

class Title extends React.Component{
  componentDidMount(){
    document.title = &quotmy title&quot
  }
  render(){
    return(
      <b> test </b>
    )
  }
}

یا اگه meta ما ثابت هست و تو همه صفحه هات یکی هستش میتونیم تو public/index.html دستی این کدها رو بزاریم مثل:

index.html
index.html
 <meta name=&quotgoogle-site-verification&quot content=&quotaojEK &quot />  //google verification
 <meta name=&quotfontiran.com:license&quot content=&quotxxxxxx&quot /> // license
<meta name=&quotsamandehi&quot content=&quot475376701&quot />


مشکل اصلی زمانی هست که ما کلی تگ meta داریم که تو هر صفحه با هم فرق دارن . داینامیک هستن. مثلا:

۱ - The Open Graph protocol //ogp meta

۲ - متای شبکه های اجتماعی که صفحات اشتراک گذاری میشن //

<meta name="twitter:card" content="summary_large_image">


۳ - schema ها و کلی چیز های با اپ ما میاره مثل ستاره های گوگل رو...


<meta name=&quottwitter:site&quot content=&quot@website-username&quot>
<meta property=&quotfb:app_id&quot content=&quotyour_app_id&quot />

این همه توضیح دادم تازه رسیدیم اول خط و بریم سراغ react-helmet.

مثل همه پکیج ها میریم که نصبش کنیم

Yarn:

yarn add react-helmet

npm:

npm install --save react-helmet

خوب طبق مستنداتش این سری تگ هارو میتونه ساپورت کنه

  • base //یه تگ قدیمی که ادرس صفحه ای که توش هستیم رو میزاریم
  • bodyAttributes // با این تگ میتونیم ویژگی های کلاس و ... رو به body اضافه کنیم
  • htmlAttributes // این تگم مثل بالا میمونه اما رو تگ html
  • link // مثل favicon , css external
  • meta // کلا عاشق این تگ متام
  • script // js external
  • style // میشه دستی تگ style رو توش یه سری css گزاشت
  • title //اینم که عنوان صفحه است

این پکیج مال یه تیم به اسم nfl که وب سایت ورزش فوتبال امریکاییه

سایتشون با react هست و این پکیج رو نوشتن و منتشر کردن.


اینم یه نمونه راهنمای برای قسمت های مختلفی که میخواید استفاده کنید ازش.

<Helmet
    {/* (optional) set to false to disable string encoding (server-only) */}
    encodeSpecialCharacters={true} // 

    {/*
        (optional) Useful when you want titles to inherit from a template:

        <Helmet
            titleTemplate=&quot%s | MyAwesomeWebsite.com&quot >
            <title>Nested Title</title>
        </Helmet>

        outputs:

        <head>
            <title>Nested Title | MyAwesomeWebsite.com</title>
        </head>
    */}
    titleTemplate=&quotMySite.com - %s&quot

    {/*
        (optional) used as a fallback when a template exists but a title is not defined

        <Helmet
            defaultTitle=&quotMy Site&quot
            titleTemplate=&quotMy Site - %s&quot
        />

        outputs:
        <head>
            <title>My Site</title>
        </head>
    */}
    defaultTitle=&quotMy Default Title&quot

    {/* (optional) callback that tracks DOM changes */}
    ClientState={(newState, addedTags, removedTags) => console.log(newState, addedTags, removedTags)}
>
    {/* html attributes */}
    <html lang=&quoten&quot amp />

    {/* body attributes */}
    <body className=&quotroot&quot />

    {/* title attributes and value */}
    <title itemProp=&quotname&quot lang=&quoten&quot>My Plain Title or {`dynamic`} title</title>

    {/* base element */}
    <base target=&quot_blank&quot href=&quothttp://mysite.com/&quot />

    {/* multiple meta elements */}
    <meta name=&quotdescription&quot content=&quotHelmet application&quot />
    <meta property=&quotog:type&quot content=&quotarticle&quot />

    {/* multiple link elements */}
    <link rel=&quotcanonical&quot href=&quothttp://mysite.com/example&quot />
    <link rel=&quotapple-touch-icon&quot href=&quothttp://mysite.com/img/apple-touch-icon-57x57.png&quot />
    <link rel=&quotapple-touch-icon&quot sizes=&quot72x72&quot href=&quothttp://mysite.com/img/apple-touch-icon-72x72.png&quot />
    {locales.map((locale) => {
        <link rel=&quotalternate&quot href=&quothttp://example.com/{locale}&quot hrefLang={locale} key={locale}/>
    })}

    {/* multiple script elements */}
    <script src=&quothttp://include.com/pathtojs.js&quot type=&quottext/javascript&quot />

    {/* inline script elements */}
    <script type=&quotapplication/ld+json&quot>{`
        {
            &quot@context&quot: &quothttp://schema.org&quot
        }
    `}

    {/* noscript elements */}
    <noscript>{`
        <link rel=&quotstylesheet&quot type=&quottext/css&quot href=&quotfoo.css&quot />
    `}</noscript>

    {/* inline style elements */} 
    <style type=&quottext/css&quot>{`
        body {
            background-color: blue;
        }
    `}</style>
</Helmet>

در اخرم بگم که استفاده از این پکیج اجباری نیست. اما اگه لازم دارید تو گوگل رتبه ای داشته باشید حتما حتما حتما از این متا ها استفاده کنید