Tip for Writing React Faster with Simple React Snippets in VSCode

Visual Studio Code functional snippet for React:

1. Go to File → Preferences → Configure User Snippets.
2. Select “New Global Snippets” and name your json file, for example: typescriptReact.json.
3. Paste the snippets as shown below (you can modify it as your expection):

{
 "Typescript React Function Component": {
  "prefix": "fc",
  "body": [
   "import {FC} from 'react'",
   "",
   "interface ${TM_FILENAME_BASE}Props {",
   " $1",
   "}",
   "",
   "const $TM_FILENAME_BASE: FC<${TM_FILENAME_BASE}Props> = ({$2}) => {",
   "  return<div>$TM_FILENAME_BASE</div>",
   "}",
   "",
   "export default $TM_FILENAME_BASE"
  ],
  "description": "Typescript React Function Component"
 }
}

4. Save the file and refresh your VSCode.
5. Type “fc” in your empty tsx file, then hit Enter.
The defined function component snippet above will be generated.

Stay tuned!