Skip to content

Instantly share code, notes, and snippets.

@klzns
Created October 5, 2017 21:31
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save klzns/70a3369139f01eca24fce489187cc891 to your computer and use it in GitHub Desktop.
Save klzns/70a3369139f01eca24fce489187cc891 to your computer and use it in GitHub Desktop.
React Component Snippet
{
"React Component": {
"prefix": "reactComp",
"body": [
"import React, { Component } from 'react'",
"import PropTypes from 'prop-types'",
"",
"class ${1:${TM_FILENAME/(.*)\\.js/${1:/capitalize}/}} extends Component {",
" render() {",
" return (",
" ${3}",
" )",
" }",
"}",
"",
"${1:${TM_FILENAME/(.*)\\.js/${1:/capitalize}/}}.propTypes = {",
" ${2}",
"}",
"",
"export default ${1:${TM_FILENAME/(.*)\\.js/${1:/capitalize}/}}"
]
}
}
@guilhermebruzzi
Copy link

NICE WORK, for atom you can add the above snippet on ~/.atom/snippets.cson with the following syntax:

'.source.js':
  'React Component':
    prefix: 'reactComp'
    "body": """
      import React, { Component } from 'react'
      import PropTypes from 'prop-types'

      class ${1:${TM_FILENAME/(.*)\\.js/${1:/capitalize}/}} extends Component {
        render() {
          return (
            ${3}
          )
        }
      }

      ${1:${TM_FILENAME/(.*)\\.js/${1:/capitalize}/}}.propTypes = {
        ${2}
      }

      export default ${1:${TM_FILENAME/(.*)\\.js/${1:/capitalize}/}}
    """

@kevinch
Copy link

kevinch commented Oct 5, 2017

VsCode:
Code > Preferences > User snippet > javascript

Paste code, save and reload VsCode

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment