# VS Code Extensions to optimize your React workflow

## 1. [ES7 React/Redux/GraphQL/React-Native Snippets Extension](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)

Creating React applications involves repeating code multiple times. For instance, every time you create a new component we have to go through the same process and write boilerplate code. Let's look at a couple of common use cases to speed up your workflow:

- `rcc` | Creating a class-based component

<iframe src="https://giphy.com/embed/iPazNi9cfnCgkZbSTN" width="480" height="262" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>


-  `rafc` | Creating a functional component

<iframe src="https://giphy.com/embed/56nFZlrEiMaReBAvn5" width="480" height="262" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>

You can find the entire list of snippets on the  [official page](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets).


## 2. [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) 

As the name suggests, this handy extension automatically renames your closing tag when you rename your opening tag and vice versa. For instance, if you decide to change an `<h1>` to `<h2>`, the closing tag will be automatically renamed from an `</h1>` to `</h2>`.

<iframe src="https://giphy.com/embed/gzIi2b4U7ss0lMIm3W" width="480" height="262" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>


## 3. [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) 

Do you ever find it difficult to match bracket pairs, especially when there are multiple nested levels? Bracket Pair Colorizer identifies matching brackets with colors.

<iframe src="https://giphy.com/embed/wHW07aJdL9IW19denF" width="480" height="262" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>

Thanks for reading! Let me know in the comments if there are any others that have helped you out.