├── .editorconfig
├── flux-action-types.sublime-snippet
├── redux-create-reducer-util.sublime-snippet
├── react-stateless-component.sublime-snippet
├── react-createClass-class.sublime-snippet
├── react-es6-class.sublime-snippet
├── redux-action-creators.sublime-snippet
├── redux-createReducer.sublime-snippet
├── redux-switch-reducer.sublime-snippet
├── react-redux-container-component.sublime-snippet
├── webpack-config.sublime-snippet
├── react-createClass-class-with-lifelycle.sublime-snippet
├── react-es6-class-with-lifecycle.sublime-snippet
├── README.md
├── react-router-routes.sublime-snippet
├── react-radium-class.sublime-snippet
└── LICENSE


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = tab
 5 | end_of_line = lf
 6 | charset = utf-8
 7 | trim_trailing_whitespace = true
 8 | insert_final_newline = true
 9 | 
10 | [*.sublime-snippet]
11 | indent_style = space
12 | indent_size = 2
13 | 
14 | [*.md]
15 | trim_trailing_whitespace = false
16 | 


--------------------------------------------------------------------------------
/flux-action-types.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | import create from 'create-action-types';
 4 | 
 5 | 
 6 | export default create([
 7 |   '${1:ACTION_NAME}',
 8 | ]);
 9 | 
10 | ]]></content>
11 |   <tabTrigger>fat</tabTrigger>
12 |   <scope>source.js</scope>
13 |   <description>flux action types</description>
14 | </snippet>
15 | 


--------------------------------------------------------------------------------
/redux-create-reducer-util.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | export default function createReducer(initialState, handlers) {
 4 |   return function reducer(state = initialState, action) {
 5 |     if (handlers.hasOwnProperty(action.type)) {
 6 |       return handlers[action.type](state, action);
 7 |     } else {
 8 |       return state;
 9 |     }
10 |   }
11 | }
12 | 
13 | ]]></content>
14 | 	<tabTrigger>rdcru</tabTrigger>
15 | 	<scope>source.js</scope>
16 | 	<description>redux createReducer util</description>
17 | </snippet>
18 | 


--------------------------------------------------------------------------------
/react-stateless-component.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | import React, { PropTypes } from 'react';
 4 | 
 5 | 
 6 | const ${1:ComponentName} = ({ children }) =>
 7 | 	<div>{children}</div>
 8 | 
 9 | ${1:ComponentName}.propTypes = {
10 |   ${2:prop}: PropTypes.func.isRequired
11 | };
12 | 
13 | ${1:ComponentName}.defaultProps = {};
14 | 
15 | 
16 | export default ${1:ComponentName};
17 | 
18 | ]]></content>
19 | 	<tabTrigger>rslc</tabTrigger>
20 | 	<scope>source.js</scope>
21 | 	<description>react stateless component</description>
22 | </snippet>
23 | 


--------------------------------------------------------------------------------
/react-createClass-class.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | import React, { createClass, PropTypes } from 'react';
 4 | 
 5 | 
 6 | const ${1:className} = createClass({
 7 | 	propTypes: {
 8 | 		${2:prop}: PropTypes.func.isRequired
 9 | 	},
10 | 
11 | 	render() {
12 | 		return (
13 | 			<div>{this.props.children}</div>
14 | 		);
15 | 	}
16 | });
17 | 
18 | 
19 | export default ${1:className};
20 | 
21 | ]]></content>
22 | 	<tabTrigger>rcc</tabTrigger>
23 | 	<scope>source.js</scope>
24 | 	<description>react createClass class</description>
25 | </snippet>
26 | 


--------------------------------------------------------------------------------
/react-es6-class.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | import React, { Component, PropTypes } from 'react';
 4 | 
 5 | 
 6 | class ${1:className} extends Component {
 7 |   static propTypes = {
 8 |     ${2:prop}: PropTypes.func.isRequired
 9 |   };
10 | 
11 |   render() {
12 |     return (
13 |       <div>{this.props.children}</div>
14 |     );
15 |   }
16 | }
17 | 
18 | 
19 | export default ${1:className};
20 | 
21 | ]]></content>
22 |   <tabTrigger>r6c</tabTrigger>
23 |   <scope>source.js</scope>
24 |   <description>react es6 class</description>
25 | </snippet>
26 | 


--------------------------------------------------------------------------------
/redux-action-creators.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | import ActionTypes from '../ActionTypes';
 4 | 
 5 | 
 6 | export const ${1:actionCreatorName} = function() {
 7 |   return {
 8 |     type: ActionTypes.${2:ACTION_NAME},
 9 |     payload: {
10 | 
11 |     }
12 |   };
13 | };
14 | 
15 | export const ${3:actionCreator2Name} = function() {
16 |   return (dispatch) => {
17 |     dispatch(${1:actionCreatorName}());
18 |   }
19 | };
20 | 
21 | ]]></content>
22 |   <tabTrigger>rdac</tabTrigger>
23 |   <scope>source.js</scope>
24 |   <description>redux action creators</description>
25 | </snippet>
26 | 


