React Native Code Snippets for VS Code
Summary
Installation
To install Snippets on OSX, paste javascript.json
file in:
/Users/<your_user>/Library/Application Support/Code/User/snippets/
To install Snippets on Windows, paste javascript.json
file in:
C:\Users\<your_user>\AppData\Roaming\Code\User\snippets
Usage
Component
[rnc] - Create React Native Stateful Component
import React, { Component } from 'react';
import { View } from 'react-native';
// import styles from './styles';
export default class MyComponent extends Component {
render() {
return (
<View />
);
}
}
[rnstc] - Create React Native Stateless Component
import React from 'react';
import { View } from 'react-native';
// import styles from './styles';
const MyComponent = () => (
<View />
);
export default MyComponent;
[styles] - Create Styles File
import { StyleSheet } from 'react-native';
// import { colors, fonts, metrics } from 'styles';
const styles = StyleSheet.create({});
export default styles;
[proptypes] - Create Stateful Component PropTypes
static propTypes = {};
[defaultprops] - Create Stateful Component DefaultProps
static defaultProps = {};
[ctor] - Create Stateful Component Constructor Method
constructor(props) {
super(props);
this.state = {};
}
[render] - Create Stateful Component 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 Configure Store 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 Stateful Redux Component
import React, { Component } from 'react';
import { View } from 'react-native';
import { connect } from 'react-redux';
// import styles from './styles';
class MyComponent extends Component {
render() {
return (
<View />
);
}
}
const mapStateToProps = state => ({});
const mapDispatchToProps = dispatch => ({});
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
[reduxComponent] - Create React Native Stateless Redux Component
import React from 'react';
import { View } from 'react-native';
import { connect } from 'react-redux';
// import styles from './styles';
const MyComponent = () => (
<View />
);
const mapStateToProps = state => ({});
const mapDispatchToProps = dispatch => ({});
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
[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
{
"presets": ["react-native"],
"plugins": [
[
"module-resolver",
{
"cwd": "babelrc",
"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;