React & React Router Snippets for Atom
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
Table of Contents
Install
- Go to
Packages > Settings View > Install Packages/Themes
and search for atom-react-mf-snippets - Click Install
- Restart Atom
Features
- React Snippets
- React Router 4 Snippets
React Snippets
Table of React Snippets
Import
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'
Component Lifecycle
Mounting
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}
Updating
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}
Unmounting
React: componentWillUnmount() { ... }: _cwun
componentWillUnmount() {
${1}
}${2}
Component API
React: forceUpdate(...): _fup
forceUpdate(${1:callback})
React: setState({ ... }): _sst
this.setState({
${1}: ${2}
})
Class Properties
React: static defaultProps = { ... }: _scdp
static defaultProps = {
${1}: ${2}
}
React: Class.defaultProps = { ... }: _cdp
${1}.defaultProps = {
${2}: ${3}
}
PropTypes
React: Class.propTypes = { ... }: _cpt
${1}.propTypes = {
${2}: PropTypes.${3:string}
}
React: Class.propTypes = { ... } required: _cptr
${1}.propTypes = {
${2}: PropTypes.${3:string}.isRequired${4}
}
static propTypes
React: static propTypes = { ... }: _scpt
static propTypes = {
${1}: PropTypes.${2:string}
}
React: static propTypes = { ... } required: _scptr
static propTypes = {
${1}: PropTypes.${2:string}.isRequired${3}
}
propType blank
React: propType blank: _pt
${1}: PropTypes.${2:string}
React: propType blank Required: _ptr
${1}: PropTypes.${2:string}.isRequired${3}
propType string
React: propTypes string: _pts
${1}: PropTypes.string${2}
React: propTypes string Required: _ptsr
${1}: PropTypes.string.isRequired${2}
propType number
React: propTypes number: _ptn
${1}: PropTypes.number${2}
React: propTypes number required: _ptnr
${1}: PropTypes.number.isRequired${2}
propType object
React: propTypes object: _pto
${1}: PropTypes.object${2}
React: propTypes object required: _ptor
${1}: PropTypes.object.isRequired${2}
propType array
React: propTypes array: _pta
${1}: PropTypes.array${2}
React: propTypes array required: _ptar
${1}: PropTypes.array.isRequired${2}
propType bool
React: propTypes bool: _ptb
${1}: PropTypes.bool${2}
React: propTypes bool required: _ptbr
${1}: PropTypes.bool.isRequired${2}
propType element
React: propTypes element: _pte
${1}: PropTypes.element${2}
React: propTypes element required: _pter
${1}: PropTypes.element.isRequired${2}
propType function
React: propTypes function: _ptf
${1}: PropTypes.func${2}
React: propTypes function required: _ptfr
${1}: PropTypes.func.isRequired${2}
propType symbol
React: propTypes symbol: _ptsym
${1}: PropTypes.symbol${2}
React: propTypes symbol required: _ptsymr
${1}: PropTypes.symbol.isRequired${2}
propType node
React: propTypes node: _ptnode
${1}: PropTypes.node${2}
React: propTypes node required: _ptnoder
${1}: PropTypes.node.isRequired${2}
ContextTypes
React: Class.contextTypes = { ... }: _cct
${1}.contextTypes = {
${2}: PropTypes.${3:string}
}
React: static contextTypes = { ... }: _scct
static contextTypes = {
${1}: PropTypes.${2:string}
}
Skeletons
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 = propTypes
export 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 = propTypes
export default ${1}
this
React: this.props.: _props
this.props.${1}
React: this.state.: _state
this.state.${1}
React Router Snippets
Table of React Router Snippets
Import (RR)
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'
Link
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}
NavLink
Router: NavLink: _nln
<NavLink to="${1}">${2}</NavLink>${3}
Prompt
Router: Prompt: _prmpt
<Prompt message="${1}"/>${2}
Redirect
Router: Redirect: _redirect
<Redirect to={${1}} />${2}
Router: Redirect w/props: _redirectp
<Redirect to={{\n\tpathname: "${1}",\n\tstate: { ${2}: ${3} }\n}} />${4}
Route
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
<Router>${1}</Router>${2}
Router: Router history: _routerh
<Router history={${1:history}}>${2}</Router>${3}
Development
$ cd ~/.atom/packages
$ git clone https://github.com/MentallyFriendly/atom-react-mf-snippets
$ cd atom-react-mf-snippets
$ apm install
$ apm link
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Make changes
- Update ReadMe!
- Commit your changes:
git commit -m 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request
License
MIT License © Zeno Rocha
Credit
A selection of these React.js snippets were originally curated by orktes in Atom React in ES5 syntax.