React snippets(live templates) for JetBrains series editors (e.g. WebStorm, PHPStorm, IntelliJ IDEA, etc.), stolen from sublime-react and phpstorm-reactjs.
- Download
jetbrains-react.jar
; - Click
File
->Importing Settings...
on your IDE menubar, selectjetbrains-react.jar
, then clickOK
.
- 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.
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):
import React from 'react';
const $class$ = React.createClass({
render() {
return (
<div />
);
}
});
export default $class$;
'use strict';
var React = require('react');
var $class$ = React.createClass({
render: function() {
return (
<div />
);
}
});
module.exports = $class$;
import React from 'react';
class $class$ extends React.Component {
render() {
return (
<div />
);
}
}
$class$.propTypes = {};
$class$.defaultProps = {};
export default $class$;
$START$ = React.createClass({
render() {
return (
$END$
);
}
});
$START$ = React.createClass({
render: function() {
return (
$END$
);
}
});
componentDidMount() {
$END$
},
componentDidMount: function() {
$END$
},
componentDidUpdate(prevProps, prevState) {
$END$
},
componentDidUpdate: function(prevProps, prevState) {
$END$
},
componentWillMount() {
$END$
},
componentWillMount: function() {
$END$
},
componentWillReceiveProps(nextProps) {
$END$
},
componentWillReceiveProps: function(nextProps) {
$END$
},
componentWillUpdate(nextProps, nextState) {
$END$
},
componentWillUpdate: function(nextProps, nextState) {
$END$
},
componentWillUnmount() {
$END$
},
componentWillUnmount: function() {
$END$
},
ReactDOM.findDOMNode($END$);
forceUpdate($END$);
getDefaultProps() {
return {
$END$
};
},
getDefaultProps: function() {
return {
$END$
};
},
getInitialState() {
return {
$START$: $END$
};
},
getInitialState: function() {
return {
$START$: $END$
};
},
isMounted()
this.props
propTypes: {
$START$: React.PropTypes.$END$
},
$START$: React.PropTypes.$END$
this.refs.$END$
render() {
return (
<div />$END$
);
}
render: function() {
return (
<div />$END$
);
}
shouldComponentUpdate(nextProps, nextState) {
$END$
},
shouldComponentUpdate: function(nextProps, nextState) {
$END$
},
this.setState({
$START$: $END$
});
this.state.$END$