ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Rocket​Native Snippets

by Rocketseat ST2/ST3

Rocketseat React Native snippets for Sublime Text Editor

Details

Installs

  • Total 116
  • Win 51
  • OS X 45
  • Linux 20
Jun 19 Jun 18 Jun 17 Jun 16 Jun 15 Jun 14 Jun 13 Jun 12 Jun 11 Jun 10 Jun 9 Jun 8 Jun 7 Jun 6 Jun 5 Jun 4 Jun 3 Jun 2 Jun 1 May 31 May 30 May 29 May 28 May 27 May 26 May 25 May 24 May 23 May 22 May 21 May 20 May 19 May 18 May 17 May 16 May 15 May 14 May 13 May 12 May 11 May 10 May 9 May 8 May 7 May 6
Windows 0 1 0 0 0 0 0 0 1 0 0 0 1 2 0 0 0 1 1 0 1 1 0 0 0 0 0 0 0 0 0 0 1 3 0 0 0 0 0 1 0 0 0 0 0
OS X 0 0 0 0 0 1 0 0 0 0 0 0 1 0 0 1 0 0 0 0 0 0 0 0 1 1 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0
Linux 0 0 1 0 0 1 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Readme

Source
raw.​githubusercontent.​com

RocketNative Snippets

React Native code snippets for Sublime Text

Summary

Demo

Installation

To install through Package Control, search for RocketNative Snippets. If you still don't have Package Control in Sublime Text, go get it. It's pure awesomeness.

Usage

Component

[component] - Create react-native component

/* Core */
import React, { Component } from 'react';

/* Presentational */
import { View } from 'react-native';

// import styles from './styles';

export default class MyComponent extends Component {
  render() {
    return (
      <View />
    );
  }
}

[proptypes] - Create component propTypes

static propTypes = {

};

[defaultprops] - Create component defaultProps

static defaultProps = {

};

[render] - Create render method

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

ESLint

[eslint] - Create eslint file config

{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "jest": true
  },
  "plugins": [
    "react-native",
    "jsx-a11y",
    "import"
  ],
  "extends": [
    "airbnb",
    "plugin:react-native/all"
  ],
  "rules": {
    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }],
    "global-require": "off",
    "no-console": "off",
    "import/prefer-default-export": "off",
    "no-unused-vars": ["error", {"argsIgnorePattern": "^_"}]
  },
  "settings": {
    "import/resolver": {
      "babel-module": {}
    }
  },
  "globals": {
    "__DEV__": true
  }
}

Redux

[reduxSetup] - Create Redux Setup file

import { combineReducers } from 'redux';

/* Reducers */
// import navReducer from 'navigation/reducer';

import configureStore from './configureStore';
// import rootSaga from './sagas';

export default () => {
  const rootReducer = combineReducers({
    // nav: navReducer,
  });

  return configureStore(rootReducer, rootSaga);
};

[configureStore] - Create configureStore file

import { createStore, applyMiddleware, compose } from 'redux';

export default (rootReducer) => {
  const middleware = [];
  const enhancers = [];

  /* Saga */
  // const sagaMonitor = __DEV__ ? console.tron.createSagaMonitor() : null;
  // const sagaMiddleware = createSagaMiddleware({ sagaMonitor });
  // middleware.push(sagaMiddleware);

  enhancers.push(applyMiddleware(...middleware));

  /* Store */
  const createAppropriateStore = __DEV__ ? console.tron.createStore : createStore;
  const store = createAppropriateStore(rootReducer, compose(...enhancers));

  /* Run Saga */
  // sagaMiddleware.run(rootSaga);

  return store;
};

[reduxComponent] - Create react-native Redux component

/* Core */
import React, { Component } from 'react';

/* Presentational */
import { View } from 'react-native';

/* Redux */
import { connect } from 'react-redux';

// import styles from './styles';

class  extends Component {
  render() {
    return (
      <View />
    );
  }
}

const mapStateToProps = state => ({

});

const mapDispatchToProps = dispatch => ({

});

export default connect(mapStateToProps, mapDispatchToProps)();

[mapStateToProps] - Create redux mapStateToProps

const mapStateToProps = state => ({

});

[mapDispatchToProps] - Create redux mapDispatchToProps

const mapDispatchToProps = dispatch => ({

});

[duck] - Create react-native duck module

import { createReducer, createActions } from 'reduxsauce';
import Immutable from 'seamless-immutable';

/* Types & Action Creators */

const { Types, Creators } = createActions({
  // actionType: ['dataPassed'],
});

export const TesteTypes = Types;
export default Creators;

/* Initial State */

export const INITIAL_STATE = Immutable({
  // data: [],
});

/* Reducers */

// export const reducer = state =>
//   state.merge({ data: [] });

/* Reducers to types */

export const reducer = createReducer(INITIAL_STATE, {
  // [Types.ACTION_TYPE]: reducer,
});

Reactotron

[reactotronconfig] - Create Reactotron Config

import Reactotron from 'reactotron-react-native';

if (__DEV__) {
  const tron = Reactotron
    .configure()
    .useReactNative()
    .connect();

  tron.clear();

  console.tron = tron;
}

Babel

[moduleResolver] - Create Module Resolver config

"plugins": [
  [
    "module-resolver",
    {
      "root": ["./src"],
      "extensions": [".js", ".ios.js", ".android.js"]
    }
  ]
]

Apisauce

[apisauce] - Create APISauce Config

import { create } from 'apisauce';

const api = create({
  baseURL: 'http://localhost:3000',
});

export default api;