React snippets(live templates) for JetBrains series editors (e.g. WebStorm, PHPStorm, IntelliJ IDEA, etc.), stolen from sublime-react and phpstorm-reactjs.
- Download
settings.jar; - Click
File->Importing Settings...on your IDE menu, selectsettings.jar, then clickOK.
- Download(save as...) and copy the
jetbrains/templates/ReactJS.xmlfile 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 Templatesand expand theReactJSTemplate 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 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:
Tips:
Documentation of available snippets:
import React, { Component } from 'react'; import PropTypes from 'prop-types'; class $COMPONENT$ extends Component { render() { return ( <div>$END$</div> ); } } $COMPONENT$.propTypes = {}; $COMPONENT$.defaultProps = {}; export default $COMPONENT$;import React from 'react'; import PropTypes from 'prop-types'; function $COMPONENT$($PARAMETER$) { return ( <div>$END$</div> ); } $COMPONENT$.propTypes = {}; $COMPONENT$.defaultProps = {}; export default $COMPONENT$;'use strict'; var React = require('react'); var PropTypes = require('prop-types'); function $COMPONENT$($PARAMETER$) { return ( <div>$END$</div> ); } $COMPONENT$.propTypes = {}; $COMPONENT$.defaultProps = {}; module.exports = $COMPONENT$;import React from 'react'; import PropTypes from 'prop-types'; const $COMPONENT$ = ($PARAMETER$) => { return ( <div>$END$</div> ); }; $COMPONENT$.propTypes = {}; $COMPONENT$.defaultProps = {}; export default $COMPONENT$;import React from 'react'; import createReactClass from 'create-react-class'; import PropTypes from 'prop-types'; const $COMPONENT$ = createReactClass({ render() { return ( <div>$END$</div> ); } }); export default $COMPONENT$;'use strict'; var React = require('react'); var createReactClass = require('create-react-class'); var PropTypes = require('prop-types'); var $COMPONENT$ = createReactClass({ render: function() { return ( <div>$END$</div> ); } }); module.exports = $COMPONENT$;import ReactDOM from 'react-dom'; $END$var ReactDOM = require('react-dom'); $END$$START$ = createReactClass({ render() { return ( $END$ ); } });$START$ = createReactClass({ render: function() { return ( $END$ ); } });componentDidMount() { $END$ }componentDidMount: function() { $END$ },componentDidUpdate(prevProps, prevState, prevContext) { $END$ }componentDidUpdate: function(prevProps, prevState, prevContext) { $END$ },componentWillMount() { $END$ }componentWillMount: function() { $END$ },componentWillReceiveProps(nextProps, nextContext) { $END$ }componentWillReceiveProps: function(nextProps, nextContext) { $END$ },componentWillUpdate(nextProps, nextState, nextContext) { $END$ }componentWillUpdate: function(nextProps, nextState, nextContext) { $END$ },componentWillUnmount() { $END$ }componentWillUnmount: function() { $END$ },displayName: '$END$',$START$.displayName = '$END$';findDOMNode($END$);ReactDOM.findDOMNode($END$);forceUpdate($END$);getDefaultProps() { return { $END$ }; }getDefaultProps: function() { return { $END$ }; },getInitialState() { return { $START$: $END$ }; }getInitialState: function() { return { $START$: $END$ }; },isMounted()this.propsdangerouslySetInnerHTML={{__html: '$END$'}}propTypes: { $START$: PropTypes.$END$, },$START$: PropTypes.$END$,this.refs.$END$render() { return ( <div>$END$</div> ); }render: function() { return ( <div>$END$</div> ); }shouldComponentUpdate(nextProps, nextState, nextContext) { $END$ }shouldComponentUpdate: function(nextProps, nextState, nextContext) { $END$ },this.setState({ $START$: $END$, });this.state.$END$contextTypes: { $START$: PropTypes.$END$, },childContextTypes: { $START$: PropTypes.$END$, },this.context.$END$getChildContext() { return { $START$: $END$ }; }getChildContext: function() { return { $START$: $END$ }; },static displayName = '$END$';static propTypes = { $START$: PropTypes.$END$, };static defaultProps = { $START$: $END$, };static contextTypes = { $START$: PropTypes.$END$, };static childContextTypes = { $START$: PropTypes.$END$, };constructor(props, context$START$) { super(props, context$END$); }transitionName="$END$"transitionAppear={$END$}transitionEnter={$END$}transitionLeave={$END$}transitionEnterTimeout={$END$}transitionLeaveTimeout={$END$}transitionAppearTimeout={$END$}onCopy={$END$}onCut={$END$}onPaste={$END$}onCompositionEnd={$END$}onCompositionStart={$END$}onCompositionUpdate={$END$}onKeyDown={$END$}onKeyPress={$END$}onKeyUp={$END$}onFocus={$END$}onBlur={$END$}onChange={$END$}onInput={$END$}onSubmit={$END$}onClick={$END$}onContextMenu={$END$}onDoubleClick={$END$}onDrag={$END$}onDragEnd={$END$}onDragEnter={$END$}onDragExit={$END$}onDragLeave={$END$}onDragOver={$END$}onDragStart={$END$}onDrop={$END$}onMouseDown={$END$}onMouseEnter={$END$}onMouseLeave={$END$}onMouseMove={$END$}onMouseOut={$END$}onMouseOver={$END$}onMouseUp={$END$}onSelect={$END$}onTouchCancel={$END$}onTouchEnd={$END$}onTouchMove={$END$}onTouchStart={$END$}onScroll={$END$}onWheel={$END$}onAbort={$END$}onCanPlay={$END$}onCanPlayThrough={$END$}onDurationChange={$END$}onEmptied={$END$}onEncrypted={$END$}onEnded={$END$}onLoadedData={$END$}onLoadedMetadata={$END$}onLoadStart={$END$}onPause={$END$}onPlay={$END$}onPlaying={$END$}onProgress={$END$}onRateChange={$END$}onSeeked={$END$}onSeeking={$END$}onStalled={$END$}onSuspend={$END$}onTimeUpdate={$END$}onVolumeChange={$END$}onWaiting={$END$}onLoad={$END$}onError={$END$}onAnimationStart={$END$}onAnimationEnd={$END$}onAnimationIteration={$END$}onTransitionEnd={$END$}