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
- Download
jetbrains-react.jar
; - Click
File
->Importing Settings...
on your IDE menubar, selectjetbrains-react.jar
, then clickOK
.
Install Manually
- 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
-
Restart your IDE.
-
To see all templates, go to
Preferences
->Live Templates
and expand theReactJS
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$
ct
contextTypes: {
$START$: React.PropTypes.$END$
},
cct
childContextTypes: {
$START$: React.PropTypes.$END$
},
ctx
this.context.$END$
gcc
getChildContext() {
return {
$START$: $END$
};
},
gcc5
getChildContext: function() {
return {
$START$: $END$
};
},