Badass React Snippets

Package for Github's Atom Editor

About

These snippets are made to work with the latest ES6 standards, adhere to the airbnb eslint config, and are React/React-Native agnostic.

Add the airbnb eslint config to your project (optional)

npm install --save-dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y
echo '\''{ extends: [airbnb], }'\'' > .eslintrc'

Installation

apm install badass-react-snippets

Usage

After install just type one of the titles below and hit tab then the snippet will expand in your editor. Only works on files already saved as .js or .jsx

Continue hitting tab to cycle through and highlight common editing points in a component.

rcc

React ES6 Component with Constructor

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

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

const propTypes = {};

const defaultProps = {};

export default class MyComponent extends Component {

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

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

}

MyComponent.propTypes = propTypes;
MyComponent.defaultProps = defaultProps;

rc

React ES6 Component

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

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

const propTypes = {};

const defaultProps = {};

export default class MyComponent extends Component {

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

}

MyComponent.propTypes = propTypes;
MyComponent.defaultProps = defaultProps;

rfunc

React ES6 Functional Component

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

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

const propTypes = {};

const defaultProps = {};

export default function MyComponent(props) {
  return (
    <div>
      <h1>Title</h1>
    </div>
  );
}

MyComponent.propTypes = propTypes;
MyComponent.defaultProps = defaultProps;

rconst

React ES6 Constructor

constructor(props) {
  super(props);
  this.state = {
    someVariable,
  };
}

rbm

React ES6 bind method to this

this.someMethod = this.someMethod.bind(this);

rcc7

React ES7 Component with Constructor using static. Not airbnb compliant.

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

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

export default class MyComponent extends Component {

  static defaultProps = {}

  static propTypes = {}

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

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

}