JavaScript Imports
import moduleName from 'module' // imp: Import a default export.
import { destructuredModule } from 'module' //imd: Import a named export
import React from 'react' //imr: Import React` <br />
import React, { Component } from 'react' //imrc: Import React and Component
JavaScript Iteration
arrayName.forEach(element => { } //fre: For each iteration
for(let itemName of objectName { } //fof: For of iteration
for(let itemName in objectName { } //fin: For in Iteration
JavaScript Functions
(params) => { } //anfn: Anonymous Function
const functionName = (params) => { } //nfn: Named Function
React Lifecycle Methods
componentDidMount = () => { } //cdm: ComponentDidMount
componentDidUpdate = (prevProps, prevState) => { } //cdup: ComponentDidUpdate
componentWillUnmount = () => { } //cwun: ComponentWillUnmount
React Components
React Class Component
rcc
import React, { Component } from 'react'
export default class FileName extends Component {
render() {
return <div>$2</div>
}
}
React Class Component With Prop Types
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
React Functional Component
rfc
import React from 'react'
export default function $1() {
return <div>$0</div>
}
References
VS Code ES7 React/Redux/React-Native/JS snippets (Link)
'프레임워크 > React' 카테고리의 다른 글
Redux toolkit (0) | 2020.06.06 |
---|