common-react-snippets

Common React Snippets for VS Code.

Features

These snippets were selected carefully from my own day-to-day React use. Not everything in React is included here. This is a hand selected set of snippets that work the way that you would expect, not just a copy of the documentation.

Snippets

Full Expansions

imr - Import React

import React from 'react'

imrc - Import React, Component

import React, { Component } from 'react'

imrs - Import React, useState

import React, { useState } from 'react'

imrse - Import React, useState, useEffect

import React, { useState, useEffect } from 'react'

impt - Import PropTypes

import PropTypes from 'prop-types'

impc - Import PureComponent

import React, { PureComponent } from 'react'

cc - Class Component

import React, { Component } from 'react'
interface |Props {
  
}
interface |State {
  
}
class | extends Component<|Props, |State> {
  state = { | },
  render() {
    return ( | )
  }
}

export default |

pc - Pure Component

import React, { PureComponent } from 'react'
interface |Props {
  
}
interface |State {
  
}
class | extends PureComponent<|Props, |State> {
  state = { | },
  render() {
    return ( | )
  }
}

export default |

ccc - Class Component With Constructor

import React, { Component } from 'react'
interface |Props {
  
}
interface |State {
  
}
class | extends Component<|Props, |State> {
  constructor(props: |Props) {
    super(props)
    this.state = { | }
  }
  render() {
    return ( | )
  }
}

export default |

fc - Function Component With hooks

import React, { useState, useEffect } from 'react'

interface |Props {
  
}
function | (props: |Props) {
  const {  } = props
  const [|, set|] = useState(|)
  useEffect(() => {

  }, [])
  return (
    <div></div>
  )
}

export default |

sfc - Stateless Function Component

import React from 'react'

interface |Props {
  
}
function | (props: |Props) {
  const {  } = props
  return (
    <div></div>
  )
}

export default |

cdm - componentDidMount

componentDidMount() {
  |
}

uef - useEffect Hook

useEffect(() => {
  |
}, [])

gds - getDerivedStateFromProps

static getDerivedStateFromProps(nextProps, prevState) {
  |
}

scu - shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) {
  |
}

cdu - componentDidUpdate

componentDidUpdate(prevProps, prevState) {
  |
}

cwum - componentWillUnmount

componentWillUnmount() {
  |
}

cdc - componentDidCatch

componentDidCatch(error, info) {
  |
}

gsbu - getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState) {
  |
}

ss - setState

this.setState({ | : | })

ssf - Functional setState

this.setState(prevState => {
  return { | : prevState.| }
})

usf - Declare a new state variable using State Hook

const [|, set|] = useState()

Hit Tab to apply CamelCase to function. e.g. [count, setCount]*

ren - render

render() {
  return (
    |
  )
}

rprop - Render Prop

class | extends Component {
  state = { | },
  render() {
    return this.props.render({
      |: this.state.|
    })
  }
}

export default |

ima - Import antd

import { | } from 'antd'

imc - Import classnames

import cls from 'classnames'

ims - Import style

import styles from './|.less'

imms - Import module style

import styles from './|.module.less'

mobs - Mobx observable with comment

/**  */
@observable | = |

mact - Mobx action with comment

/**  */
@action | = async () => {
  |
}

dwc - Div with module class

<div className={styles.|}>|</div>

dwgc - Div with global class

<div className='|'>|</div>

mlg - My Log

console.log('========start========')
console.log(|)
console.log('=========end=========')

Commands

todo...