آشنایی و نحوه استفاده از react helmet


react helmet یک کامپوننت ساده هست که برای مدیریت آسان بخش head در وب سایته یعنی می تونیم با react helmet تگ های meta , title , description رو به پروژه خودمون اضافه کنیم .
این کامپوننت هنگامی که از SSR استفاده می کنیم بهترین نتیجه را می دهد و با ست کردن tag ها وب سایت برای شبکه های اجتماعی و کراول های موتور های جست و جو قابل شناسایی و ایندکس هست .
شروع به کار استفاده از react helmet
به راحتی این کامپوننت رو با استفاده از yarn , npm نصب می کنیم :
1 2 3 4 |
$ npm i react-helmet # or, using Yarn: $ yarn add react-helmet |
و در برنامه خودمون این کامپوننت رو ایمپورت می کنیم و از آن استفاده می کنیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import React, { Component } from 'react'; import { Helmet } from 'react-helmet'; // ... class App extends Component { render() { return ( <div> <Helmet> <title>Turbo Todo</title> <meta name="description" content="Todos on steroid!" /> <meta name="theme-color" content="#008f68" /> </Helmet> {/* ... */} </div> ); } } export default App; |
با اضافه کردن این کامپوننت به برنامه هنگامی که در مرورگر Inspect element می گیریم در کد ها تگ های meta , title در بخش head اضافه شده است . همچنین این کامپوننت این قابلیت را دارد که جریان داده ای بین خودش و کامپوننت های دیگر که خیلی در کامپوننت های react رایج است ایجاد کند .
برای مثال :
در child کامپوننت :
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import React from 'react'; import { Helmet } from 'react-helmet'; export default () => { return ( <div> <Helmet> <title>Extreme Todoz</title> </Helmet> <h1>Child Component!</h1> </div> ) } |
و در کامپوننت پدر:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import React, { Component } from 'react'; import { Helmet } from 'react-helmet'; import ChildComponent from './ChildComponent'; class App extends Component { render() { return ( <div> <Helmet> <title>Turbo Todo</title> <meta name="description" content="Todos on steroid!" /> <meta name="theme-color" content="#008f68" /> </Helmet> <ChildComponent /> </div> ); } } export default App; |
در این مثال متای description , thme-color بدون تغییر است ولی title کامپوننت فرزند جایگزین title کامپوننت اخیر می شود .
همچنین می شود برای اختصاص attribute به تگ های body , html از react helmet استفاده کرد . ما در مثال زیر به body کلاس dark را اختصاص داده ایم .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class App extends Component { render() { return ( <div> <Helmet> <title>Turbo Todo</title> <meta name="description" content="Todos on steroid!" /> <meta name="theme-color" content="#008f68" /> <body class="dark" /> </Helmet> {/* ... */} </div> ); } } |
همانطور که در ابتدا گفتم قابلیت react helmet در صورتی بیشترین بازدهی را دارد که از SSR استفاده کنیم . برای مبحث SSR یک تله فیلم رایگان و خیلی خوب در سایت موجوده که پیشنهاد می کنم حتما اون رو ببینید.
دیدگاهتان را بنویسید