jetbrains-react

React snippets(live templates) for JetBrains series editors (e.g. WebStorm, PHPStorm, IntelliJ IDEA, etc.), stolen from sublime-react and phpstorm-reactjs.

Installation

Import Automatically

1. Download settings.jar;
2. Click File -> Importing Settings... on your IDE menu, select settings.jar, then click OK.

Install Manually

1. Download(save as...) and copy the jetbrains/templates/ReactJS.xml file to your templates folder:

• Windows: <your home directory>\.<product name><version number>\config\templates
• Linux: ~\.<product name><version number>\config\templates
• OS X: ~/Library/Preferences/<product name><version number>/templates

e.g. ~/Library/Preferences/WebStorm10/templates on OS X for WebStorm 10

2. Restart your IDE.

3. To see all templates, go to Preferences -> Live Templates and expand the ReactJS Template Group.

Usage

It's hard to remember shortcuts when there are a large number of options. A more efficient way is to take advantage of editor's Insert Live Template shortcut. Press Cmd + J and type as many letters as you want to filter the results.

For example, to create a new React class, type rcc and press Tab or press Cmd + J and write rcc or React.

The WebStorm official blog post:

• Working with ReactJS in WebStorm: Coding Assistance

Tips:

• How to enable spaces in ES6 imports between braces

Documentation of available snippets:

rcls

importReact,{Component}from'react';importPropTypesfrom'prop-types';class$COMPONENT$extendsComponent{staticdefaultProps={
$START$
};staticpropTypes={};state={};render(){return(<div>$END$</div>);}}exportdefault$COMPONENT$;

rpc

importReact,{PureComponent}from'react';importPropTypesfrom'prop-types';class$COMPONENT$extendsPureComponent{staticdefaultProps={
$START$
};staticpropTypes={};render(){return(<div>$END$</div>);}}exportdefault$COMPONENT$;

rpfc

importReactfrom'react';importPropTypesfrom'prop-types';function$COMPONENT$($PARAMETER$){return(<div>$END$</div>);}$COMPONENT$.propTypes={};$COMPONENT$.defaultProps={};exportdefault$COMPONENT$;

rpfc5

'use strict';varReact=require('react');varPropTypes=require('prop-types');function$COMPONENT$($PARAMETER$){return(<div>$END$</div>);}$COMPONENT$.propTypes={};$COMPONENT$.defaultProps={};module.exports=$COMPONENT$;

rpfcaf

importReactfrom'react';importPropTypesfrom'prop-types';const$COMPONENT$=($PARAMETER$)=>{return(<div>$END$</div>);};$COMPONENT$.propTypes={};$COMPONENT$.defaultProps={};exportdefault$COMPONENT$;

rcc

importReactfrom'react';importcreateReactClassfrom'create-react-class';importPropTypesfrom'prop-types';const$COMPONENT$=createReactClass({render(){return(<div>$END$</div>);}});exportdefault$COMPONENT$;

rcc5

'use strict';varReact=require('react');varcreateReactClass=require('create-react-class');varPropTypes=require('prop-types');var$COMPONENT$=createReactClass({render: function(){return(<div>$END$</div>);}});module.exports=$COMPONENT$;

rdom

importReactDOMfrom'react-dom';$END$

rdom5

varReactDOM=require('react-dom');$END$

rccc

$START$=createReactClass({render(){return($END$);}});

rccc5

$START$=createReactClass({render: function(){return($END$);}});

cdm

componentDidMount(){$END$}

cdm5

componentDidMount: function(){$END$},

cdu

componentDidUpdate(prevProps,prevState){$END$}

cdu5

componentDidUpdate: function(prevProps,prevState){$END$},

cwm

componentWillMount(){$END$}

cwm5

componentWillMount: function(){$END$},

uscwm

UNSAFE_componentWillMount(){$END$}

uscwm5

UNSAFE_componentWillMount: function(){$END$},

cwr

componentWillReceiveProps(nextProps){$END$}

cwr5

componentWillReceiveProps: function(nextProps){$END$},

uscwr

UNSAFE_componentWillReceiveProps(nextProps){$END$}

uscwr5

UNSAFE_componentWillReceiveProps: function(nextProps){$END$},

uscwu

UNSAFE_componentWillUpdate(nextProps,nextState){$END$}

uscwu5

UNSAFE_componentWillUpdate: function(nextProps,nextState){$END$},

cwu

componentWillUpdate(nextProps,nextState){$END$}

cwu5

componentWillUpdate: function(nextProps,nextState){$END$},

cwum

componentWillUnmount(){$END$}

cwum5

componentWillUnmount: function(){$END$},

gsbu

getSnapshotBeforeUpdate(prevProps,prevState){$END$}

gsbu5

getSnapshotBeforeUpdate: function(prevProps,prevState){$END$},

cdc

componentDidCatch(){$END$}

cdc5

componentDidCatch: function(){$END$},

dn

displayName: '$END$',

dnp

$START$.displayName='$END$';

fdn

findDOMNode($END$);

rfdn

ReactDOM.findDOMNode($END$);

rcp

ReactDOM.createPortal($START$,$END$);

rhy

ReactDOM.hydrate($START$,$END$);

rucan

ReactDOM.unmountComponentAtNode($END$);

fup

forceUpdate($END$);

gdp

getDefaultProps(){return{
$END$
};}

gdp5

getDefaultProps: function(){return{
$END$
};},

gis

