はな日記

記事を書く人は3人だったけど、みんな飽きちゃった

Reactでコンポーネントの作り方を忘れないために

どうもはなだです。

今回、作りたいものはリンクとボタンを同時に使うことができるExternalLinkを作っていく~!

chakra.UIを使っているのでタグがHTMLと違います!

アロー関数を使用。Next.js使用。TypeScriptで記述。

色んな書き方があってわからないと思いますが、それは使用している環境構築、技術、その時の主流の書き方があるからなのです。

よく、Webサイトでカーソルを乗せると別のページ移動するボタンがありますよね?
もし、HTMLで書くならこんな感じ

<a href="/hogehoge">
 <button>
  ボタンぬ
 </button>
</a>

一応、chakra.UIでも書いてみる。

<Link href={link}>
 <Button>
  {children}
 </Button>
</Link>

毎回、毎回タグを2個書いていくのめんどくさい!という時には、Reactではコンポーネントに分けてすることができる!! ファイルを分けて、、

ExternalLink.tsx

export const ExternalLink: FC<Props> = ({ children, link }) => {
  return (
    <>
      <Link href={link}>
        <Button>
          {children}
        </Button>
      </Link>
    </>
  )
}

上のコンポーネントを作っておくことでメインのページで省略して使うことができる!

<ExternalLink link="hogehoge/">
  テキスト
</ExternalLink>

なにがうれしいのか

  1. 使いまわしができる。別のページでもボタンを作ろうとしたときに、わざわざCSSを新しく作り、ボタンを作るのは面倒なので、コンポーネントにしてまとめておくと色んなページで再利用できる
  2. コードを見る側の視認性が上がる。コードが短いので見やすくなります!

まとめ

ほとんどが私の備忘録なのですが、わかっておくと非常に便利なコンポーネントちゃんなのです! ぜひ、皆さんもやってみてください! 初心者なので、間違っていたら教えてください!!!!

参考文献

chakra-ui.com

ja.reactjs.org