Useful React snippets

typescriptreact.json

{
    "React component": {
        "prefix": "comp",
        "body": [
            "import * as React from 'react';",
            "import './${componentName}.scss';",
            "",
            "export default class ${componentName} extends React.Component<${props}, ${state}> {",
            "",
            "\trender() {",
            "\t\treturn (",
            "\t\t\t<div className='${classname}'>",
            "\t\t\t</div>",
            "\t\t);",
            "\t}",
            "}",
            ""
        ],
        "description": "Create a react component"
    },

    "Connected React component": {
        "prefix": "conn",
        "body": [
            "import * as React from 'react';",
            "import {connect} from 'react-redux';",
            "import './${componentName}.scss';",
            "",
            "class ${componentName} extends React.Component<${props}, ${state}> {",
            "",
            "\trender() {",
            "\t\treturn (",
            "\t\t\t<div className='${classname}'>",
            "\t\t\t</div>",
            "\t\t);",
            "\t}",
            "}",
            "",
            "const get${componentName}Props = state => {",
            "\treturn {",
            "",
            "\t}",
            "}",
            "",
            "export default connect(get${componentName}Props)(${componentName});",
            ""
        ],
        "description": "Create a connected react component"
    },

    "Index file": {
        "prefix": "index",
        "body": [
            "import ${componentName} from './${componentName}';",
            "export default ${componentName};",
            ""
        ],
        "description": "Create an index file for a react component"
    }
}