Home Original page

GitHub - bennysghost/jetbrains-react: React.js live templates for JetBrains editors.

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

  1. Restart your IDE.

  2. 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:

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

dnp

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

fdn

rfdn

ReactDOM.findDOMNode($END$);

fup

gdp

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

gdp5

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

gis

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

gis5

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

ism

props

dsih

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

pts

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

pt

$START$: PropTypes.$END$,

refs

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

ct

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

cct

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

ctx

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

tsa

tse

tsl

tset

transitionEnterTimeout={$END$}

tslt

transitionLeaveTimeout={$END$}

tsat

transitionAppearTimeout={$END$}

oncp

onct

onpt

oncpse

oncpss

onCompositionStart={$END$}

oncpsu

onCompositionUpdate={$END$}

onkd

onps

onku

onfs

onbl

oncg

onip

onsb

onc

oncm

ondc

ondg

ondge

ondgetr

ondget

ondgl

ondgo

ondgst

ondp

onmd

onme

onml

onmm

onmot

onmov

onmu

onsl

ontc

onte

ontm

onts

onsl

onwl

onabt

oncpl

oncpt

ondc

onempt

onekpt

onend

onldd

onldmd

onls

onpaus

opl

onplg

onpgs

onrc

onsked

onskin

onstd

onsupd

ontu

onvc

onwt

onld

onerr

onas

onae

onai

onAnimationIteration={$END$}

ontse