_React Templates

_ReactTemplates.md

Use these to quickly create new React modules in WebStorm.

• Webstorm > Preferences
• Editor > File and Code Templates
• Paste each in

Note: For React Test, you may want to change the extension to spec.js

Javascript Test

import $NAME from './$NAME';

describe('$NAME', () => {

  beforeEach(() => {
    
  });

  it('does', () => {
  
  });
});

React Component

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

const $NAME = (props) => {
  return (
    
  );
};

${NAME}.propTypes = {
  // myProp: PropTypes.string.isRequired
};

export default $NAME;

React Component Test Template

import React from 'react';
import { shallow } from 'enzyme';

import {$NAME} from './$NAME';

describe('$NAME', () => {
  let props;
  let mounted$NAME;

  const getComponent = () => {
    if (!mounted$NAME) {
      mounted$NAME = shallow(<$NAME {...props} />);
    }
    return mounted$NAME;
  };

  beforeEach(() => {
    props = {
      
    };
    mounted$NAME = undefined;
  });
  
  it('always renders', () => {
    const component = getComponent().find('div');
    expect(component.length).toBeGreaterThan(0);
  });
});

React Connected Container

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

class $NAME extends Component {
  constructor(props, context) {
    super(props, context);
  }

  render() {
    return (
        
    );
  }
}

${NAME}.propTypes = {
  //myProp: PropTypes.string.isRequired
};

function mapStateToProps(state, ownProps) {
  return {
    state: state
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)($NAME);