rexgalicie / 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

Importing

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

Install Manually

1. Download 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 resulates.

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

Documentation of available snippets (JSX):

rcc

import React from 'react';

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

export default $class$;

rcc5

'use strict';

var React = require('react');

var $class$ = React.createClass({
 render: function() {
   return (
     <div />
   );
 }
});

module.exports = $class$;

rcls

import React from 'react';

class $class$ extends React.Component {
  render() {
    return (
      <div />
    );
  }
}

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

export default $class$;

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

cdu5

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

cwm

componentWillMount() {
  $END$
},

cwm5

componentWillMount: function() {
  $END$
},

cwr

componentWillReceiveProps(nextProps) {
  $END$
},

cwr5

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

cwu

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

cwu5

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

cwum

componentWillUnmount() {
  $END$
},

cwum5

componentWillUnmount: function() {
  $END$
},

fdn

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

pt

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

rp

$START$: React.PropTypes.$END$

refs

this.refs.$END$

ren

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

ren5

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

scu

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

scu5

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

sst

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

state

this.state.$END$