javascript-react.snippets

#
#  React snippets
#

#
## create class component
#

snippet rcc "create class component" b
import React, { ${1:PropTypes, }Component } from 'react'

class ${2:ClassComponent} extends Component {

	$0
	render() {
		return (
			${4:<div>
			  $5
			</div>}
		)
	}
}

${3:export default $2}
endsnippet

#
## functional component
#

snippet funCom "create simple functional component" b
import React from 'react'

const ${1:functionalComponent} = (${2:props}) => {
  $0
  return (
    ${3:<div>
		  $4
		</div>}
  )
}

export default $1
endsnippet

#
## class component
#

snippet classCom "create cimple class component" b
import React, { Component } from 'react'

class ${1:ClassComponent} extends Component {
  constructor(props) {
		super(props)

		${2:this.state = {
		  $3
		}}
	}

  $0
	render() {
    return (
		  ${4:<div>
        $5
			</div>}
		)
	}
}

export default $1
endsnippet

#
## imports & exports
#

snippet impR "import React from 'react'" b
import React from 'react'
$0
endsnippet

snippet impD "import ReactDOM from 'react-dom'" b
import ReactDOM from 'react-dom'
$0
endsnippet

snippet impRD "import React & ReactDOM" b
import React from 'react'
import ReactDOM from 'react-dom'
$0
endsnippet

snippet impC "import component" b
import $1 from '$2'
$0
endsnippet

snippet jsx "define jsx dom" b
/**
 * @jsx React.DOM
 */
$0
endsnippet

snippet expdef "export default" b
export default $0
endsnippet

#
## return jsx
#

snippet ret() "return ()" b
return (
  ${1:<div>
    $2
	</div>}
)
endsnippet

#
## Component specs & lifecycle
#

snippet cs "React.addons.classSet" b
var cx = React.addons.classSet
endsnippet

snippet cdm "component did mount" b
componentDidMount() {
	${1}
}$0
endsnippet

snippet cdup "component did update" b
componentDidUpdate(prevProps, prevState) {
	${1}
}$0
endsnippet

snippet scu "should component update"
shouldComponentUpdate(nextProps, nextState) {
	${1}
}$0
endsnippet

snippet cwm "component will mount" b
componentWillMount() {
	${1}
}$0
endsnippet

snippet cwr "component will receive props" b
componentWillReceiveProps(nextProps) {
	${1}
}$0
endsnippet

snippet cwun "component will unmount" b
componentWillUnmount() {
	${1}
}$0
endsnippet

snippet cwu "component will update" b
componentWillUpdate(nextProps, nextState) {
	${1}
}$0
endsnippet

snippet cx
cx({
	${1}: ${2}
})
endsnippet

snippet fup
forceUpdate(${1:callback})
endsnippet

snippet gdp "get default props" b
getDefaultProps() {
	return {
		${1}
	}
}$0
endsnippet

snippet ism "is mounted"
isMounted()
endsnippet

snippet ren
render() {
	return (
		${1:<div>
		  $2
		</div>}
	)
}
$0
endsnippet

#
## state
#

snippet constr "construct state" b
constructor(props) {
  super(props)

  ${1:this.state = {
	  $2
	}}
}

$0
endsnippet

snippet gis "get initial state" b
getInitialState() {
	return {
		${1}: ${2}
	}
}

$0
endsnippet

snippet pt "propTypes" b
propTypes: {
	${1}: React.PropTypes.${2:string}
},
endsnippet

snippet sst "set state" b
this.setState({
	${1}: ${2}
})$0
endsnippet

snippet props "get property" i
this.props.${1}
endsnippet

snippet state "get state" i
this.state.${1}
endsnippet

snippet trp
this.transferPropsTo(${VISUAL}$0)
endsnippet

#
## DOM render
#

snippet domren "render component to DOM" b
ReactDOM.render(${1:<$2 />}, document.${3:querySelector('$4')})
endsnippet

#
## React Redux
#

snippet impBAC "import bindActionCreators from redux" b
import { bindActionCreators } from 'redux'
endsnippet

snippet impConn "import connect from react-redux" b
import { connect } from 'react-redux'
endsnippet

snippet mstp "mapStateToProps" b
function mapStateToProps(state) {
  return {
	  $1
	}
}
endsnippet

snippet mdtp "mapDispatchToProps" b
function mapDispatchToProps(dispatch) {
  return {
	  $1
	}
}
endsnippet

snippet expConn "export default connect()()" b
export default connect(${1:mapStateToProps}${2:, }${3:mapDispatchToProps})($4)
endsnippet

#
## React Router
#

snippet impL "import Link from react-router" b
import { Link } from 'react-router'
endsnippet

snippet routes "import Route, IndexRoute" b
import React from 'react'
import { Route, IndexRoute } from 'react-router'

import ${1} from '${2}'
import ${3} from '${4}'
import ${6} from '${7}'
$0
export default (
  <Route path="/" component={$1}>
	  <IndexRoute component={$3} />
		<Route path="${5}" component={$6} />
	</Route>
)
endsnippet

snippet link "add react-router link"
<Link to="${1}" ${2:className="${3}"}>
  $4
</Link>$0
endsnippet