From 823302458ec6c53455a3f34674415c43ce6a3187 Mon Sep 17 00:00:00 2001 From: "Vito G. Graffagnino" Date: Sun, 28 Aug 2022 12:24:01 +0100 Subject: Added snippets directory --- snippets/javascript/javascript-react.snippets | 190 ++++++++++++++++++++++++++ 1 file changed, 190 insertions(+) create mode 100644 snippets/javascript/javascript-react.snippets (limited to 'snippets/javascript/javascript-react.snippets') 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}); -- cgit v1.2.3