본문 바로가기

프레임워크/React

VS Code ES7 React/Redux/React-Native/JS snippets

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