JS/TS/ReactJS/Redux snippets

This extension provides snippets for JavaScript, TypeScript, ReactJS and Redux which will help you with everyday needs for commands.

Here is direct link to marketplace JS/TS/ReactJS/Redux snippets

More snippets will come soon!

Supported

• JavaScript (.js and .jsx)
• React JS
• TypeScript (.ts and .tsx)
• Redux
• Redux Toolkit

Release Notes

Current version is 1.0.4 [08 Nov 2020]

Author

Luka Zrnić

Basic Methods

Prefix	Description
csl→	Creates default console.log(value);
cse→	Creates default console.error(value);
cslt→	Creates default console.log('text', value); with text
func→	Creates default function
fp1→	Creates function with 1 parameter
fp2→	Creates function with 2 parameters
arrf→	Creates default arrow function
afp1→	Creates arrow function with 1 parameter
afp2→	Creates arrow function with 2 parameters
objC→	Creates const object with one name:value pair
objL→	Creates let object with one name:value pair
objV→	Creates var object with one name:value pair
ifs→	Creates if statement
ifel→	Creates if/else statement
ifelif→	Creates if/else if/else statement
swca→	Switch case with 2 cases
floop→	Creates default for loop
wloop→	Creates default while loop
dwloop→	Creates default do/while loop

Redux

Prefix	Description
rdat→	Creates const for Action type
rdac→	Creates Redux Action
rdr→	Creates Redux Reducer
rdcr→	Creates Redux Combine Reducers
rds→	Creates Redux Store

react-redux

Prefix	Description
imrrdc→	import { connect } from 'react-redux';
imrrdp→	import { Provider } from 'react-redux';
mstp→	Creates const mapStateToProps = (state) => { ... }
mdtp→	Creates const mapDispatchToProps = (dispatch) => { ... }

React

Prefix	Description
imr→	import React from 'react';
imrd→	import ReactDOM from 'react-dom';
imrc→	import React, { Component } from 'react';
imcc→	import ComponentName from 'ComponentLocation';
imrpc→	import React, { PureComponent } from 'react';
cst→	state = { key: value }
cdm→	componentDidMount = () => { // do something }
cwm→	componentWillMount = () => { // do something }
cwun→	componentWillUnmount = () => { // do something }
cwrp→	componentWillReceiveProps = (nextProps) => { // do something }
scup→	shouldComponentUpdate = (nextProps, nextState) => { // do something }
cwup→	componentWillUpdate = (nextProps, nextState) => { // do something }
cdup→	componentDidUpdate = (prevProps, prevState) => { // do something }

React Hooks

Prefix	Description
rush→	const [name, setName] = useState();
rueh→	useEffect(() => { });
rurh→	const refName = useRef();
ruch→	const value = useContext();
rumh→	const memoizedValue = useMemo(() => computeExpensiveValue(), []);
rucbh→	const name = useCallback(() => { }, []);
rudbh→	useDebugValue(value);

React Components

Class Component

rcc

import React, { Component } from 'react';

class CLassName extends Component {
  render() {
    return <div> </div>;
  }
}

export default ClassName;

Functional Component

rfc

import React from 'react';

const ComponentName = () => {
  return <div> </div>;
};

export default ComponentName;

Redux Toolkit

Create Action

rtca

import { createAction } from '@reduxjs/toolkit';

const name = createAction('action/type');

Create Reducer

rtcr

import { createAction, createReducer } from '@reduxjs/toolkit';

const name = createAction('action/type');

const initialState = {};

const reducerName = createReducer(initialState, builder => {
  builder.addCase(name, (state, action) => {
    // ...
  });
});

Create Slice

rtcs

import { createSlice } from '@reduxjs/toolkit';

const initialState = {};

export const sliceName = createSlice({
  name: 'name',
  initialState,
  reducers: {
    name: (state, action) => {
      // ...
    },
  },
});

export const { name } = sliceName.actions;

export default sliceName.reducer;

Configure Store

rts

import { configureStore } from '@reduxjs/toolkit';

import reducer from 'location';

export default configureStore({
  reducerName: reducer,
});