Component作成時のスニペット

コーディング動画とか見ても使っている人がいないので,広めたいですね.
上級者は打ち込んだ方が速いのかな？（いやいやそんなことは...）

VSCodeでデフォルトで使用できるスニペットを使用

スニペットとは予測変換とは少し違い.特定の文字列を打ったら定型文を呼び出してくれるみたいな感じですね.ちなみに僕は,全デバイスで,ひらがなで「あど」と打ったら,自分のアドレスが変換可能になるようにユーザー辞書に登録しています.これもスニペットですね.

では,早速React Componentのスニペットを見ていく.

また,ファイル拡張子は,.js,.jsx,.ts,.tsxのいずれにおいてもスニペットを使用することができた.

そして,Component名は,ファイル名に準拠して作成してくれるツワモノだ.
（今回は,Button.jsで試してます.）

rfc

りあくとふぁんくしょなるこんぽーねんと

import React from 'react'

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

関数宣言時にexport defaultを設定

rfce

りあくとふぁんくしょなるこんぽーねんと（えくぽーと末尾で

import React from 'react'

function Button() {
  return (
    <div>
      
    </div>
  )
}

export default Button

関数宣言して,末尾でexport default

CRAのデフォルトで使用されている形式ですね.

rafc

りあくとのあろー関数のふぁんくしょなるこんぽーねんと

import React from 'react'

export const Button = () => {
  return (
    <div>
      
    </div>
  )
}

流行りのアロー関数でComponentを作成.

この場合は,export defaultではないので注意.

（※最近はexport defaultを使用しないプロジェクトが増えているので,まぁまぁあり）

rafce

りあくとのあろー関数のふぁんくしょなるこんぽーねんと（えくぽーと末尾で

import React from 'react'

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

export default Button

こちらは末尾でexport defaultのパターンになります.

rcc

最近は推奨されませんが,Class Componentでも同様にスニペットを使用できます.

import React, { Component } from 'react'

export default class Button extends Component {
  render() {
    return (
      <div>
        
      </div>
    )
  }
}

rafcp

あと,スニペットにpをつけると,PropTypesを付け足すことも可能です.最近はTypeScriptを使う場合がほとんどなので,こちらもあまり使わないかと思います.

import React from 'react'
import PropTypes from 'prop-types'

const Button = props => {
  return (
    <div>
      
    </div>
  )
}

Button.propTypes = {

}

export default Button

所感

JSXがdivではなく,React.Fragmentで生成されるスニペットもほしいですね.

React使う人（特に初心者）には便利なスニペットですので,是非ご活用ください.