• Packages
  • Themes
  • Documentation
  • Blog
  • Discuss
Sign in

atom-react-es2015-snippets

Up-to-date React ES2015+ snippets for Atom. Useful shortcuts to make your react life easier!
  • #react
  • #es6
  • #es2015
  • #es2016
  • #es2017
manuelbieh
3.1.2 1,231
1
  • Repo
  • Bugs
  • Versions
  • License
Flag as spam or malicious

Atom React ES2015+ Snippets

Some very opinionated (=how I like it) 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.

import * as React from 'react';

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

    render() {
        return (
            ${2:<div />}
        );
    }
}

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:<div />}
        );
    }
}

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:<div />}
    );
}

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() {}

I think this package is bad news.

Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.

  • Terms of Use
  • Privacy
  • Code of Conduct
  • Releases
  • FAQ
  • Contact
with by