Atom snippets for React and React Native development

snippets.cson

# Your snippets
#
# Atom snippets allow you to enter a simple prefix in the editor and hit tab to
# expand the prefix into a larger code block with templated values.
#
# You can create a new snippet in this file by typing "snip" and then hitting
# tab.
#
# An example CoffeeScript snippet to expand log to console.log:
#
# '.source.coffee':
#   'Console log':
#     'prefix': 'log'
#     'body': 'console.log $1'
#
# Each scope (e.g. '.source.coffee' above) can only be declared once.
#
# This file uses CoffeeScript Object Notation (CSON).
# If you are unfamiliar with CSON, you can read more about it in the
# Atom Flight Manual:
# https://atom.io/docs/latest/using-atom-basic-customization#cson

'.source.js':
  'React Component Index Boilerplate':
    'prefix': 'boilerindex',
    'body': """
import $1 from './$1';

export default $1;
"""
  'React Component Boilerplate':
    'prefix': 'boilercomponent',
    'body': """
// @flow
    
import React, { Component } from 'react';

import s from './$1.scss';

export default class $1 extends Component<> {
  render() {
    return (
      <div>
        <h1>$1</h1>
      </div>
    );
  }
}
"""
  'Stateless React Component Boilerplate':
    'prefix': 'boilerstateless',
    'body': """
// @flow
    
import React from 'react';

import s from './$1.scss';

export default () => {
  return (
    <div>
      <h1>$1</h1>
    </div>
  );
}
"""
  'React Native Component Boilerplate':
    'prefix': 'boilernative',
    'body': """
// @flow

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

import * as S from "./_styledComponents";

export default class $1 extends Component<{}> {
  render() {
    return (
      <View>
        <Text>$1</Text>
      </View>
    );
  }
}
"""