denodenodeno / jetbrains-react

React.js live templates for JetBrains editors.

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

Documentation of available snippets:

rcls

import React, {
  Component,
  PropTypes,
} from 'react';

class $COMPONENT$ extends Component {
  render() {
    return (
      <div>$END$</div>
    );
  }
}

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

export default $COMPONENT$;

rpfc

import React, {
  PropTypes,
} from 'react';

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

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

export default $COMPONENT$;

rpfc5

'use strict';

var React = require('react');
var PropTypes = React.PropTypes;

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

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

module.exports = $COMPONENT$;

rpfcaf

import React, {
  PropTypes,
} from 'react';

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

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

export default $COMPONENT$;

rcc

import React, {
  PropTypes,
} from 'react';

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

export default $COMPONENT$;

rcc5

'use strict';

var React = require('react');
var PropTypes = React.PropTypes;

var $COMPONENT$ = React.createClass({
  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$ = React.createClass({
  render() {
    return (
      $END$
    );
  }
});

rccc5

$START$ = React.createClass({
  render: function() {
    return (
      $END$
    );
  }
});

cdm

componentDidMount() {
  $END$
}

cdm5

componentDidMount: function() {
  $END$
},

cdu

componentDidUpdate(prevProps, prevState, prevContext) {
  $END$
}

cdu5

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

cwm

componentWillMount() {
  $END$
}

cwm5

componentWillMount: function() {
  $END$
},

cwr

componentWillReceiveProps(nextProps, nextContext) {
  $END$
}

cwr5

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

cwu

componentWillUpdate(nextProps, nextState, nextContext) {
  $END$
}

cwu5

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

cwum

componentWillUnmount() {
  $END$
}

cwum5

componentWillUnmount: function() {
  $END$
},

dn

displayName: '$END$',

dnp

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

fdn

findDOMNode($END$);

rfdn

ReactDOM.findDOMNode($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

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, nextContext) {
  $END$
}

scu5

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

sst

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

state

this.state.$END$

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$
  };
},

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$,
};

cstt

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

tsn

transitionName="$END$"

tsa

transitionAppear={$END$}

tse

transitionEnter={$END$}

tsl

transitionLeave={$END$}

tset

transitionEnterTimeout={$END$}

tslt

transitionLeaveTimeout={$END$}

tsat

transitionAppearTimeout={$END$}

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$}