Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Webstorm live templates

React Native Live Templates for WebStorm

How to add Live Template in Webstorm

  1. open preferences
  2. editor> live templates
  3. add template group for React Native
  4. add templates below to the new group
  5. define context > javascript
  6. edit variables > add "fileNameWithoutExtension" to "$fnName$"

Templates

Javascript

deb: Debugger

debugger;

log: Console.log

console.log($CONTENT$);

iife: Immediately-Invoked Function Expression

(function () {
    $CONTENT$
}());

#### `pro`: Promise ES6 style
```javascript
new Promise((resolve, reject) => {
    $CONTENT$
});

pro: Promise ES5 style

new Promise(function(resolve, reject) {
    $CONTENT$
});

f: Function ES6 style

($ARGUMENTS$) => {
    $BODY$
}

fu: Function ES5 style

function $NAME$($ARGUMENTS$) {
    $BODY$  
}

class: Class

class $CLASS_NAME$ {
  constructor($CONSTRUCTOR_ARGUMENTS$) {
    $CONTRUCTOR_BLOCK$
  }
}

us: Use strict

'use strict';
$END$

React native

rncc: React Native Statefull Component

import React, { Component } from 'react';
import { View } from 'react-native';

class $fnName$ extends Component {
  propTypes = {$PROP_TYPES$}
  state = {$STATE$};

  render() {
    return (
        $RENDER$
    )
  }
}

rncf: React Native Functional Component

import React from 'react';
import { View } from 'react-native';

export const $fnName$ = () => {
  return (
    $RENDER$
  )
};

$fnName$.propTypes = {
    $PROP_TYPES$
}

rnrs: React Native Redux Store

export function dummieDispatch (state) {
  return {
    type: TEST,
    state,
  }
}

export function dummieAction () {
  return function (dispatch, getState) {
    dispatch(dummieDispatch())
  }
}



const initialState = {
 
}

export default function settings (state = initialState, action) {
  switch (action.type) {
    case TEST :
      return {
        ...state,
      }
    default :
      return state
  }
}

rnss: React Native Stylesheet

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
    $CONTENT$
});

export default styles;
@JasperVercammen

This comment has been minimized.

Copy link

commented Feb 15, 2017

React (native) goodies

cdm: componentDidMount

componentDidMount() {
  $END$
}

cdu: componentDidUpdate

componentDidUpdate(prevProps, prevState) {
  $END$
}

cstr: constructor

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

cwm: componentWillMount

componentWillMount() {
  $END$
}

cwr: componentWillReceiveProps

componentWillReceiveProps(nextProps) {
  $END$
}

cwu: componentWillUpdate

componentWillUpdate(nextProps, nextState) {
  $END$
}

cwum: componentWillUnmount

componentWillUnmount() {
  $END$
}

rcomp: react component (es6)

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

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

$COMPONENT$.propTypes = {
};

$COMPONENT$.defaultProps = {
};

export default $COMPONENT$;

rfcomp: react functional component

import React, {PropTypes} from 'react';

const $COMPONENT$ = ({}) => {
  return (
    
  );
};

$COMPONENT$.propTypes = {
};

$COMPONENT$.defaultProps = {
};

export default $COMPONENT$;

rrcomp: react redux component

import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux'

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

$COMPONENT$.propTypes = {
};

$COMPONENT$.defaultProps = {
};

const mapStateToProps = (state) => {
  return {
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
  };
};

export default connect(mapStateToProps, mapDispatchToProps)($COMPONENT$);

scu: shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) {
  $END$
}```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.