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 = "my title"
  }
  render(){
    return(
      <b> test </b>
    )
  }
}

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

index.html
index.html
 <meta name="google-site-verification" content="aojEK " />  //google verification
 <meta name="fontiran.com:license" content="xxxxxx" /> // license
<meta name="samandehi" content="475376701" /> 


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

۱ - The Open Graph protocol //ogp meta

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

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


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


<meta name="twitter:site" [email protected]">
<meta property="fb:app_id" content="your_app_id" />

این همه توضیح دادم تازه رسیدیم اول خط و بریم سراغ 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="%s | MyAwesomeWebsite.com" >
            <title>Nested Title</title>
        </Helmet>

        outputs:

        <head>
            <title>Nested Title | MyAwesomeWebsite.com</title>
        </head>
    */}
    titleTemplate="MySite.com - %s"

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

        <Helmet
            defaultTitle="My Site"
            titleTemplate="My Site - %s"
        />

        outputs:
        <head>
            <title>My Site</title>
        </head>
    */}
    defaultTitle="My Default Title"

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

    {/* body attributes */}
    <body className="root" />

    {/* title attributes and value */}
    <title itemProp="name" lang="en">My Plain Title or {`dynamic`} title</title>

    {/* base element */}
    <base target="_blank" href="http://mysite.com/" />

    {/* multiple meta elements */}
    <meta name="description" content="Helmet application" />
    <meta property="og:type" content="article" />

    {/* multiple link elements */}
    <link rel="canonical" href="http://mysite.com/example" />
    <link rel="apple-touch-icon" href="http://mysite.com/img/apple-touch-icon-57x57.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="http://mysite.com/img/apple-touch-icon-72x72.png" />
    {locales.map((locale) => {
        <link rel="alternate" href="http://example.com/{locale}" hrefLang={locale} key={locale}/>
    })}

    {/* multiple script elements */}
    <script src="http://include.com/pathtojs.js" type="text/javascript" />

    {/* inline script elements */}
    <script type="application/ld+json">{`
        {
            [email protected]": "http://schema.org"
        }
    `}

    {/* noscript elements */}
    <noscript>{`
        <link rel="stylesheet" type="text/css" href="foo.css" />
    `}</noscript>

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

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