Useful React snippets for VS Code from the ES7 extension

Make your coding life easier!

As I ventured through our journey in learning React, I found that writing the base code to create new components for my application was becoming tedious and redundant. Every time you create a new component, you have to add the same import code, component function code, export default, etc. One fine day, while I was struggling to grasp the concept of state, one of my cohort buddies shared a YouTube video, which breaks down React into a 2 hour crash course (linked here). This video introduced me to the beautiful VS Code extension: ES7 React/Redux/React-Native/JS snippets. These snippets are used to speed up workflow. They’re basically shortcuts that allow us to type in a few letters, which will then output code that we use constantly in our React applications. The snippets from this extension give us the ability to spend less time typing out the base code and spend more time focusing on the actual functionality. This blog provides a short list of useful snippets with examples of their various outputs. The exhaustive list & how to install this extension can be found here.

imr:

imrse:

imp(import):

i.e. import SpotifyPlayer from ‘react-spotify-web-playback’

imd(import destructured) :

i.e. import {Container} from ‘react-bootstrap’

clg:

i.e. console.log(‘whatever you want to print’)

rfc(react functional component):

use when creating a fresh new component

rfce(react functional component w/ export default at the bottom):

rafce(react component utilizing an arrow function):

nfn(named function):

shortcut for creating callback functions/etc inside of your components

some other helpful snippets:

There are so many more! Check it out!