Helpful .tsx Snippets

Setup

In VSCode go to cmd+opt+p -> Preferences: Configure User Snippets -> typescriptreact.json

TypeScript React Functional Component

"TypeScript React FC": {
  "prefix": "tsrfc",
  "body": [
    "import React from 'react'",
    "",
    "const $1: React.FC<Props> = () => {",
    "  return (",
    "    <div>",
    "      ",
    "    </div>",
    "  )",
    "}",
    "",
    "type Props = {",
    "  ",
    "}",
    "",
    "export default $1",
    ""
  ],
  "description": "TypeScript React FC"
}

TypeScript React Pure Component (for Remote Types)

"TypeScript React Redux PC": {
  "prefix": "tsrreduxpc",
  "body": [
  "import { connect, ConnectedProps } from 'react-redux'",
    "import { Dispatch } from 'redux'",
    "import { RootState } from 'data/rootReducer'",
    "import React, { PureComponent } from 'react'",
    "",
    "class $1 extends PureComponent<Props, State> {",
    "  state = {}",
    "",
    "  render () {",
    "    return <div />",
    "  }",
    "}",
    "",
    "const mapStateToProps = (state: RootState): LinkStatePropsType => ({})",
    "",
    "const mapDispatchToProps = (dispatch: Dispatch) => ({})",
    "",
    "const connector = connect(",
    "  mapStateToProps,",
    "  mapDispatchToProps",
    ")",
    "",
    "type OwnProps = {}",
    "type SuccessStateType = {}",
    "type LinkStatePropsType = {}",
    "type Props = OwnProps & ConnectedProps<typeof connector>",
    "type State = {}",
    "",
    "export default connector($1)"
  ],
  "description": "TypeScript React Redux PC"
}