Skip to content

Instantly share code, notes, and snippets.

@hedgerh
Last active October 24, 2023 13:23
Show Gist options
  • Save hedgerh/f5324085cc9d1457cf80 to your computer and use it in GitHub Desktop.
Save hedgerh/f5324085cc9d1457cf80 to your computer and use it in GitHub Desktop.
Sublime Text Snippet for a React component using ES6 class syntax.

ES6 Class style React Component Quick Generator Snippet

  1. Go to Tools > New Snippetin Sublime Text
  2. Paste the code from es6-create-class-component.sublime-snippet
  3. Feel free to change tabTriggerto a custom trigger, if you don't like rcc
  4. Save it anywhere in Packages/User.
  5. Inside of an empty js/jsx file, type the trigger (rcc by default), then press TAB or RETURN, and..

ES6 Class Style React Component Boilerplate

Weeeeeeee!

<snippet>
<content><![CDATA[
'use strict';
import React, { Component, PropTypes } from 'react';
export default class ${1:${TM_FILENAME/(^\w*)|(?:-)(\w*)|(?:\.\w+)/\u$1$2/g}} extends Component {
constructor(props) {
super(props);
};
render() {
return (
${0:<div />}
);
}
}
${1:${TM_FILENAME/(^\w*)|(?:-)(\w*)|(?:\.\w+)/\u$1$2/g}}.PropTypes = {
${4:list}: PropTypes.${5:[ oneOf([]), instanceOf([]), shape({...\}) ]}
};
${1:${TM_FILENAME/(^\w*)|(?:-)(\w*)|(?:\.\w+)/\u$1$2/g}}.defaultProps = {
${4}: ${7:[]}
};
]]></content>
<tabTrigger>rcc</tabTrigger>
<scope>source.js</scope>
<description>React: ES6 Class Component</description>
</snippet>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment