Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Extra React snippetsNew to Visual Studio Code? Get it now.

Extra React snippets

Khoi Le

|
431 installs
| (0) | Free
Extra React code snippets
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Extra React code snippets

Download on Visual Studio Marketplace

This extension is lightweight and you don't need remember all prefixs because Visual Studio Code IntelliSense is very smart and powerful.

Features

You start to type rr then you show all React code snippets in code completion and continue with whatever you remember as im, ren, cla, con, map, etc..

Demo

React

Prefix (rr) Description
Import
rrImRender Import render() from ReactDOM
rrImReactDOM Import ReactDOM from ReactDOM
rrImReactDOMRender Import ReactDOM and render()
Render
rrRenderDom Create ReactDOM.render()
rrRender Create only render()
Class
rrClassComponent Create class component
rrClassComponentFull Create full class component
rrStatelessFunctionalComponent Create stateless functional component
Component
rrconstructor Create constructor()
rrcomponentDidMount Create componentDidMount()
rrcomponentDidUpdate Create componentDidUpdate()
rrcomponentWillUnmount Create componentWillUnmount()
rrshouldComponentUpdate Create shouldComponentUpdate()
rrgetSnapshotBeforeUpdate Create getSnapshotBeforeUpdate()
rrcomponentDidCatch Create componentDidCatch()
rrMethod Create method with ES7 syntax
React-Redux
rrmapDispatchToProps Create mapDispatchToProps()
rrmapStateToProps Create mapStateToProps()
rrcreateStore Create store
rrcombineReducer Using combineReducers()
rrReducer Create a basic reducer
rrconnect Create export connected component by connect() function

React Hooks

Prefix Description
rrImHooks Import basic React Hooks
rrDeclareHooks Declare a state value by using React Hooks

JavaScript

Prefix Description
jsPromise Generates a full Promise function
jsReturnPromise Generates a return for a Promise function
jsFetchGET Fetch template - GET method
jsFetchPOSTorPUT Fetch template (POST or PUT)
jsFetchDELETE Fetch template - DELETE method

Other

Prefix Description
mep Declare multiple module.exports
handleClick Create handleClick() method with ES7 syntax
e.preventDefault Completion for e.preventDefault()
e.stopPropagation Completion for e.stopPropagation()
cslog console.log()
cserror console.error()

Enjoy coding and free your mind! (^_^)

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2019 Microsoft