getInitialState(){return{$START$: $END$};}

gis5

getInitialState: function(){return{$START$: $END$};},

ism

isMounted()

props

this.props

dprp

const{ $END$ }=this.props;

dsih

dangerouslySetInnerHTML={{__html: '$END$'}}

pts

propTypes: {$START$: PropTypes.$END$,},

pt

$START$: PropTypes.$END$,

refs

this.refs.$END$

ren

render(){return(<div>$END$</div>);}

ren5

render: function(){return(<div>$END$</div>);}

scu

shouldComponentUpdate(nextProps,nextState){$END$}

scu5

shouldComponentUpdate: function(nextProps,nextState){$END$},

sst

this.setState({$START$: $END$,});

fsst

this.setState((prevState)=>{return$END$;});;

state

this.state.$END$

dst

const{ $END$ }=this.state;

ct

contextTypes: {$START$: PropTypes.$END$,},

cct

childContextTypes: {$START$: PropTypes.$END$,},

ctx

this.context.$END$

gcc

getChildContext(){return{$START$: $END$};}

gcc5

getChildContext: function(){return{$START$: $END$};},

st

state={$START$: $END$,},

sdn

staticdisplayName='$END$';

spt

staticpropTypes={$START$: PropTypes.$END$,};

sdp

staticdefaultProps={$START$: $END$,};

sct

staticcontextTypes={$START$: PropTypes.$END$,};

scct

staticchildContextTypes={$START$: PropTypes.$END$,};

sgds

staticgetDerivedStateFromProps(nextProps,prevState){$END$},

cstt

constructor(props$START$){super(props$END$);}

tsn

transitionName="$END$"

tsa

transitionAppear={$END$}

tse

transitionEnter={$END$}

tsl

transitionLeave={$END$}

tset

transitionEnterTimeout={$END$}

tslt

transitionLeaveTimeout={$END$}

tsat

transitionAppearTimeout={$END$}

rdoms

importReactDOMServerfrom'react-dom/server';$END$

rdoms5

varReactDOMServer=require('react-dom/server');$END$

rdsrts

ReactDOMServer.renderToString($END$);

rdsrtsm

ReactDOMServer.renderToString($END$);

rdsrtns

ReactDOMServer.renderToNodeStream($END$);

rdsrtsns

ReactDOMServer.renderToStaticNodeStream($END$);

rsm

<React.StrictMode>
$END$
</React.StrictMode>

rf

<React.Fragment>
$END$
</React.Fragment>

rfs

<>
$END$
</>

rcr

React.createRef();

rfr

React.forwardRef((props,ref)=>{return$END$;});

rcctx

const{ Provider, Consumer }=React.createContext($END$);

ctxprvd

<Providervalue={$START$}>
$END$
</Provider>

ctxcsm

<Consumer>{value=>$END$}</Consumer>

oncp

onCopy={$END$}

onct

onCut={$END$}

onpt

onPaste={$END$}

oncpse

onCompositionEnd={$END$}

oncpss

onCompositionStart={$END$}

oncpsu

onCompositionUpdate={$END$}

onkd

onKeyDown={$END$}

onps

onKeyPress={$END$}

onku

onKeyUp={$END$}

onfs

onFocus={$END$}

onbl

onBlur={$END$}

oncg

onChange={$END$}

onip

onInput={$END$}

onsb

onSubmit={$END$}

onc

onClick={$END$}

oncm

onContextMenu={$END$}

ondc

onDoubleClick={$END$}

ondg

onDrag={$END$}

ondge

onDragEnd={$END$}

ondgetr

onDragEnter={$END$}

ondget

onDragExit={$END$}

ondgl

onDragLeave={$END$}

ondgo

onDragOver={$END$}

ondgst

onDragStart={$END$}

ondp

onDrop={$END$}

onmd

onMouseDown={$END$}

onme

onMouseEnter={$END$}

onml

onMouseLeave={$END$}

onmm

onMouseMove={$END$}

onmot

onMouseOut={$END$}

onmov

onMouseOver={$END$}

onmu

onMouseUp={$END$}

onsl

onSelect={$END$}

ontc

onTouchCancel={$END$}

onte

onTouchEnd={$END$}

ontm

onTouchMove={$END$}

onts

onTouchStart={$END$}

onsl

onScroll={$END$}

onwl

onWheel={$END$}

onabt

onAbort={$END$}

oncpl

onCanPlay={$END$}

oncpt

onCanPlayThrough={$END$}

ondc

onDurationChange={$END$}

onempt

onEmptied={$END$}

onekpt

onEncrypted={$END$}

onend

onEnded={$END$}

onldd

onLoadedData={$END$}

onldmd

onLoadedMetadata={$END$}

onls

onLoadStart={$END$}

onpaus

onPause={$END$}

opl

onPlay={$END$}

onplg

onPlaying={$END$}

onpgs

onProgress={$END$}

onrc

onRateChange={$END$}

onsked

onSeeked={$END$}

onskin

onSeeking={$END$}

onstd

onStalled={$END$}

onsupd

onSuspend={$END$}

ontu

onTimeUpdate={$END$}

onvc

onVolumeChange={$END$}

onwt

onWaiting={$END$}

onld

onLoad={$END$}

onerr

onError={$END$}

onas

onAnimationStart={$END$}

onae

onAnimationEnd={$END$}

onai

onAnimationIteration={$END$}

ontse

onTransitionEnd={$END$}