React snippets for Webstorm

Live templates (snippets) for JetBrains product like Webstorm IDE.

Introduction

This repository contains LiveTemplates for React and to be used with JetBrains products such as WebStorm.

Live Templates are a set of abbreviations that expand in to 'code snippets' for common tasks such as creating variables and functions. These abbreviations significantly speed up development and reduce coding errors.

Installation

Webstorm

Depending on the operating system you are using, the <group_name>.xml files are stored at the following locations:

• [Windows] - <your_user_home_directory>\.WebStorm<version_number>\config\templates
• [Linux] - ~WebStorm<version>/config/templates
• [OS X] - ~/Library/Preferences/WebStorm<version>/templates

List of snippets

1. Components

   1. React ES6 Component
   2. React ES6 Component with Constructor
   3. React ES6 Functional Component
   4. React ES6 Stateless Component
   5. React ES6 Constructor
   6. React ES6 bind method to this

2. PropTypes

   1. React PropType array
   2. React PropType array required
   3. React PropType boolean
   4. React PropType boolean required
   5. React ES6 props definition
   6. React PropType element
   7. React PropType element required
   8. React PropType function
   9. React PropType function required
   10. React PropType number
   11. React PropType number required
   12. React PropType object
   13. React PropType object required
   14. React PropType shape
   15. React PropType string
   16. React PropType string required

3. Redux Actions

   1. React Action Type
   2. React Action function

4. React Lifecycle Hooks

   1. ComponentDidCatch
   2. ComponentWillMount
   3. Component Render
   4. ComponentDidMount
   5. ComponentWillUnmount
   6. ComponentWillUpdate
   7. ComponentDidUpdate
   8. ShouldComponentUpdate
   9. ComponentWillReceiveProps

How to use the Live Templates

The following show the available abbreviations and their default implementations.

React Components

rc

React ES6 Component

import React, { Component, PropTypes } from 'react';

export default class $VAR$ extends Component {
  render() {
    return (
      <div></div>
    );
  }
}

$VAR$.propTypes = {
  $END$
};

rcc

React ES6 Component with Constructor

import React, { Component, PropTypes } from 'react';

export default class $COMPONENT$ extends Component {
  constructor(props) {
    super(props);
  }

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

$COMPONENT$.propTypes = {
  $END$
};

rfunc

React ES6 Functional Component

import React, { PropTypes } from 'react';

export default function $COMPONENT$ (props) {
  return (
    <div></div>
  );
}

$COMPONENT$.propTypes = {
  $END$
};

rcf

React ES6 Stateless Component

import React from 'react';

const $VAR$ = ($END$) => {
  return (
    <div></div>
  );
};

export default $VAR$;

rconst

React ES6 Constructor

constructor(props) {
  super(props);
  $END$
}

rbm

React ES6 bind method to this

this.$VAR$ = this.$VAR$.bind(this);
$END$

React PropTypes

rpa

React PropType array

$VAR$: PropTypes.array,
$END$

rpar

React PropType array required

$VAR$: PropTypes.array.isRequired,
$END$

rpb

React PropType boolean

$VAR$: PropTypes.bool,
$END$

rpbr

React PropType boolean required

$VAR$: PropTypes.bool.isRequired,
$END$

rpd

React ES6 props definition

$VAR$.propTypes = {
  $END$
};

rpe

React PropType element

$VAR$: PropTypes.element,
$END$

rper

React PropType element required

$VAR$: PropTypes.element.isRequired,
$END$

rpf

React PropType function

$VAR$: PropTypes.func,
$END$

rpfr

React PropType function required

$VAR$: PropTypes.func.isRequired,
$END$

rpn

React PropType number

$VAR$: PropTypes.number,
$END$

rpnr

React PropType number required

$VAR$: PropTypes.number.isRequired,
$END$

rpo

React PropType object

$VAR$: PropTypes.object,
$END$

rpor

React PropType object required

$VAR$: PropTypes.object.isRequired,
$END$

rps

React PropType shape

$VAR$: PropTypes.shape({
  $END$
}),

rpsr

React PropType shape required

$VAR$: PropTypes.shape({
  $END$
}).isRequired,

rpstr

React PropType string

$VAR$: PropTypes.string,
$END$

rpstrr

React PropType string required

$VAR$: PropTypes.string.isRequired,
$END$

React Redux Actions

rat

React Action Type

export const $VAR$ = '$VAR$';
$END$

ra

React Action function

export function $VAR$(payload) {
  return { type: types.$VAR2$, payload };
}
$END$

React Component Lifecycle hook

rcdc

ComponentDidCatch

componentDidCatch() {
  $END$
}

rcwm

ComponentWillMount

componentWillMount() {
  $END$
}

rcr

Component Render

render() {
  $END$
}

rcdm

ComponentDidMount

componentDidMount() {
  $END$
}

rcwum

ComponentWillUnmount

componentWillUnmount() {
  $END$
}

rcwu

ComponentWillUpdate

componentWillUpdate() {
  $END$
}

rcdu

ComponentDidUpdate

componentDidUpdate() {
  $END$
}

rcscu

ShouldComponentUpdate

shouldComponentUpdate() {
  $END$
}

rcwrp

ComponentWillReceiveProps

componentWillReceiveProps(nextProps) {
  $END$
}

Credits

• Netguru for inspiration

License

MIT © Krystian Błaszczyk