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 333
  • Win 174
  • OS X 85
  • Linux 74
Sep 20 Sep 19 Sep 18 Sep 17 Sep 16 Sep 15 Sep 14 Sep 13 Sep 12 Sep 11 Sep 10 Sep 9 Sep 8 Sep 7 Sep 6 Sep 5 Sep 4 Sep 3 Sep 2 Sep 1 Aug 31 Aug 30 Aug 29 Aug 28 Aug 27 Aug 26 Aug 25 Aug 24 Aug 23 Aug 22 Aug 21 Aug 20 Aug 19 Aug 18 Aug 17 Aug 16 Aug 15 Aug 14 Aug 13 Aug 12 Aug 11 Aug 10 Aug 9 Aug 8 Aug 7
Windows 0 0 0 0 0 0 0 0 1 0 0 1 0 1 0 1 1 0 1 0 0 0 0 0 0 0 1 0 2 0 0 0 0 0 0 0 1 0 0 1 0 0 1 1 0
OS X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 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 1 0
Linux 0 0 1 0 1 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 1 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;