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

react-helmetهفتمین رویداد دورهمی جامعه ری‌اکت ایران در ۴ شهر #اصفهان، #تهران، #کرمان و #مشهد در آخرین پنج‌شنبه مهرماه ۹۸ برگزار میشود.این یه ارائه برای این دوری همیه که تصمیم گرفتم اینجا بنویسمش و بمونه.در اخرم ویدیو اموزشی از این ارائه رو میزارم که دوستانی که دوست دارن ببینن.‍ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــخوب react-helmet چیه و چرا باید ازش استفاده کنیم؟ما میدونیم که ری اکت برای اجرا شدن نیاز به یه تگ داره تو index.htmlReactDOM.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 <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-helmetnpm:npm install --save react-helmetخوب طبق مستنداتش این سری تگ هارو میتونه ساپورت کنهbase //یه تگ قدیمی که ادرس صفحه ای که توش هستیم رو میزاریمbodyAttributes // با این تگ میتونیم ویژگی های کلاس و ... رو به body اضافه کنیمhtmlAttributes // این تگم مثل بالا میمونه اما رو تگ htmllink // مثل 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> در اخرم بگم که استفاده از این پکیج اجباری نیست. اما اگه لازم دارید تو گوگل رتبه ای داشته باشید حتما حتما حتما از این متا ها استفاده کنید