Sublime Text snippets for writing React components.
These snippets (based on sublime-react's) use ES6 concise method definitions and only use semicolons where necessary.
childContextTypes: {
${1}: React.PropTypes.${2:string}
},
componentDidMount() {
${1}
},
componentDidUpdate(prevProps, prevState) {
${1}
},
className=${2:"${1}"}
contextTypes: {
${1}: React.PropTypes.${2:string}
},
componentWillMount() {
${1}
},
componentWillReceiveProps(nextProps) {
${1}
},
componentWillUpdate(nextProps, nextState) {
${1}
},
componentWillUnmount() {
${1}
},
let {${1}} = this.props
let {${1}} = this.state
dangerouslySetInnerHTML={${3:{__html: ${2:'${1}'}}}}
ReactDOM.findDOMNode(${1})
this.forceUpdate(${1})
getChildContext() {
return {
${1}: ${2}
}
},
getDefaultProps() {
return {
${1}: ${2}
}
},
getInitialState() {
return {
${1}: ${2}
}
},
this.isMounted()
this.props.${1}
${1}: React.PropTypes.${2:string}
propTypes: {
${1}: React.PropTypes.${2:string}
},
let ${1} = React.createClass({
render() {
return <${3:div}${2: className="${1}"}>
${4}
</${3:div}>
}
})
React.cloneElement(${1:this.props.children}, {${2}})
React.cloneElement(this.props.children, {${1}})
let ${1} = ({${2}}) => <${4:div}${3: className="${1}"}>
${5}
</${4:div}>
import React from 'react'
let ${1:${TM_FILENAME/(.?\w*)(?:\.\w+)*$/$1/g}} = React.createClass({
render() {
return <${3:div}${2: className="${1:${TM_FILENAME/(.?\w*)(?:\.\w+)*$/$1/g}}"}>
${4}
</${3:div}>
}
})
export default ${1:${TM_FILENAME/(.?\w*)(?:\.\w+)*$/$1/g}}
ReactDOM.findDOMNode(this.refs.${1})
ReactDOM.render(<${1}/>, ${3:document.querySelector('#${2:app}')})
class ${1} extends Component {
constructor(props) {
super(props)
}
render() {
return <${3:div}${2: className="${1}"}>
${4}
</${3:div}>
}
})
import React, {Component} from 'react'
export default class ${1:${TM_FILENAME/(.?\w*)(?:\.\w+)*$/$1/g}} extends Component {
constructor(props) {
super(props)
}
render() {
return <${3:div}${2: className="${1:${TM_FILENAME/(.?\w*)(?:\.\w+)*$/$1/g}}"}>
${4}
</${3:div}>
}
})
render() {
return <div>
${1}
</div>
}
import React from 'react'
import {render} from 'react-dom'
import ${1} from '${2:./}${1}'
render(<${1}${3}/>, ${5:document.querySelector('#${4:app}')})
shouldComponentUpdate(nextProps, nextState) {
${1}
},
this.setState({
${1}: ${2}
})
this.state.${1}