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

Poria Sobhanlo — Wed, 16 Oct 2019 22:45:22 +0330

react-helmetهفتمین رویداد دورهمی جامعه ری‌اکت ایران در ۴ شهر #اصفهان، #تهران، #کرمان و #مشهد در آخرین پنج‌شنبه مهرماه ۹۸ برگزار میشود.این یه ارائه برای این دوری همیه که تصمیم گرفتم اینجا بنویسمش و بمونه.در اخرم ویدیو اموزشی از این ارائه رو میزارم که دوستانی که دوست دارن ببینن.‍ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــخوب react-helmet چیه و چرا باید ازش استفاده کنیم؟ما میدونیم که ری اکت برای اجرا شدن نیاز به یه تگ داره تو index.htmlReactDOM.render(myelement, document.getElementById('root'));خوب همینجوری که میبنید ری اکت میاد تو تگ root اجرا میشه و init میکنه.یه مشکل اساسی که ما داریم این موقع اینه که دسترسی ما به قیمت head مناسب نیست. باید تکه تیکه با شی documnt تو جاوا اسکریپت کار کنیم.مثلا اگه بخوایم عنوان صفحه رو تو یه کامپوننت عوض کنید باید اینجوری عمل کنیم.class Title extends React.Component{ componentDidMount(){ document.title = "my title" } render(){ return( test ) } }یا اگه meta ما ثابت هست و تو همه صفحه هات یکی هستش میتونیم تو public/index.html دستی این کدها رو بزاریم مثل:index.html //google verification // license مشکل اصلی زمانی هست که ما کلی تگ meta داریم که تو هر صفحه با هم فرق دارن . داینامیک هستن. مثلا:۱ - The Open Graph protocol //ogp meta۲ - متای شبکه های اجتماعی که صفحات اشتراک گذاری میشن // ۳ - schema ها و کلی چیز های با اپ ما میاره مثل ستاره های گوگل رو...این همه توضیح دادم تازه رسیدیم اول خط و بریم سراغ 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 هست و این پکیج رو نوشتن و منتشر کردن.اینم یه نمونه راهنمای برای قسمت های مختلفی که میخواید استفاده کنید ازش. Nested Title outputs: Nested Title | MyAwesomeWebsite.com */} titleTemplate="MySite.com - %s" {/* (optional) used as a fallback when a template exists but a title is not defined outputs: My Site */} defaultTitle="My Default Title" {/* (optional) callback that tracks DOM changes */} ClientState={(newState, addedTags, removedTags) => console.log(newState, addedTags, removedTags)} > {/* html attributes */} {/* body attributes */} {/* title attributes and value */} My Plain Title or {`dynamic`} title {/* base element */} {/* multiple meta elements */} {/* multiple link elements */} {locales.map((locale) => { })} {/* multiple script elements */}

نوشته های Poria Sobhanlo

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