atom-react-mf-snippets

Atom Snippets for React and React Router
MentallyFriendly
1,352
Flag as spam or malicious

React & React Router Snippets for Atom

Made with :heart: 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

  1. Install
  2. Features
  3. React Snippets
  4. React Router Snippets
  5. Development
  6. Contributing
  7. License
  8. Credit

Install

  1. Go to Packages > Settings View > Install Packages/Themes and search for atom-react-mf-snippets
  2. Click Install
  3. Restart Atom

Features

  • React Snippets
  • React Router 4 Snippets

React Snippets

Table of React Snippets

  1. Import
  2. Component Lifecycle
  3. Component API
  4. Class Properties
  5. PropTypes
  6. ContextTypes
  7. Skeletons
  8. this

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

  1. Import (React Router)
  2. Link
  3. NavLink
  4. Prompt
  5. Redirect
  6. Route
  7. Router

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

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Make changes
  4. Update ReadMe!
  5. Commit your changes: git commit -m 'Add some feature'
  6. Push to the branch: git push origin my-new-feature
  7. 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.