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
Last active
January 14, 2019 15:24
-
-
Save corymcdaniel/875dfcd9df3260db29906b2a24503cf9 to your computer and use it in GitHub Desktop.
_React Templates
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import $NAME from './$NAME'; | |
| describe('$NAME', () => { | |
| beforeEach(() => { | |
| }); | |
| it('does', () => { | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import PropTypes from 'prop-types'; | |
| const $NAME = (props) => { | |
| return ( | |
| ); | |
| }; | |
| ${NAME}.propTypes = { | |
| // myProp: PropTypes.string.isRequired | |
| }; | |
| export default $NAME; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment