New branch, convert to es6 syntax, fix typo and add some more snippet.

README.md

@@ -1,51 +1,30 @@
 vim-react-snippets
 ==================
 
-A set of snippets for Vim to work with Facebook's [React](http://facebook.github.io/react/) library.
+A set of snippets for Vim to work with Facebook's
+[React](http://facebook.github.io/react/) library. This fork change the snippet
+syntax to ES6. Remove semicolon and comma. I also remove snippets related to
+[react-classset](https://github.com/petehunt/react-classset) as it is deprecated now.
 
-A direct port of the awesome snippets from 
-[jgebhardt/sublime-react](https://github.com/jgebhardt/sublime-react).
+Require [UltiSnips](https://github.com/SirVer/ultisnips).
+I only update the `UltiSnips` version. Pull requests for
+[vim-snipmate](https://github.com/garbas/vim-snipmate) version are welcome.
 
-Requires [vim-snipmate](https://github.com/garbas/vim-snipmate) or [Ultisnips](https://github.com/SirVer/ultisnips).
 
 Installation
 ============
 
-Use your preferred Vim plugin installation method.
-I like [Vundle](http://github.com/gmarik/vundle), but other options like
-[pathogen](https://github.com/tpope/vim-pathogen) should work fine as well.
+Use your preferred Vim plugin installation method. For me, I like
+[vim-plug](https://github.com/junegunn/vim-plug). If you also using `vim-plug`,
+put the following into your `.vimrc`.
 
-####SnipMate
+````vimrc
+Plug 'SirVer/ultisnips'
 
-If you're using Vundle, and you don't currently have SnipMate, you will need to
-add the following to your `.vimrc` (taken from the [SnipMate README](https://github.com/garbas/vim-snipmate/blob/master/README.md)):
-
-```
-" vim-react-snippets:
-Bundle "justinj/vim-react-snippets"
-
-" SnipMate and its dependencies:
-Bundle "MarcWeber/vim-addon-mw-utils"
-Bundle "tomtom/tlib_vim"
-Bundle "garbas/vim-snipmate"
-
-" Other sets of snippets (optional):
-Bundle "honza/vim-snippets"
-```
-####Ultisnips
-
-If you prefer to use `vim-react-snippets` with `Ultisnips`, put this in your .vimrc 
-to install using Vundle
+" Currently, es6 version of snippets is available in es6 branch only
+Plug 'letientai299/vim-react-snippets', { 'branch': 'es6' }
 
-````
-" vim-react-snippets:
-Bundle "justinj/vim-react-snippets"
-
-" Ultisnips
-Bundle "SirVer/ultisnips"
-
-" Other sets of snippets (optional):
-Bundle "honza/vim-snippets"
+Plug 'honza/vim-snippets' "optional
 ````
 
 Usage
@@ -61,12 +40,31 @@ gdp<Tab>
 expanding to
 
 ```
-getDefaultProps: function() {
+getDefaultProps() {
     return {
 
     };
 },
 ```
 
+Another example:
+
+```
+rcx<Tab>
+```
+
+Expanding to
+
+```
+class ClassName extends React.Component {
+  render(){
+    return (
+
+    )
+  }
+}
+```
+
 And a bunch of others!
-Check `snippets/javascript.snippets` to see the full list.
+
+Check `./UltiSnips/javascript.snippets` to see the full list.

UltiSnips/javascript.snippets

@@ -2,86 +2,76 @@
 #  React snippets
 #
 
-snippet cs "React.addons.classSet" b
-var cx = React.addons.classSet;
-endsnippet
-
-snippet cdm "component did mount" b
-componentDidMount: function() {
+snippet cdm "Component did mount" b
+componentDidMount() {
 	${1}
-},$0
+}$0
 endsnippet
 
-snippet cdup "component did update" b
-componentDidUpdate: function(prevProps, prevState) {
+snippet cdup "Component did update" b
+componentDidUpdate(prevProps, prevState) {
 	${1}
-},$0
+}$0
 endsnippet
 
-snippet cwm "component will mount" b
-componentWillMount: function() {
+snippet cwm "Component will mount" b
+componentWillMount() {
 	${1}
-},$0
+}$0
 endsnippet
 
-snippet cwr "component will receive props" b
-componentWillReceiveProps: function(nextProps) {
+snippet cwr "Component will receive props" b
+componentWillReceiveProps(nextProps) {
 	${1}
-},$0
+}$0
 endsnippet
 
-snippet cwun "component will unmount" b
-componentWillUnmount: function() {
+snippet cwun "Component will unmount" b
+componentWillUnmount() {
 	${1}
-},$0
+}$0
 endsnippet
 
-snippet cwu "component will update" b
-componentWillUpdate: function(nextProps, nextState) {
+snippet cwu "Component will update" b
+componentWillUpdate(nextProps, nextState) {
 	${1}
-},$0
-endsnippet
-
-snippet cx
-cx({
-	${1}: ${2}
-});
+}$0
 endsnippet
 
-snippet fup
-forceUpdate(${1:callback});
+snippet fup "Force update"
+forceUpdate(${1:callback})
 endsnippet
 
-snippet gdp "get default props" b
-getDefaultProps: function() {
+snippet gdp "Get default props" b
+getDefaultProps() {
 	return {
 		${1}
-	};
-},$0
+	}
+}$0
 endsnippet
 
-snippet gis "get initial state" b
-getInitialState: function() {
+snippet gis "Get initial state" b
+getInitialState() {
 	return {
 		${1}: ${2}
-	};
-},$0
+	}
+}$0
 endsnippet
 
-snippet ism "is mounted"
+snippet ism "Is mounted"
 isMounted()
 endsnippet
 
-snippet jsx "define jsx dom" b
+snippet jsx "Define jsx dom" b
 /**
  * @jsx React.DOM
  */
 
-var React = require('react');
-}
-var ${2:ClassName} = React.createClass({
+import React from 'react';
 
-render: function() {
+let ${2:ClassName} = React.createClass({
+
+render() {
 	return (
 		${VISUAL}$4
 	);
@@ -95,50 +85,72 @@ endsnippet
 snippet pt "propTypes" b
 propTypes: {
 	${1}: React.PropTypes.${2:string}
-},
+}
 endsnippet
 
-snippet rcc "create class/component" b
-var ${1:ClassName} = React.createClass({
+snippet rcc "React.createClass" b
+let ${1:ClassName} = React.createClass({
 
-render: function() {
+render() {
 	return (
 		${VISUAL}$2
-	);
+	)
 }
 
-});
+})
 $0
 endsnippet
 
-snippet ren
-render: function() {
+snippet rcx "Extends React.Component" b
+class ${1:ClassName} extends React.Component {
+	render(){
+		return (
+			$2
+		)
+	}
+}
+endsnippet
+
+snippet ren "render"
+render() {
 	return (
 		${1:<div />}
-	);
+	)
 }$0
 endsnippet
 
-snippet sst "set state" b
+snippet sst "Set state" b
 this.setState({
 	${1}: ${2}
-});$0
+})$0
 endsnippet
 
-snippet scu "should component update"
-shouldComponentUpdate: function(nextProps, nextState) {
+snippet scu "Should component update"
+shouldComponentUpdate(nextProps, nextState) {
 	${1}
-},$0
+}$0
 endsnippet
 
-snippet props "get property" i
+snippet props "Get property" i
 this.props.${1}
 endsnippet
 
-snippet state "get state" i
+snippet state "Get state" i
 this.state.${1}
 endsnippet
 
-snippet trp
-this.transferPropsTo(${VISUAL}$0);
+snippet trp "Transfer props to"
+this.transferPropsTo(${VISUAL}$0)
+endsnippet
+
+# This snippet will only works if the keyword 'con' is the first word of line
+snippet con "Constructor for React.Component" b
+constructor(props, context) {
+	super(props, context)
+
+	this.state = {
+		$1: $2
+	}
+}$0
+
 endsnippet