ReactJS Snippets

Essential collection of commonly used Snippets for ReactJS.

What's New

[1.0.4]
- Added imports for createPortal (imrdp) and flushSync (imrdf) and createPortal Boilerplate (rcp).
- We will add more snippets in the future release.

Installation

Visual Studio Marketplace

Launch Quick Open:

Linux: Ctrl+P
macOS: ⌘P
Windows: Ctrl+P

Paste the following command and press Enter:

ext install rajudhami.snippetz

Snippets

React Import Snippets and it's Output.

Prefix	Output
`imr`	import React from 'react';
`imrc`	import React, { Component } from 'react';
`imrpc`	import React, { PureComponent } from 'react';
`imrm`	import React, { memo } from 'react';
`imrf`	import React, { Fragment } from 'react';
`imrs`	import React, { Suspense } from 'react';
`imrl`	import React, { lazy } from 'react';
`imrsl` or `imrls`	import React, { Suspense, lazy } from 'react';
`imrcc`	import React, { createContext } from 'react';
`imrcr`	import React, { createRef } from 'react';
`imrfr`	import React, { forwardRef } from 'react';
`imrce`	import React, { createElement } from 'react';
`imrcf`	import React, { createFactory } from 'react';
`imrcle`	import React, { cloneElement } from 'react';
`imrve`	import React, { isValidElement } from 'react';
`imrch`	import React, { Children } from 'react';
`imrsm`	import React, { StrictMode } from 'react';

ReactDOM Import Snippets and it's Output.

Prefix	Output
`imrd`	import ReactDOM from 'react-dom';
`imrdp`	import ReactDOM, { createPortal } from 'react-dom';
`imrdr`	import ReactDOM, { render } from 'react-dom';
`imrdh`	import ReactDOM, { hydrate } from 'react-dom';
`imrdu`	import ReactDOM, { unmountComponentAtNode } from 'react-dom';
`imrdf`	import ReactDOM, { findDOMNode } from 'react-dom';

PropTypes Import Snippets and it's Output.

Prefix	Output
`imrpt`	import PropTypes from 'prop-types';

React Hooks Import Snippets and it's Output.

Prefix	Output
`imrus`	import React, { useState } from 'react';
`imrue`	import React, { useEffect } from 'react';
`imrse` or `imres`	import React, { useState, useEffect } from 'react';
`imruc`	import React, { useContext } from 'react';
`imrur`	import React, { useReducer } from 'react';
`imrucb`	import React, { useCallback } from 'react';
`imrum`	import React, { useMemo } from 'react';
`imrurf`	import React, { useRef } from 'react';
`imrui`	import React, { useImperativeHandle } from 'react';
`imrul`	import React, { useLayoutEffect } from 'react';
`imrud`	import React, { useDebugValue } from 'react';

Custom Import Snippets and it's Output.

Prefix	Output
`imrcss`	import './index.css';
`imrmcss`	import './index.module.css';
`imrcom`	import App from './App';

Code Snippets and it's Output.

Prefix	Output
`rdr`	Add ReactDOM Render
`rus`	Add React useState Hook & press Tab to apply camelCase [state, setState]
`rue`	Add React useEffect Hook
`ruc`	Add React useContext Hook
`rur`	Add React useReducer Hook
`rucb`	Add React useCallback Hook
`rum`	Add React useMemo Hook
`rurf`	Add React useRef Hook
`rui`	Add React useImperativeHandle Hook
`rud`	Add React useDebugValue Hook
`rul`	Add React useLayoutEffect Hook
`rfcb`	Add Functional Component Boilerplate
`rfc`	Add Functional Component
`rccb`	Add Class Component Boilerplate
`rcc`	Add Class Component
`rss`	Add setState Object
`rssf`	Add Functional setState
`rcon`	Add constructor () to Class Component
`rdsp`	Add getDerivedStateFromProps () to Class Component
`rren`	Add render () to Class Component
`rcdm`	Add componentDidMount () to Class Component
`rscu`	Add shouldComponentUpdate () to Class Component
`rsbu`	Add getSnapshotBeforeUpdate () to Class Component
`rcdu`	Add componentDidUpdate () to Class Component
`rcwu`	Add componentWillUnmount () to Class Component
`rdse`	Add getDerivedStateFromError () to Class Component
`rcdc`	Add componentDidCatch () to Class Component
`recb`	Add ErrorBoundary Component Boilerplate
`rcp`	Add createPortal Boilerplate

Custom Form Snippets and it's Output.

Prefix	Output
`rhce`	Add form handleChange () boilerplate event
`rhse`	Add form handleSubmit () boilerplate event

Change Log

## [1.0.4]
- Added imports for createPortal (imrdp) and flushSync (imrdf) and createPortal Boilerplate (rcp).
- We will add more snippets in the future release.

[1.0.3]
- Added Form handle Change and handle Submit Snippets.
- We will add more snippets in the future release.

[1.0.2]
- Added ReactJS Hooks Snippets.
- We will add more snippets in the future release.

[1.0.1]
- Added more commonly used ReactJS Snippets such as imports, Hooks, ReactDOM and more.
- We will add more snippets in the future release.

[1.0.0]
- Initial release of commonly used React Snippets.
- We will add more snippets in the future release.

React Snippets

Raju Dhami