React/Redux Snippets
Contains basic snippets for React component and React-Redux components using AirBnB Style guide, AirBnB ESLint configs
Would you like me to add a snippet or contribute? Head over to the repo
Overview of available snippets
Semicolon?
In my team, we don't use semicolon in our code. If you want to have semicolon in your code, just add semicolon after prefix.
Example:
mstp;
It'll be:
const mapStateToProps = state => {
const { key } = state;
return { key };
}
Statefull Component
import React, { Component, PropTypes } from 'react'
import style from './style.css'
const propTypes = {
propTypes
}
const defaultProps = {
defaultProps
}
class Class extends Component {
constructor(props) {
super(props)
this.state = {
}
}
render() {
return (
<div>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
</div>
)
}
}
Class.propTypes = propTypes
Class.defaultProps = defaultProps
export default Class
Redux Component
import React, { Component, PropTypes } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import style from './style.css'
const propTypes = {
}
const defaultProps = {
}
class Class extends Component {
constructor(props) {
super(props)
this.state = {
}
}
render() {
return (
<div>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
</div>
)
}
}
Class.propTypes = propTypes
Class.defaultProps = defaultProps
const mapStateToProps = state => {
const { state } = state
return { state }
}
const mapDispatchToProps = dispatch => ({ actions }, dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(Class)
Stateless Component
import React, { PropTypes } from 'react'
import style from './style.css'
const propTypes = {
propTypes
}
const defaultProps = {
defaultProps
}
const Class = props => (
<div>
</div>
)
Class.propTypes = propTypes
Class.defaultProps = defaultProps
export default Class
componentWillMount
componentWillMount() {
}
componentDidMount
componentDidMount() {
}
componentWillReceiveProps
componentWillReceiveProps(nextProps) {
}
shouldComponentUpdate
shouldComponentUpdate(nextProps, nextState) {
}
componentWillUpdate
componentWillUpdate(nextProps, nextState) {
}
componentDidUpdate
componentDidUpdate(prevProps, prevState) {
}
componentWillUnmount
componentWillUnmount() {
}
binding Method
this.method = this.method.bind(this)
state
const { key } = this.state
setState
this.setState((prevState, props) => {
key: value,
})
props
const { key } = this.props
propTypes
props: PropTypes.types,
mapStateToProps
const mapStateToProps = state => {
const { key } = state
return { key }
}
mapDispatchToProps
const mapDispatchToProps = dispatch => ({
key: (params) => dispatch(func(params),
})
connect
export default connect(mapStateToProps, mapDispatchToProps)(Class)
action
export const func = (params) =>
(dispatch, getState) => {
content
}
reducer
const initState = {
key: value,
}
const reducer = (state = initState, action) => {
switch (action.type) {
default:
return state
}
}
export default reducer
actionType
case TYPE:
return Object.assign({}, state, {
key: action.payload,
})
importLib
Write Library name first for suggestion
