https://github.com/manuelbieh/atom-react-es2015-snippets

React ES2015+ Snippets for Atom
https://github.com/manuelbieh/atom-react-es2015-snippets

atom atom-snippets es2015 react

Last synced: 16 days ago
JSON representation

React ES2015+ Snippets for Atom

• Host: GitHub
• URL: https://github.com/manuelbieh/atom-react-es2015-snippets
• Owner: manuelbieh
• License: mit
• Created: 2016-09-20T09:43:53.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-06-07T16:24:00.000Z (over 6 years ago)
• Last Synced: 2024-11-07T11:53:48.170Z (2 months ago)
• Topics: atom, atom-snippets, es2015, react
• Homepage:
• Size: 22.5 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Atom React ES2015+ Snippets

Some very opinionated (=[how I like it](https://www.manuelbieh.de)) React ES2015+ snippets for Atom. I try to follow community best practices and update the snippets regularly to always keep the snippets up-to-date with the recent development of React.

## React Component Class `rc`→tab

Hint: Use `rpc` instead to create a [PureComponent](https://facebook.github.io/react/docs/react-api.html#react.purecomponent).

```

import * as React from 'react';

export default class ${1:MyComponent} extends React.Component {

    state = {};

    render() {

        return (

            ${2:
}

        );

    }

}

```


## Redux connected React Component `rcrc`→tab

```

import * as React from 'react';

import { connect } from 'react-redux';

class ${1:MyComponent} extends React.Component {

    state = {};

    render() {

        return (

            ${2:
}

        );

    }

}


const mapStateToProps = (state) => ({});

const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(${1});

```

## Stateless Functional Component `sfc`→tab

```

import * as React from 'react';

const ${1} = (props) => {

    return (

        ${2:
}

    );

}


export default {$1};

```

## Lifecycle Methods

There is a shortcut for each of React's officially supported non-deprecated (as of 16.4) lifecycle methods. Just use the first letters of the method's words. Here's a list: 

| Shortcut | Lifecycle Method |

|---|---|

| `cwm` | `componentWillMount() {}` |

| `cdm` | `componentDidMount() {}` |

| `scu` | `shouldComponentUpdate() {}` |

| `cdu` | `componentDidUpdate() {}` |

| `cwu` | `componentWillUnmount() {}` |

| `gdsfp` | `static getDerivedStateFromProps() {}` |

| `gsbu` | `getSnapshotBeforeUpdate() {}` |