背景

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

環境

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

以下の文字列を入力し、変換候補に出てくる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