How to write code faster in React with VS Code

How to write code faster in React with VS Code


2 min read

React is an open-source JavaScript library for building user interfaces. VS Code is my favorite code editor. The editor has amazing extensions that make React development more fun. One of them is React code snippets. There is a great extension for React code snippets called ES7 React/Redux/React-Native/JS snippets that you can install from the extensions tab in VS Code.


1. Click the extension's icon in VS Code

an arrow to select the extension's icon in VS Code

2. Type the extension name in the search box

You can type the whole name or a few characters of the extension name to get it from the marketplace like below.

an arrow showing how to type the extension name in the search box

3. Click the extension name and select the button to install

an arrow showing how to install the extension

After installing the extension, you can start using the snippets right away. Here are a few examples of the snippets:


importing react from the react library


importing ReactDOM from the react-dom library


importing react and component from the react library


importing router from react-router-dom


importing react and useState hook from the react library


importing react, useState and useEffect hooks from the react library


writing a constructor in a class component


a class component


a class exponent component


a functional component


a functional export component


an arrow functional component


an arrow functional export component

Wrapping it up

Code snippets save us a lot of time. With code snippets, you can code faster and be more efficient. Make your React development more fun ๐Ÿค— and if you are using code snippets, comment below your favorite code snippets!

Thanks for reading!! ๐Ÿฅฐ