When working with React, there’s lots of code that gets repeated over and over…and over and over again. Eventually, you start to think, “there’s got to be a better way”. Don’t worry, there is!
In this article we will look at the ES7 React/Redux/GraphQL/React-**Native snippets **extension. Yes, it’s a mouthful to spell it all out, but it provides an amazing set of snippets that are invaluable when writing React code.
The ES7 React/Redux/GraphQL/React-Native Snippets Extension
This snippets extension (I won’t type the entire name out again) is incredibly popular with over 2 million downloads. To back this up, every big time developer I’ve heard talk about React on a podcast, YouTube video, etc. uses this extension and loves it.
I’ve always said that developers are “intentionally lazy”. In other words, we find ways to constantly improve the speed at which we right code by writing less of it ourselves. These snippets making writing React much much faster!
JavaScript Imports
Although this article is focused on snippets for React, React code is primarily made up of modern JavaScript. For this reason, this extension includes several useful JavaScript snippets.
In modern JavaScript, code is broken up to different modules and then reused in other areas using the import syntax. Here’s a couple of import snippets to consider.
//imp
import moduleName from 'module'
//imd
import { destructuredModule } from 'module'
To get a little more specific to React, here’s a couple of React imports.
//imr
import React from 'react'
//imrc
import React, { Component } from 'react'
JavaScript Iteration
Iterating through a list of items is not difficult but it does get repetetive (no pun intended).
//fre
arrayName.forEach(element => { }
//fof
for(let itemName of objectName { }
//fin
for(let itemName in objectName { }
JavaScript Functions
Functions are obviously something that we write every day. Here’s a few different ways to generate them.
//anfn
(params) => { }
//nfn
const functionName = (params) => { }
React Lifecycle Methods
Now, we can dive into more React specific stuff. Let’s start with Lifecycle Methods.
//cdm
componentDidMount = () => { }
//cdup
componentDidUpdate = (prevProps, prevState) => { }
//cwun
componentWillUnmount = () => { }
React Components
With the snippets we’ve mentioned so far, you have the ability to stub out most of a React component by combining them, but it gets better! Here’s some snippets that will generate an entire component for you!
//rcc
import React, { Component } from 'react'
export default class FileName extends Component {
render() {
return <div>$2</div>
}
}
//rcep
import React, { Component } from 'react'
import PropTypes from 'prop-types'
export class FileName extends Component {
static propTypes = {}
render() {
return <div>$2</div>
}
}
export default //rcep
import React, { Component } from 'react'
import PropTypes from 'prop-types'
export class FileName extends Component {
static propTypes = {}
render() {
return <div>$2</div>
}
}
export default $1
//rfc
import React from 'react'
export default function //rfc
import React from 'react'
export default function $1() {
return <div>$0</div>
}
() {
return <div>$0</div>
}
Other Snippets
We’ve covered a bunch of snippets in this article, but there are several more. Here’s a couple of categories that might be worth a deeper look!
Conclusion
Never write code that you don’t have to. My only caveat to that statement comes if you are learning. If you’re new to a language or framework, avoid snippets while you’re learning. Write it all out for the experience! After that, SNIPPETS AWAY!
#reactjs #javascript #web-development