Made with by Mentally Friendly
An Atom snippet library for React and React Router. Using ES6 syntax and promoting best practices for React development.
Incompatibility Warning: Due to the prefix formatting of snippets this package is incompatible with the react-snippets package. This library started life as a fork of that library which was originally created by webbushka
Packages > Settings View > Install Packages/Themes
and search for atom-react-mf-snippets
React: import empty: _i
import ${1} from '${2}'
React: import: _ir
import React from 'react'
React: import with Component: _irc
import React, { Component } from 'react'
React: import PropTypes: _ip
import PropTypes from 'prop-types'
React: import ReactDOM: _ird
import ReactDOM from 'react-dom'
React: constructor(props): _cns
constructor(props) {super(props)this.state = {${1}: props.${2}}}${3}
React: componentWillMount() { ... }: _cwm
componentWillMount() {${1}}${2}
React: render() { return ... }: _ren
render() {return (${1:<div></div>})}
React: componentDidMount() { ... }: _cdm
componentDidMount() {${1}}${2}
React: componentWillReceiveProps(np) { ... }: _cwr
componentWillReceiveProps(nextProps) {${1}}${2}
React: shouldComponentUpdate(np, ns) { ... }: _scu
shouldComponentUpdate(nextProps, nextState) {${1}}${2}
React: componentWillUpdate(np, ns) { ... }: _cwu
componentWillUpdate(nextProps, nextState) {${1}}${2}
React: componentDidUpdate(pp, ps) { ... }: _cdup
componentDidUpdate(prevProps, prevState) {${1}}${2}
React: componentWillUnmount() { ... }: _cwun
componentWillUnmount() {${1}}${2}
React: forceUpdate(...): _fup
forceUpdate(${1:callback})
React: setState({ ... }): _sst
this.setState({${1}: ${2}})
React: static defaultProps = { ... }: _scdp
static defaultProps = {${1}: ${2}}
React: Class.defaultProps = { ... }: _cdp
${1}.defaultProps = {${2}: ${3}}
React: Class.propTypes = { ... }: _cpt
${1}.propTypes = {${2}: PropTypes.${3:string}}
React: Class.propTypes = { ... } required: _cptr
${1}.propTypes = {${2}: PropTypes.${3:string}.isRequired${4}}
React: static propTypes = { ... }: _scpt
static propTypes = {${1}: PropTypes.${2:string}}
React: static propTypes = { ... } required: _scptr
static propTypes = {${1}: PropTypes.${2:string}.isRequired${3}}
React: propType blank: _pt
${1}: PropTypes.${2:string}
React: propType blank Required: _ptr
${1}: PropTypes.${2:string}.isRequired${3}
React: propTypes string: _pts
${1}: PropTypes.string${2}
React: propTypes string Required: _ptsr
${1}: PropTypes.string.isRequired${2}
React: propTypes number: _ptn
${1}: PropTypes.number${2}
React: propTypes number required: _ptnr
${1}: PropTypes.number.isRequired${2}
React: propTypes object: _pto
${1}: PropTypes.object${2}
React: propTypes object required: _ptor
${1}: PropTypes.object.isRequired${2}
React: propTypes array: _pta
${1}: PropTypes.array${2}
React: propTypes array required: _ptar
${1}: PropTypes.array.isRequired${2}
React: propTypes bool: _ptb
${1}: PropTypes.bool${2}
React: propTypes bool required: _ptbr
${1}: PropTypes.bool.isRequired${2}
React: propTypes element: _pte
${1}: PropTypes.element${2}
React: propTypes element required: _pter
${1}: PropTypes.element.isRequired${2}
React: propTypes function: _ptf
${1}: PropTypes.func${2}
React: propTypes function required: _ptfr
${1}: PropTypes.func.isRequired${2}
React: propTypes symbol: _ptsym
${1}: PropTypes.symbol${2}
React: propTypes symbol required: _ptsymr
${1}: PropTypes.symbol.isRequired${2}
React: propTypes node: _ptnode
${1}: PropTypes.node${2}
React: propTypes node required: _ptnoder
${1}: PropTypes.node.isRequired${2}
React: Class.contextTypes = { ... }: _cct
${1}.contextTypes = {${2}: PropTypes.${3:string}}
React: static contextTypes = { ... }: _scct
static contextTypes = {${1}: PropTypes.${2:string}}
React: Stateless Function: _rf
const ${1} = ({ ${2} }) => (return (<div>${3}</div>))
React: Class: _rc
class ${1} extends Component {render() {return (<div>${2}</div>)}}
React: Skeleton Stateless Function: _srf
import React from 'react'const ${1} = ({ ${2} }) => (return (<div>${3}</div>))export default ${1}
React: Skeleton Class: _src
import React, { Component } from 'react'class ${1} extends Component {render() {return (<div>${2}</div>)}}export default ${1}
React: Skeleton Stateless Function w/PropTypes: _srfp
import React from 'react'import PropTypes from 'prop-types'const propTypes = {}const ${1} = ({ ${2} }) => (return (<div>${3}</div>))${1}.propTypes = propTypesexport default ${1}
React: Skeleton Class w/PropTypes: _srcp
import React from 'react'import PropTypes from 'prop-types'const propTypes = {}class ${1} extends Component {render() {return (<div>${2}</div>)}}${1}.propTypes = propTypesexport default ${1}
React: this.props.: _props
this.props.${1}
React: this.state.: _state
this.state.${1}
Router: import react-router-dom: _irr
import { ${1} } from 'react-router-dom'
Router: import Link: _il
import { Link } from 'react-router-dom'
Router: import Navlink: _inl
import { NavLink } from 'react-router-dom'
Router: import BrowserRouter: _ibr
import { BrowserRouter } from 'react-router-dom'
Router: import HashRouter: _ihr
import { HashRouter } from 'react-router-dom'
Router: import MemoryRouter: _imr
import { MemoryRouter } from 'react-router'
Router: import Switch, Route: _isr
import { Switch, Route } from 'react-router'
Router: import matchPath: _imp
import { matchPath } from 'react-router'
Router: import withRouter: _iwr
import { withRouter } from 'react-router'
Router: Link: _ln
<Link to="${1}">${2}</Link>${3}
Router: Link w/props: _lnp
<Link to={{\n\tpathname: "${1}",\n\tstate: { ${2}: ${3} }\n}}/>${4}
Router: NavLink: _nln
<NavLink to="${1}">${2}</NavLink>${3}
Router: Prompt: _prmpt
<Prompt message="${1}"/>${2}
Router: Redirect: _redirect
<Redirect to={${1}} />${2}
Router: Redirect w/props: _redirectp
<Redirect to={{\n\tpathname: "${1}",\n\tstate: { ${2}: ${3} }\n}} />${4}
Router: Route: _rt
<Route ${1:exact }path="${2}" component={${3}} />${4}
Router: Nested Route: _rtn
<Route path="${1}" component={${2}}>\n\t${3}</Route>${4}
Router: Route w/render: _rtr
<Route ${1:exact }path="${2}" render={(${3}) => ${4}} />${5}
Router: Route w/children: _rtc
<Route ${1:exact }path="${2}" children={({ ${3:match} }) => ${4}} />${5}
Router: Router: _router
<Router>${1}</Router>${2}
Router: Router history: _routerh
<Router history={${1:history}}>${2}</Router>${3}
$ cd ~/.atom/packages$ git clone https://github.com/MentallyFriendly/atom-react-mf-snippets$ cd atom-react-mf-snippets$ apm install$ apm link
git checkout -b my-new-feature
git commit -m 'Add some feature'
git push origin my-new-feature
MIT License © Zeno Rocha
A selection of these React.js snippets were originally curated by orktes in Atom React in ES5 syntax.
Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.