React Typescript Snippets
Tags: react, typescript, vscode, productivity
Published: 2022-10-15 10:09:02


If you too are tired of typing the same code when creating a new component in react than `VS Code` provides a cool solution: **Code snippets** 🔥.

Here are two snippets for Creating React components with Typescript:

## Default Exported React Component

![Default Exported React Component - snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5x5kb1tk868w9sdbjs4j.gif)


```json
  "Typescript default React component": {
    "scope": "typescriptreact",
    "prefix": "rfcd",
    "body": [
      "import React, { FC } from 'react'",
      "",
      "interface ${TM_FILENAME_BASE}Props {",
      "  $1",
      "}",
      "",
      "const ${TM_FILENAME_BASE}: FC<${TM_FILENAME_BASE}Props> = ({ $2 }) => {",
      "  return (",
      "    <div>",
      "     ${3:$TM_FILENAME_BASE}",
      "    </div>",
      "  )",
      "}",
      "",
      "export default ${TM_FILENAME_BASE};"
    ],
  }
```

---

## Exported React Component

![Exported React Component - snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jba0rtgoqfxk52bd0zlt.gif)


```json
"Typescript React component": {
    "scope": "typescriptreact",
    "prefix": "rfc",
    "body": [
      "import React, { FC } from 'react'",
      "",
      "interface ${TM_FILENAME_BASE}Props {",
      "  $1",
      "}",
      "",
      "export const ${TM_FILENAME_BASE}: FC<${TM_FILENAME_BASE}Props> = ({ $2 }) => {",
      "  return (",
      "    <div>",
      "     ${3:$TM_FILENAME_BASE}",
      "    </div>",
      "  )",
      "}",
    ],
  }
```

### Flow breakdown
- Type the prefix, in this case, `rfc` or `rfcd`. (You can call them whatever you like 🙂).
- Write the interface props.
- **Press the tab** to jump to the function.
- Add the props you wrote in the interface. _(This feels like another step that can be optimized, take the props from the interface but I haven't yet found a solution for that)_
- **Press tab**.
- Start writing the return of the component or just leave it as is with the Component's name.


`Vs Code` gives us variables we can use in the snippets, here I'm using the `TM_FILENAME_BASE` variable which gives me the name of the file (without its extension).

The common convention is to make the name of the file the same as the name of the component, but if that's not your case then it's possible to alter that variable, [look here for more information](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_transform-examples).


---

> To create your own snippets you'll need to go to Code > Preferences (User Snippets under File > Preferences **on Windows**), and then select the language for which the snippets should appear, or the New Global Snippets file option.

{% embed https://gist.github.com/danielbellmas/b842c5c6342425dbcd17a338cba1d4b6 %}

I've heard of an extension called [Folder Template](https://marketplace.visualstudio.com/items?itemName=Huuums.vscode-fast-folder-structure), which creates a folder structure that has a ready-made template inside, I haven't tried it yet but it seems like a good productivity hack, so stay tuned for another post about it in the near future 🙂.