--------------------------------------------------------------------------------
/redux-createReducer.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | import createReducer from '../utils/createReducer';
 4 | import ActionTypes from '../ActionTypes';
 5 | 
 6 | const initialState = ${2:InitialState};
 7 | 
 8 | const ${1:reducerName} = createReducer(initialState, {
 9 |   [ActionTypes.${3:ACTION_NAME}](state, action) {
10 |     return {
11 |       ...state,
12 |       ${4:someOthers}
13 |     }
14 |   }
15 | });
16 | 
17 | export default ${1:reducerName};
18 | 
19 | ]]></content>
20 |   <tabTrigger>rdcr</tabTrigger>
21 |   <scope>source.js</scope>
22 |   <description>redux createReducer</description>
23 | </snippet>
24 | 


--------------------------------------------------------------------------------
/redux-switch-reducer.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | import ActionTypes from '../ActionTypes';
 4 | 
 5 | const initialState = ${2:InitialState};
 6 | 
 7 | const ${1:reducerName} = function(state = initialState, action) {
 8 |   switch (action.type) {
 9 |     case ActionTypes.${3:ACTION_NAME}:
10 |       return {
11 |       ...state,
12 |       ${4:someOthers}
13 |     }
14 |     default:
15 |       return state;
16 |   }
17 | };
18 | 
19 | export default ${1:reducerName};
20 | 
21 | ]]></content>
22 |   <tabTrigger>rdsr</tabTrigger>
23 |   <scope>source.js</scope>
24 |   <description>redux switch reducer</description>
25 | </snippet>
26 | 


--------------------------------------------------------------------------------
/react-redux-container-component.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | import { connect } from 'react-redux';
 4 | import { bindActionCreators } from 'redux';
 5 | import ${1:className} from './components/${1:className}';
 6 | 
 7 | 
 8 | function mapStateToProps(state) {
 9 | 	return {
10 | 
11 | 	};
12 | }
13 | 
14 | function mapDispatchToProps(dispatch) {
15 | 	return {
16 | 
17 | 	};
18 | }
19 | 
20 | 
21 | export default connect(
22 | 	mapStateToProps,
23 | 	mapDispatchToProps
24 | )(${1:className});
25 | 
26 | ]]></content>
27 | 	<tabTrigger>rrcc</tabTrigger>
28 | 	<scope>source.js</scope>
29 | 	<description>react redux container component</description>
30 | </snippet>
31 | 


--------------------------------------------------------------------------------
/webpack-config.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | var webpack = require('webpack');
 4 | 
 5 | module.exports = {
 6 |   entry: './entry.js',
 7 |   output: {
 8 |     path: __dirname,
 9 |     filename: 'bundle.js'
10 |   },
11 |   module: {
12 |     loaders: [
13 |       { test: /\.css\$/, loader: 'style!css' },
14 |       { test: /\.jsx?\$/, loader: 'react-hot-loader!babel-loader?stage=0' },
15 |       { test: /\.(png|jpg|jpeg|gif|svg)\$/, loader: 'url-loader?limit=10000' },
16 |       { test: /\.(woff|woff2)\$/, loader: 'url-loader?limit=100000' }
17 |     ]
18 |   }
19 | };
20 | ]]></content>
21 |   <tabTrigger>wpc</tabTrigger>
22 |   <scope>source.js</scope>
23 |   <description>webpack.config.js</description>
24 | </snippet>
25 | 


--------------------------------------------------------------------------------
/react-createClass-class-with-lifelycle.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | import React, { createClass, PropTypes } from 'react';
 4 | 
 5 | 
 6 | const ${1:className} = createClass({
 7 | 	propTypes: {
 8 | 		${2:prop}: PropTypes.func.isRequired
 9 | 	},
10 | 
11 | 	getInitialState() {
12 | 		return {
13 | 
14 | 		};
15 | 	},
16 | 
17 | 	componentWillMount() {
18 | 
19 | 	},
20 | 
21 | 	componentDidMount() {
22 | 
23 | 	},
24 | 
25 | 	componentWillReceiveProps() {
26 | 
27 | 	},
28 | 
29 | 	componentWillUnmount() {
30 | 
31 | 	},
32 | 
33 | 	render() {
34 | 		return (
35 | 			<div>{this.props.children}</div>
36 | 		);
37 | 	}
38 | });
39 | 
40 | 
41 | export default ${1:className};
42 | 
43 | ]]></content>
44 | 	<tabTrigger>rccl</tabTrigger>
45 | 	<scope>source.js</scope>
46 | 	<description>react createClass class with lifecycle</description>
47 | </snippet>
48 | 


--------------------------------------------------------------------------------
/react-es6-class-with-lifecycle.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 | 	<content><![CDATA[
 3 | import React, { Component, PropTypes } from 'react';
 4 | 
 5 | 
 6 | class ${1:className} extends Component {
 7 | 	static propTypes = {
 8 | 		${2:prop}: PropTypes.func.isRequired
 9 | 	};
10 | 
11 | 	static defaultProps = {};
12 | 
13 | 	constructor(props, context) {
14 | 		super(props, context)
15 | 		this.state = {
16 | 
17 | 		};
18 | 	}
19 | 
20 | 	componentWillMount() {
21 | 
22 | 	}
23 | 
24 | 	componentDidMount() {
25 | 
26 | 	}
27 | 
28 | 	componentWillReceiveProps() {
29 | 
30 | 	}
31 | 
32 | 	componentWillUnmount() {
33 | 
34 | 	}
35 | 
36 | 	render() {
37 | 		return (
38 | 			<div>{this.props.children}</div>
39 | 		);
40 | 	}
41 | }
42 | 
43 | 
44 | export default ${1:className};
45 | 
46 | ]]></content>
47 | 	<tabTrigger>r6cl</tabTrigger>
48 | 	<scope>source.js</scope>
49 | 	<description>react es6 class with lifecycle</description>
50 | </snippet>
51 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Sublime React Snippet
 2 | 
 3 | > A collection of React sublime snippets for personal usage.
 4 | 
 5 | ## React
 6 | 
 7 | - react createClass class: <kbd>rcc</kbd>
 8 | - react createClass class with lifecycle: <kbd>rccl</kbd>
 9 | - react es6 class: <kbd>r6c</kbd>
10 | - react es6 class with lifecycle: <kbd>r6cl</kbd>
11 | - react stateless component: <kbd>rslc</kbd>
12 | 
13 | ## Flux
14 | 
15 | #### Action
16 | 
17 | - flux action types: <kbd>fat</kbd>
18 | 
19 | ## React Router
20 | 
21 | - react router routes: <kbd>rrr</kbd>
22 | 
23 | ## Redux
24 | 
25 | #### Component
26 | 
27 | #### Action
28 | 
29 | - redux action creators: <kbd>rdac</kbd>
30 | 
31 | #### Reducer
32 | 
33 | - redux create reducer util: <kbd>rdcru</kbd>
34 | - redux create reducer: <kbd>rdcr</kbd>
35 | - redux switch reducer: <kbd>rdsr</kbd>
36 | 
37 | ## Radium
38 | 
39 | - react radium class: <kbd>rrc</kbd>
40 | 
41 | ## Webpack
42 | 
43 | - webpack config: <kbd>wpc</kbd>
44 | 


--------------------------------------------------------------------------------
/react-router-routes.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | import React from 'react';
 4 | import { Route, IndexRoute } from 'react-router';
 5 | import App from './containers/App';
 6 | import Home from './containers/Home';
 7 | import AboutUs from './containers/AboutUs';
 8 | import ${1:ResourceList} from './containers/${1:ResourceList} ';
 9 | import ${2:SingleResource} from './containers/${2:SingleResource}';
10 | import NotFound from './containers/NotFound';
11 | 
12 | 
13 | export default (
14 |   <Route path="/" component={App}>
15 |     <IndexRoute component={Home} />
16 |     <Route path="/about-us" component={AboutUs} />
17 |     <Route path="/${3:resources}">
18 |       <IndexRoute component={${1:ResourceList}} />
19 |       <Route path=":postId" component={${2:SingleResource}} />
20 |     </Route>
21 |     <Route path="*" component={NotFound} />
22 |   </Route>
23 | );
24 | 
25 | ]]></content>
26 |   <tabTrigger>rrr</tabTrigger>
27 |   <scope>source.js</scope>
28 |   <description>react router routes</description>
29 | </snippet>
30 | 


--------------------------------------------------------------------------------
/react-radium-class.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | import React, { Component, PropTypes } from 'react';
 4 | import Radium from 'radium';
 5 | 
 6 | 
 7 | @Radium
 8 | class ${1:className} extends Component {
 9 |   static propTypes = {
10 |     ${2:prop}: PropTypes.func.isRequired
11 |   };
12 | 
13 |   static defaultProps = {};
14 | 
15 |   constructor(props) {
16 |     super(props)
17 |     this.state = {
18 | 
19 |     };
20 |   }
21 | 
22 |   componentWillMount() {
23 | 
24 |   }
25 | 
26 |   componentDidMount() {
27 | 
28 |   }
29 | 
30 |   componentWillReceiveProps() {
31 | 
32 |   }
33 | 
34 |   componentWillUnmount() {
35 | 
36 |   }
37 | 
38 |   render() {
39 |     return (
40 |       ${0:<div style={[
41 |         styles.base,
42 |         this.props.style
43 |       ]}>
44 |         {this.props.children}
45 |       </div>}
46 |     );
47 |   }
48 | }
49 | 
50 | 
51 | const styles = {
52 |   base: {
53 | 
54 |   }
55 | };
56 | 
57 | 
58 | export default ${1:className};
59 | ]]></content>
60 |   <tabTrigger>rrc</tabTrigger>
61 |   <scope>source.js</scope>
62 |   <description>react radium class</description>
63 | </snippet>
64 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 C. T. Lin
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------