react snippets - Vim

#https://gist.github.com/xavierartot/a29b1d65bc81f8e7f3ff8a9958635a72
snippet ri
	import ${1:React} from '${0:react}';
snippet ir
	import React from 'react';
snippet ird
	import ReactDOM from 'react-dom';
snippet rid
	import ${1:ReactDOM } from '${0:react-dom}';
snippet cdm
	componentDidMount() {
		${1}
	}
snippet cdup
	componentDidUpdate(prevProps, prevState) {
		${1}
	}
snippet cwm
	componentWillMount() {
		${1}
	}
snippet cwr
	componentWillReceiveProps(nextProps) {
		${1}
	}
snippet cwun
	componentWillUnmount() {
		${1}
	}
snippet cwu
	componentWillUpdate(nextProps, nextState) {
		${1}
	}
snippet fup
	forceUpdate(${1:callback});
snippet dp
	static defaultProps = {
		${1}: ${2},
	}
snippet st
	this.state = {
		${1}: ${2},
	}
snippet rts
	this.state = {
		${1}: ${2},
	}
snippet pt
	static propTypes = {
		${1}: React.PropTypes.${2:type},
	}
snippet rcc
	import React from 'react';
	class ${1:ClassName} extends React.Component {
		render() {
			return (
				<div>
				${0:}
				</div>
			);
		}
	}
	export default $1;
snippet rcf
	import React from 'react';
	function ${1:ClassName} (props) {
			return (
				<div>
					${0:}
				</div>
			);
	}
	export default $1;
snippet rsl
	export ${1:ClassName} = (props) => {
		return (
			<div ClassName='$1'>
				${0:}
			</div>
		);
	}
snippet rslf
	export const ${1:ClassName} = (props) => {
		return (
			<div ClassName='$1'>
				${0:}
			</div>
		);
	}
snippet rfsl
	export const ${1:ClassName} = (props) => {
		return (
			<div ClassName='$1'>
				${0:}
			</div>
		);
	}
snippet rdr
	ReactDOM.render(${1}, ${2})
snippet ercc
	export default class ${1:ClassName} extends React.Component {
		render() {
			return (
				<div>
					${0:}
				</div>
			);
		}
	}
snippet ctor
	constructor() {
		super();
		${1:this}
	}
snippet ren
	render() {
		return (
				<div>
					${0:}
				</div>
		);
	}
snippet rss
	this.setState({
		${1}: ${2}
	});
snippet sst
	this.setState({
		${1}: ${2}
	});
snippet scu
	shouldComponentUpdate(nextProps, nextState) {
		${1}
	}
snippet prp i
	this.props.${1}
snippet rp
	this.props.${1}
snippet ste i
	this.state.${1}
snippet rs
	this.state.${1}
snippet rpt
	${1}.propTypes = {
		${2}: React.PropTypes.${3:string|number}.${4:isRequired}
	}
snippet rrr
	render() {
		return (
			<div>
				${0:jsx}
			</div>
		);
	}

snippet rcl
	class ${1:MyComponent} extends React.Component {
		render() {
			return (
				<div>
					${2:jsx}
				</div>
			);
		}

snippet rc
	{/* ${0} */}

snippet rcs
	constructor() {
		super();
		${1:this}
	}
snippet ref
	ref={ (${1:input}) => this.${2:nameVar} = $1} 
snippet roc
	onClick={${1:this.}} ${0}
snippet ros
	onSubmit={${1:this.}} ${0}
snippet roh
	onHover={${1:this.}} ${0}
snippet rcn
	className="${1:name}"
snippet rb
	this.${1:method} = this.$1.bind(this);
snippet rbind
	this.${1:method} = this.$1.bind(this);
snippet red
	export default ${1};
snippet re
	export default ${1};
snippet rfj
	function(props) {
		return (
		  <div>
				{${1:props.}}
		  </div>
		);
	} 
snippet rfi
	function(props) {
		return (
		  <img className='${1:class}' 
				src={${2:props.path}}
				alt={${3:props.text}} />
		  </div>
		);
	} 
snippet rd
	<div className='${1:class}'>{${2:props.}}</div>
snippet rr
	return (
		<div>
			{${0:props.}}
		</div>
	);
snippet rul
	<ul className='${1:name class}'>
		{
			{${0:props.}
		}
	</ul>
snippet redc
	export default class ${1} extends React.Component {
		constructor(props) {
			super(props);
			this.state = {
				${2}: ''
			}
		}
		render() {
			return (
				<div></div>
			);
		}
	}
snippet recc
	export default class ${1} extends React.Component {
		constructor(props) {
			super(props);
			this.state = {
				${2}: ''
			}
		}
		render() {
			return (
				<div></div>
			);
		}
	}
snippet redcc
	export default class ${1} extends React.Component {
		constructor(props) {
			super(props);
			this.state = {
				${2}: ''
			}
		}
		render() {
			return (
				<div></div>
			);
		}
	}
snippet ep
	event.preventDefault()
snippet epd
	event.preventDefault()

snippet rec
	import React from 'react';
	export const ${1:Name} = props => {
		return {
			render(
				<div className="list$1">
					<ul>
						{this.props.map( element => <li key={element.toString()}>element</li>}
					</ul>
				</div>
			)
		}
	}

snippet rm=>
	${1:function_name} = (${2}) => {
		${0}
	}
snippet m=>
	${1:function_name} = (${2}) => {
		${0}
	}
snippet rf
	${1:function_name} = (${2}) => {
		${0}
	}