Added snippets directory

1 files changed, 190 insertions, 0 deletions

diff --git a/snippets/javascript/javascript-react.snippets b/snippets/javascript/javascript-react.snippets
new file mode 100644
index 0000000..65cb4e1
--- /dev/null
+++ b/snippets/javascript/javascript-react.snippets
@@ -0,0 +1,190 @@
+# Import
+snippet ir import React
+	import React from 'react';
+
+snippet irc import React and Component
+	import React, { Component } from 'react';
+
+snippet irh import React hooks
+	import { use$1 } from 'react';
+
+snippet ird import ReactDOM
+	import ReactDOM from 'react-dom';
+
+snippet irp import PropTypes
+	import PropTypes from 'prop-types';
+
+# Lifecycle Methods
+snippet cdm componentDidMount
+	componentDidMount() {
+		${1}
+	};
+
+snippet cdup componentDidUpdate
+	componentDidUpdate(prevProps, prevState) {
+		${1}
+	};
+
+snippet cwm componentWillMount
+	componentWillMount() {
+		${1}
+	};
+
+snippet cwr componentWillReceiveProps
+	componentWillReceiveProps(nextProps) {
+		${1}
+	};
+
+snippet cwun componentWillUnmount
+	componentWillUnmount() {
+		${1}
+	};
+
+snippet cwu componentWillUpdate
+	componentWillUpdate(nextProps, nextState) {
+		${1}
+	};
+
+snippet scu shouldComponentUpdate
+	shouldComponentUpdate(nextProps, nextState) {
+		${1}
+	}
+
+# Props
+snippet spt static propTypes
+	static propTypes = {
+		${1}: PropTypes.${2}
+	};
+
+snippet pt propTypes
+	${1}.propTypes = {
+		${2}: PropTypes.${2}
+	};
+
+snippet sdp static defaultProps
+	static defaultProps = {
+		${1}: ${2}	
+	};
+
+snippet dp defaultProps
+	${1}.defaultProps = {
+		${2}: ${3}
+	};
+
+snippet pp props
+	props.${1};
+
+snippet tp this props
+	this.props.${1};
+
+# State
+snippet st
+	state = {
+		${1}: ${2},
+	};
+
+snippet sst
+	this.setState({
+		${1}: ${2}
+	});
+
+snippet tst 
+	this.state.${1};
+
+# Component
+snippet raf
+	const ${1:ComponentName} = (${2:props}) => {
+		${3:state}
+
+		return (
+			<>
+				${4}
+			</>
+		);
+	};
+
+snippet rcla
+	class ${1:ClassName} extends Component {
+		render() {
+			return (
+				<>
+					${2}
+				</>
+			);
+		}
+	}
+
+snippet ercla
+	export default class ${1:ClassName} extends Component {
+		render() {
+			return (
+				<>
+					${2}
+				</>
+			);
+		};
+	};
+
+snippet ctor
+	constructor() {
+		super();
+
+		${1:state}
+	}
+
+snippet ren
+	render() {
+		return (
+			<>
+				${2}
+			</>
+		);
+	}
+
+snippet fup
+	forceUpdate(${1:callback});
+
+# Hooks
+snippet uses useState
+	const [${1:state}, set${2}] = useState(${3:initialState});
+
+snippet usee useEffect
+	useEffect(() => {
+		${1}
+	});
+
+snippet userd useReducer
+	const [${1:state}, ${2:dispatch}] = useReducer(${3:reducer});
+
+snippet userf useRef
+	const ${1:refContainer} = useRef(${2:initialValue});
+
+snippet usect useContext
+	const ${1:value} = useContext(${2:MyContext});
+
+snippet usecb useCallback
+	const ${1:memoizedCallback} = useCallback(
+	() => {
+		${2}(${3})
+	},
+	[$3]
+	);
+
+snippet usem useMemo
+	const ${1:memoizedCallback} = useMemo(() => ${2}(${3}), [$3]);
+
+snippet usei useImperativeHandle
+	useImperativeHandle(${1:ref}, ${2:createHandle});
+
+snippet used useDebugValue
+	useDebugValue(${1:value});
+
+# ReactDOM methods
+snippet rdr ReactDOM.render
+	ReactDOM.render(${1}, ${2});
+
+snippet rdh ReactDOM.hydrate
+	ReactDOM.hydrate(${1:element}, ${2:container}[, ${3:callback}]);
+
+snippet rdcp ReactDOM.createPortal
+	ReactDOM.createPortal(${1:child}, ${2:container});