React Redux Simple Snippets

Collection of the essentioanl Snippets for React, React Native and Redux.

These snippets are selected based on my own use. Not everything is included, it is meant to be a minimal collection of the essentials only.

Works With

• JavaScript (.js)
• JavaScript React (.jsx)

Snippets List

Snippets

rcc

import React, { Component } from 'react';

class $1 extends Component {
  render() {
    return <div>$1</div>;
  }
}

export default $1;

rccc

import React, { Component } from 'react';

class $1 extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return <div>$1</div>;
  }
}

export default $1;

rcr

import React, { Component } from 'react';
import { connect } from 'react-redux';

class $1 extends Component {
  render() {
    return <div>$1</div>;
  }
}

export default connect()($1);

rncc

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

class $1 extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>$1</Text>
      </View>
    );
  }
}

export default $1;

rnfc

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

const $1 = () => {
  return (
    <View style={styles.container}>
      <Text>$1</Text>
    </View>
  );
};

export default $1;

rncr

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { connect } from 'react-redux';

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

class $1 extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>$1</Text>
      </View>
    );
  }
}

export default connect()($1);

rfc

import React from 'react';
import PropTypes from 'prop-types';

const $1 = () => {
  return <div>$1</div>;
};

$1.propTypes = {};

export default $1;

con

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

ss

this.setState({ $1 });

imr

import React from 'react';

imrn

import { $1 } from 'react-native';

rnss

const styles = StyleSheet.create({
  $1: {},
});

reducer

const INITIAL_STATE = {};

export const $1 = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case $2:
      return;
    default:
      return state;
  }
};

action

export const $1 = () => {
  return async (dispatch) => {
    try {
      $2;
    } catch (e) {}
  };
};