Awesome

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

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class $COMPONENT$ extends Component {
  static defaultProps = {
    $START$
  };

  static propTypes = {
  };

  state = {
  };

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

export default $COMPONENT$;

rpc

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';

class $COMPONENT$ extends PureComponent {
  static defaultProps = {
    $START$
  };

  static propTypes = {
  };

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

export default $COMPONENT$;

rpfc

import React from 'react';
import PropTypes from 'prop-types';

function $COMPONENT$($PARAMETER$) {
  return (
    <div>$END$</div>
  );
}

$COMPONENT$.propTypes = {};
$COMPONENT$.defaultProps = {};

export default $COMPONENT$;

rpfc5

'use strict';

var React = require('react');
var PropTypes = require('prop-types');

function $COMPONENT$($PARAMETER$) {
  return (
    <div>$END$</div>
  );
}

$COMPONENT$.propTypes = {};
$COMPONENT$.defaultProps = {};

module.exports = $COMPONENT$;

rpfcaf

import React from 'react';
import PropTypes from 'prop-types';

const $COMPONENT$ = ($PARAMETER$) => {
  return (
    <div>$END$</div>
  );
};

$COMPONENT$.propTypes = {};
$COMPONENT$.defaultProps = {};

export default $COMPONENT$;

rcc

import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';

const $COMPONENT$ = createReactClass({
  render() {
    return (
      <div>$END$</div>
    );
  }
});

export default $COMPONENT$;

rcc5

'use strict';

var React = require('react');
var createReactClass = require('create-react-class');
var PropTypes = require('prop-types');

var $COMPONENT$ = createReactClass({
  render: function() {
    return (
      <div>$END$</div>
    );
  }
});

module.exports = $COMPONENT$;

rdom

import ReactDOM from 'react-dom';
$END$

rdom5

var ReactDOM = 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

static displayName = '$END$';

spt

static propTypes = {
  $START$: PropTypes.$END$,
};

sdp

static defaultProps = {
  $START$: $END$,
};

sct

static contextTypes = {
  $START$: PropTypes.$END$,
};

scct

static childContextTypes = {
  $START$: PropTypes.$END$,
};

sgds

static getDerivedStateFromProps(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

import ReactDOMServer from 'react-dom/server';
$END$

rdoms5

var ReactDOMServer = 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

<Provider value={$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$}