javascript-react.snippets

#https://gist.github.com/xavierartot/a29b1d65bc81f8e7f3ff8a9958635a72
snippet ic
	import ${1:name} from './components/$1';
snippet ip
	import PropTypes from 'prop-types';
snippet is
	import ${1:name} from './screens/$1';
snippet il
	import ${1:React} from '$1${0}';
snippet ia
	import { ${1:action} } from '../actions/${0:file}';
snippet ilodash
	import ${1:action} from 'lodash/$1';
snippet iredux
	import { connect } from 'react-redux'
snippet ir
	import React, { Component } from 'react';
snippet ri
	import React, { Component } from 'react';
snippet ird
	import ReactDOM from 'react-dom';
	${0}
snippet ijpg
	import './${1:filename}.jpg';
snippet ijpeg
	import './${0:filename}.jpeg';
snippet ipng
	import './${0:filename}.png';
snippet iimg
	import './${0:filename.jpeg}';
snippet icss
	import './${0:filename}.css';
snippet ird
	import ReactDOM from 'react-dom';
	${0}
snippet irr
	import { ${1:Route} } from 'react-router-dom';
snippet ipt
	import PropTypes from 'prop-types';
snippet iredux
	import { createStore } from 'redux'
	import { connect } from 'react-redux'
snippet inav
	import { ${1:createBottomTabNavigator, createMaterialTopTabNavigator, createStackNavigator} } from 'react-navigation'
snippet iexpoi
	import { ${1:FontAwesome, Ionicons} } from '${2:@expo/vector-icons}'
snippet iexpo
	import { ${1:Constants} } from '${2:expo}'

snippet cdm
	componentDidMount() {
		${1}
	}
snippet cdu
	componentDidUpdate(prevProps){
		${1}
	}
snippet gdsfp
	static getDerivedStateFromProps(nextProps, prevState){
		if (this.state.visible === true && newProps.visible === false) {
			registerLog('dialog is hidden');
		}
		return {
			visible : nextProps.visible
		};
	}
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 pd
	${1:Class}.defaultProps = {
		${2:propsName}: PropTypes.${3:type},
	}
snippet rcc
	import React, { Component } from 'react';

	class ${1:ClassName} extends Component {
		render() {
			return (
				<div className='$1'>
					$1
				</div>
			);
		}
	}
	export default $1
snippet rcf
	export default function ${1:className}(props) {
	  return (
		  ${0}
		);
	}
snippet rfc
	export default function ${1:className}(props) {
	  return (
		  ${0}
		);
	}
snippet rsl
	import React from 'react';
	const ${1:className} = (${2:{props}}) => {
		return (
			<div className='$1'>
				${0}
			</div>
		);
	}
	export default $1;
snippet rslf
	const ${1:className} = (${2:props}) => {
		return (
			<div className='$1'>
				${0}
			</div>
		);
	}
	export default ${1};
snippet rfsl
	const ${1:className} = (props) => {
		return (
			<div className='$1'>
				${0}
			</div>
		);
	}
	export default ${1};
snippet rdr
	ReactDOM.render(${1}, ${2})
snippet ercc
	export default class ${1:className} extends React.Component {
		render() {
			return (
				<div>
					${0:}
				</div>
			);
		}
	}
snippet ren
	render() {
		return (
				<div>
					${0:}
				</div>
		);
	}
snippet rss
	this.setState(() => ({
		${2:variable} : ${0}
	}))
snippet rsso
	this.setState({
		${0:variable}
	})
snippet tssf
	this.setState((currentState) => ({
		${1:variable} : currentState.${0}
	}))
snippet rso
	this.state = {
	  ${1} : ${0}
	}
snippet sst
	this.setState({
		${1}: ${2}
	});
snippet scu
	shouldComponentUpdate(nextProps, nextState) {
		${1}
	}
snippet prp i
	this.props.${1}
snippet rp
	this.props${0}
snippet rcp i
	const {${1}} = this.props
snippet ste i
	this.state${0}
snippet st i
	this.state${0}
snippet rts
	this.state.${1}
snippet rs
	state = {
		${1}
	}
snippet rpt
	${1:component}.propTypes = {
		${2:propName}: PropTypes.${3:type}.${4:isRequired},
		${0}
	}
snippet pt
	${1:Class}.propTypes = {
		${2:propsName}: PropTypes.${3:type},
	}
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 rcj
	{/* ${0} */}
snippet rcs
	constructor(props) {
		super(props);
		this.state = {
			${0}
		}
	}
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}"
snippet rcla
	className="${1:name}"
