Tracy's blog

How to write code faster in React with VS Code

How to write code faster in React with VS Code

Tracy Nuwagaba's photo
Tracy Nuwagaba
·

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.

Installation

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:

imr

importing react from the react library

imrd

importing ReactDOM from the react-dom library

imrc

importing react and component from the react library

imrr

importing router from react-router-dom

imrs

importing react and useState hook from the react library

imrse

importing react, useState and useEffect hooks from the react library

rconst

writing a constructor in a class component

rcc

a class component

rce

a class exponent component

rfc

a functional component

rfce

a functional export component

rafc

an arrow functional component

rafce

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!! 🥰

React100DaysOfCode#codenewbiessnippets