React/Redux Snippets

Contains basic snippets for React component and React-Redux components using AirBnB Style guide, AirBnB ESLint configs

Would you like me to add a snippet or contribute? Head over to the repo

Overview of available snippets

Snippet	Prefix
React
Statefull Component	sfc
Stateless Component	slc
Redux Component	reduxComponent
componentWillMount	cwm
componentDidMount	cdm
componentWillReceiveProps	cwrp
shouldComponentUpdate	scu
componentWillUpdate	cwu
componentDidUpdate	cdu
componentWillUnmount	cwum
constructor	constructor
binding Method	bindMethod
state	state
setState	setState
props	props
propTypes	pt
Redux
mapStateToProps	mstp
mapDispatchToProps	mdtp
connect	connect
reducer	reducer
action	action
actionType	actionType
Other
[Import Library] (#importLib)	importLib

Semicolon?

In my team, we don't use semicolon in our code. If you want to have semicolon in your code, just add semicolon after prefix. Example:

mstp;

It'll be:

const mapStateToProps = state => {
  const { key } = state;
  return { key };
}

Statefull Component

import React, { Component, PropTypes } from 'react'
import style from './style.css'

const propTypes = {
  propTypes
}

const defaultProps = {
  defaultProps
}

class Class extends Component {
  constructor(props) {
    super(props)
    this.state = {
    }
  }

  render() {
    return (
      <div>
        <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
      </div>
    )
  }
}

Class.propTypes = propTypes

Class.defaultProps = defaultProps

export default Class

Redux Component

import React, { Component, PropTypes } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import style from './style.css'

const propTypes = {
}

const defaultProps = {
}

class Class extends Component {
  constructor(props) {
    super(props)
    this.state = {
    }
  }

  render() {
    return (
      <div>
        <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
      </div>
    )
  }
}

Class.propTypes = propTypes

Class.defaultProps = defaultProps

const mapStateToProps = state => {
  const { state } = state
  return { state }
}

const mapDispatchToProps = dispatch => ({ actions }, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(Class)

Stateless Component

import React, { PropTypes } from 'react'
import style from './style.css'

const propTypes = {
  propTypes
}

const defaultProps = {
  defaultProps
}

const Class = props => (
  <div>
    
  </div>
)

Class.propTypes = propTypes

Class.defaultProps = defaultProps

export default Class

componentWillMount

componentWillMount() {
  
}

componentDidMount

componentDidMount() {
  
}

componentWillReceiveProps

componentWillReceiveProps(nextProps) {
  
}

shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) {
  
}

componentWillUpdate

componentWillUpdate(nextProps, nextState) {
  
}

componentDidUpdate

componentDidUpdate(prevProps, prevState) {
  
}

componentWillUnmount

componentWillUnmount() {
  
}

binding Method

this.method = this.method.bind(this)

state

const { key } = this.state

setState

this.setState((prevState, props) => {
  key: value,
})

props

const { key } = this.props

propTypes

props: PropTypes.types,

mapStateToProps

const mapStateToProps = state => {
  const { key } = state
  return { key }
}

mapDispatchToProps

const mapDispatchToProps = dispatch => ({
  key: (params) => dispatch(func(params),
})

connect

export default connect(mapStateToProps, mapDispatchToProps)(Class)

action

export const func = (params) =>
  (dispatch, getState) => {
    content
  }

reducer

const initState = {
  key: value,
}

const reducer = (state = initState, action) => {
  switch (action.type) {
    default:
      return state
  }
}

export default reducer

actionType

case TYPE:
  return Object.assign({}, state, {
    key: action.payload,
  })

importLib

Write Library name first for suggestion