snippet re
	on${1:Event}={${(e) => this.${2:function}}${0}
snippet rb
	this.${1:method} = this.$1.bind(this);
snippet rbind
	this.${1:method} = this.$1.bind(this);
snippet red
	export default ${1};
snippet rfj
	function(props) {
		return (
		  <div>
				{${1: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} = (event) => {
		event.preventDefault()
		${0}
	}
snippet rf1
	${1} = ${2} => ${0}
snippet rfl
	${1} = ${2} => ${0}
snippet rfi
	(${1}) => ${0}
#jsx with Emmet
snippet einput
	input[type=text defaultValue=${2:val} placehoder=${3:val}]${0:Emmet}
snippet etextarea
	textarea[placehoder=${3:val}]${0:Emmet}
snippet eselect
	select>option[value=${1:val}]${0:Emmet}
snippet ebutton
	button.btn.btn-primary[type=submit]${0:Emmet}

snippet rcsl
	import React from 'react';

	const ${1:name componemt} = ({${2:propsName}}) => (
		<div>
		{$2}
		</div>
	)
	export default $1;
# wrap JSX with test in render() https://engineering.musefind.com/our-best-practices-for-writing-react-components-dec3eb5c3fc8
snippet riife
	(() => {
		if (${1:1}) {
			${2:<div>$1</div>}
		} else {
		  ${0:<div>$2</div>}
		}
	})();
snippet rmap
	{${1:array}.map( ${2:item} => <li key={$2.id}>{$2.id}</li> )}
snippet rmapl
	{${1}.map( (${2:item}) => (
		<li key={$2.id}>{$2.id}</li>
	))}

#API Context
snippet racc
	const Context = React.createContext()

#redux
snippet mstp
	function mapStateToProps( { ${2:state} }${3: , props} ){
	  return {
		  $2${0:,}
		}
	}
	export default connect(mapStateToProps)(${1})
snippet mstpwr
	function mapStateToProps( { ${2:state} }${3: , props} ){
	  return {
		  $2: ${0}
		}
	}
	export default withRouter(connect(mapStateToProps)(${1}))
snippet rdp
	const { dispatch } = this.props
snippet rd
	const { dispatch } = this.props
snippet connect
	import { connect } from 'react-redux'
snippet l
	let ${1} = ${0}


#REACT-NATIVE
snippet rnt
	<Text>
	  ${0}
	</Text>
snippet rnv
	<View>
	  ${0}
	</View>
snippet rnvt
	<View>
		<Text>
			${0}
		</Text>
	</View>
snippet rncc
	import React, { Component } from 'react';
	import { View, Text } from 'react-native';
	class ${1:ClassName} extends Component {
		render() {
			return (
				<View>
					<Text>
						$1
					</Text>
				</View>
			);
		}
	}
	export default $1
snippet irn
	import React, { Component } from 'react';
	import { View, Text } from 'react-native';
snippet rj
	return (
	  ${0}
	)

snippet rk
	key={${0}}
#REACT CSS
snippet stylesheet
	const styles = StyleSheet.create({
		${1:container}: {
			${0}
		},
	})
snippet ssc
	const styles = StyleSheet.create({
		${1:container}: {
			${0}
		},
	})
snippet h
	height: ${0},
snippet w
	width: ${0},
snippet bgc
	backgroundColor: '${0:#fff}',
snippet m
	margin: ${0},
snippet fl
	flex: 1,
snippet fd
	flexDirection: '${0:row}',
snippet fdc
	flexDirection: 'column',
snippet fdr
	flexDirection: 'row',
snippet jc
	justifyContent: '${0:center}',
snippet jcc
	justifyContent: 'center',
snippet jcsb
	justifyContent: 'space-between',
snippet jcsa
	justifyContent: 'space-around',
snippet jcfe
	justifyContent: 'flex-end',
snippet jcfs
	justifyContent: 'flex-start',
snippet jcse
	justifyContent: 'space-evenly',
snippet ai
	alignItems: '${0:center}',
snippet aic
	alignItems: 'center',
snippet aifs
	alignItems: 'flex-start',
snippet aife
	alignItems: 'flex-end',
snippet ais
	alignItems: 'stretch',
snippet bdr
	borderRadius: ${0:50},
snippet bdt
	borderTop: ${0:1},
snippet bdr
	borderRight: ${0:1},
snippet bdb
	borderBottom: ${0:1},
snippet bdl
	borderLeft: ${0:1},
snippet bdc
	borderColor: ${0:red},
snippet bw
	borderWidth: ${0:1},
snippet rstyl
	style={styles.${0}}
snippet rstyle
	style={styles.${0}}
snippet ra
	alert(${0})
snippet fs
	fontSize: ${0:20},
snippet pt
	paddingTop: ${0:2},
snippet pr
	paddingRight: ${0:2},
snippet pl
	paddingLeft: ${0:2},
snippet pb
	paddingBottom: ${0:2},
snippet mb
	marginBottom: ${0:2},
snippet mt
	marginTop: ${0:2},
snippet mr
	marginRight: ${0:2},
snippet ml
	marginLeft: ${0:2},
snippet asc
	alignSelf: 'center',
snippet ass
	alignSelf: 'strech',
snippet asfs
	alignSelf: 'flex-start',
snippet asfe
	alignSelf: 'flex-end',
snippet asb
	alignSelf: 'baseline',
snippet ac
	alignContent: 'stretch',
snippet acfs
	alignContent: 'flex-start',
snippet acfe
	alignContent: 'flex-end',
snippet acc
	alignContent: 'center',
snippet acsb
	alignContent: 'space-between',
snippet acsa
	alignContent: 'space-around',
snippet rnstringify
	JSON.stringify(${0})
snippet rstr
	JSON.stringify(${0})
snippet rstring
	JSON.stringify(${0})
snippet rparse
	JSON.parse(${0})
snippet rv
	{${0}}
snippet ttu
	textTransform: 'uppercase'
snippet as
	alignSelf: 'center',
snippet ttl
	textTransform: 'lowercase'
snippet rno
	${1}: {
		${0}
	},