idea-react-snippets

React snippets (live templates) for idea.

Install

1. Download settings.jar
2. Click on "File" -> "Importing Settings..." select settings.jar and click OK.

Usage description

im

import $START$ from '$END$';

imp

import { $START$ } from '$END$';

imr

import React, { Component } from 'react';
$END$

ims

import '$END$';

rcc

import React, { Component } from 'react';
import PropTypes from 'prop-types';

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

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

rfc

import React from 'react';
import PropTypes from 'prop-types';

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

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

export default $COMPONENT$;

rfc5

import React from 'react';
import PropTypes from 'prop-types';

function $COMPONENT$($PARAMETER$) {
  return (
    <div>$END$</div>
  );
}

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

export default $COMPONENT$;

rpc

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';

export default class $COMPONENT$ extends PureComponent {
  render() {
    return (
      <div>$END$</div>
    );
  }
}

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

con

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

ctor

constructor(props) {
  super(props);
  
  this.state = { $START$ };
  $END$
}

pst

state = {
  $START$: $END$,
};

sdp

static defaultProps = {
  $START$: $END$,
};

spts

static propTypes = {
  $START$: PropTypes.$END$,
};

cdc

componentDidCatch() {
  $END$
}

cdm

componentDidMount() {
  $END$
}

cdu

componentDidUpdate(prevProps, prevState) {
  $END$
}

cwm

componentWillMount() {
  $END$
}

cwr

componentWillReceiveProps(nextProps$START$) {
  $END$
}

cwu

componentWillUpdate(nextProps, nextState) {
  $END$
}

cwun

componentWillUnmount() {
  $END$
}

scu

shouldComponentUpdate(nextProps, nextState) {
  $END$
}

gb

getSnapshotBeforeUpdate(prevProps, prevState) {
  $END$
}

re

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

cpts

$COMPONENT$.propTypes = {
  $START$: PropTypes.$END$,
};

pt

$START$: PropTypes.$END$,

tpr

this.props.$END$

tst

this.state.$END$

drp

const { $END$ } = this.props;

dst

const { $END$ } = this.state;

sst

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

mdp

const mapDispatchToProps = dispatch => {
  return {
    $END$
  };
};

mst

const mapStateToProps = state => {
  return {
    $END$
  };
};

ecc

export default connect($PARAM$, $PARAM2$)($COMPONENT$);

rf

ref={$PROPERTY$ => this.$END$ = $PROPERTY$}

cef

const $NAME$ = () => {
  $END$
};

cem

$NAME$ = () => {
  $END$
}

cfp

const $NAME$ = ($PARAMS$) => {
  $END$
};

cmp

$NAME$ = ($PARAM$) => {
  $END$
}