【React】ひな形を自動で作成してくれる便利なショートカット

背景

コンポーネントを作成する際に、
毎度ひな形を作成するのは面倒な時もあります。
なるべく楽にひな形を作成したいです。
本記事では、Reactでコンポーネントのひな形を作成する方法を記載します。

環境

• Vite：5.0.8
• react：18.2.0
• typescript：5.2.2

上記に加えて、vscodeの拡張機能のES7+ React/Redux/React-Native snippetsを使用しています。

ひな形の生成方法１（function型）

以下の文字列を入力し、変換候補に出てくるreactFunctionalComponentを選択。

rfc

reactFunctionalComponentを選択すると、
以下のように自動でひな形が生成される。

import React from 'react'

export default function hoge() {
  return (
    <div>hoge</div>
  )
}

ひな形の生成方法２（アロー関数型）

以下の文字列を入力し、変換候補に出てくるreactArrowFunctionExportComponentを選択。

rafce

reactArrowFunctionExportComponentを選択すると、
以下のように自動でひな形が生成される。

import React from 'react'

const hoge = () => {
  return (
    <div>hoge</div>
  )
}

export default hoge