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

react helmet یک کامپوننت ساده هست که برای مدیریت آسان بخش head در وب سایته یعنی می تونیم با react helmet تگ های meta , title , description رو به پروژه خودمون اضافه کنیم .

این کامپوننت هنگامی که از SSR استفاده می کنیم بهترین نتیجه را می دهد و با ست کردن tag ها وب سایت برای شبکه های اجتماعی و کراول های موتور های جست و جو قابل شناسایی و ایندکس هست .

شروع به کار استفاده از react helmet

به راحتی این کامپوننت رو با استفاده از yarn , npm نصب می کنیم :

$ npm i react-helmet

# or, using Yarn:
$ yarn add react-helmet

$ npm i react-helmet

# or, using Yarn:

$ yarn add react-helmet

و در برنامه خودمون این کامپوننت رو ایمپورت می کنیم و از آن استفاده می کنیم:

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;

import React, { Component } from 'react';

import { Helmet } from 'react-helmet';

// ...

class App extends Component {

render() {

return (

<div>

<title>Turbo Todo</title>

</Helmet>

{/* ... */}

</div>

);

}

export default App;

‍با اضافه کردن این کامپوننت به برنامه هنگامی که در مرورگر Inspect element می گیریم در کد ها تگ های meta , title در بخش head اضافه شده است . همچنین این کامپوننت این قابلیت را دارد که جریان داده ای بین خودش و کامپوننت های دیگر که خیلی در کامپوننت های react رایج است ایجاد کند .

آموزش جامع React Js

برای مثال :

در child کامپوننت :

import React from 'react';
import { Helmet } from 'react-helmet';

export default () => {
  return (
    <div>
      <Helmet>
        <title>Extreme Todoz</title>
      </Helmet>
      <h1>Child Component!</h1>
    </div>
  )
}

import React from 'react';

import { Helmet } from 'react-helmet';

export default () => {

return (

<div>

<title>Extreme Todoz</title>

</Helmet>

<h1>Child Component!</h1>

</div>

)

}

و در کامپوننت پدر:

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;

import React, { Component } from 'react';

import { Helmet } from 'react-helmet';

import ChildComponent from './ChildComponent';

class App extends Component {

render() {

return (

<div>

<title>Turbo Todo</title>

</Helmet>

</div>

);

}

export default App;

در این مثال متای description , thme-color بدون تغییر است ولی title کامپوننت فرزند جایگزین title کامپوننت اخیر می شود .

همچنین می شود برای اختصاص attribute به تگ های body , html از react helmet استفاده کرد . ما در مثال زیر به body کلاس dark را اختصاص داده ایم .

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>
    );
  }
}

class App extends Component {

render() {

return (

<div>

<title>Turbo Todo</title>

</Helmet>

{/* ... */}

</div>

);

}

همانطور که در ابتدا گفتم قابلیت react helmet در صورتی بیشترین بازدهی را دارد که از SSR استفاده کنیم . برای مبحث SSR یک تله فیلم رایگان و خیلی خوب در سایت موجوده که پیشنهاد می کنم حتما اون رو ببینید.